@types/weui.js | 解决ts无法找到模块“weui.js”的声明文

我是在vite-vue3-ts里使用的，代码贴出来了，可以自行根据不同框架使用，使用办法大同小异。

使用效果：

如果没安装weui + weui.js，请执行以下npm命令进行安装：

npm install weui.js weui

把这段代码放在src目录、项目的根目录里的 .d.ts 文件里就可以了，我是新建了个 weui-js.d.ts 文件存放的：

// weui.js
// 这里只定义了反馈的接口类型，其他类型的可以自行根据需求和习惯定义。

interface dialogOptions {
    title?: string;
    content?: string;
    className?: string;
    buttons?: {
        label: string;
        type?: 'primary' | 'default';
        onClick?: () => void;
    }[]
}

interface Weui {
    actionSheet(
        menus: { label: string; onClick: () => void; }[],
        actions: { label: string; onClick: () => void; }[],
        options?: { title?: string; className?: string; onClose?: () => void; onClickMask?: () => void; },
    ): void;
    alert(
        content: string,
        yes?: (() => void) | dialogOptions,
        options?: dialogOptions,
    ): { hide: () => void; };
    confirm(
        content: string,
        yes?: (() => void) | dialogOptions,
        no?: (() => void) | dialogOptions,
        options?: dialogOptions,
    ): { hide: () => void; };
    dialog(
        options?: dialogOptions,
    ): { hide: () => void; };
    // form.md 待补充
    gallery(
        url: string,
        options?: { className?: string; onDelete?: () => void; },
    ): void;
    loading(
        content: string,
        options?: { className?: string; },
    ): { hide: () => void; };
    // picker.md 待补充
    // searchBar.md 待补充
    // slider.md 待补充
    // tab.md 待补充
    toast(
        content: string,
        options?: number | { duration?: number; callback?: () => void; className?: string; },
    ): { hide: () => void; };
    topTips(
        content: string,
        options?: number | (() => void) | { duration?: number; callback?: () => void; className?: string; },
    ): { hide: () => void; };
    // uploader.md 待补充
}

declare module 'weui.js' {
    const weui: Weui;
    export default weui;
}

然后在vite-env.d.ts文件里声明下全局变量类型，如果不是vite构建的则在vue.d.ts里声明，如果不是ts的项目则直接跳过这一步：

import weui from "weui.js";


declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $weui: typeof weui;
    }
}

然后在main.ts里赋值weui.js全局变量：

import {createApp} from 'vue';
import './assets/style.css';
import App from './App.vue';

// 引用weui + weui.js
// 安装这俩包可以在项目目录下执行命令：npm install weui.js weui
import 'weui';
import weui from 'weui.js';

const app = createApp(App);

// 赋值全局变量, 这里的$weui变量在全局都可以使用, 注意$weui要和vite-env.d.ts里声明的类型一致
app.config.globalProperties.$weui = weui;


app.mount('#app');

然后在项目里使用的时候就有代码提示且不会报错了：