首先,我们先把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', // 自动生成的类型声明文件
}),
],
});
完毕