首先，我们先把tsconfig.json的"strict": true开启，然后下载好vue，后面还需要的下载后面再说，对了，在uniapp项目里会出现问题，本文的后面有修复方法，推荐先看
对了，import和export关键字在dts文件的顶层不能乱加，要加只能在作为一个模块或者一个模块拓展时才加，不然写的declare就不能全局生效了
// tsconfig.json
{
"compilerOptions": {
"strict": true //就是这个
},
}
自定义组件、uniapp的uni_modules组件的类型声明
我们需要下载三个依赖，分别是vite、@vitejs/plugin-vue、unplugin-vue-components，然后在vite.config.ts里写入以下代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
vue(),
Components({
// 你的 vue 文件所在目录
dirs: ['uni_modules','components'],
extensions: ['vue'],
deep: true, // 是否递归查找子目录
directoryAsNamespace: false,
dts: 'custom-types/components/index.d.ts', // 自动生成的类型声明文件
}),
]
}
)
然后我们接着在package.json的scripts节点添加一下代码
"scripts": {
"dev": "vite dev"
}
然后我们在npm run dev一下，就会发现多了'custom-types/components/index.d.ts'这么一个组件类型声明文件
如此一来，自定义的组件和下载的uni_modules组件的类型就有了
vue-i8n的类型声明
vue-i18n的类型声明是指在模版的组件上添加上$t函数，并为$t函数的参数添加类型，让我们只要输入‘’单引号就跳出提示，这样就不用傻乎乎的写字符的键了。i18n的类型声明比较简单，只需要的创建好i18n.d.ts文件，再写入以下代码
import "vue"
import TypeI18n from "./en" //这里是导入你的i18n配置文件，要把en.json复制一份过来并把后缀改成ts，export default 那个json对象
declare module "vue" {
export declare interface ComponentCustomProperties {
$t(key:keyof typeof TypeI18n):string;
}
}
uni对象的类型声明
这里我们需要下载@dcloudio/types这个依赖，然后在tsconfig.json里添加以下代码即可
{
"compilerOptions": {
"typeRoots": [
"./node_modules/@dcloudio"
]
},
}
uniapp项目出错时修复的方法
在uniapp里，想使用vite.config.ts需要一个依赖@dcloudio/vite-plugin-uni，hx已经内置好了，只需要引用即可
这是之前文章错误的地方，不要这么做
使用npm包管理器下载@dcloudio/vite-plugin-uni依赖之后，npm会提示其中有一些依赖太老旧已经被抛弃了等提示，我们可以运行一下命令修复依赖
最后把vite.config.ts改成以下代码
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [uni(),
Components({
// 你的 vue 文件所在目录
dirs: ['uni_modules','components'],
extensions: ['vue'],
deep: true, // 是否递归查找子目录
directoryAsNamespace: false,
dts: 'custom-types/components/index.d.ts', // 自动生成的类型声明文件
}),
],
});
完毕
