Vite4+Typescript+Vue3+Pinia 从零搭建(2) - ts配置
合集 - Vite4+Typescript+Vue3+Pinia 从零搭建
- Vite4+Typescript+Vue3+Pinia 从零搭建(1) - 项目初始化
- Vite4+Typescript+Vue3+Pinia 从零搭建(2) - ts配置
- Vite4+Typescript+Vue3+Pinia 从零搭建(3) - vite配置
- Vite4+Typescript+Vue3+Pinia 从零搭建(4) - 代码规范
- Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router
- Vite4+Typescript+Vue3+Pinia 从零搭建(6) - 状态管理pina
- Vite4+Typescript+Vue3+Pinia 从零搭建(7) - request封装
项目代码同步至码云 weiz-vue3-template
关于tsconfig的配置字段可查看其他文档,如 typeScript tsconfig配置详解
tsconfig.json
文件修改如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47{
"compilerOptions": {
"target": "ESNext", // 将代码编译为最新版本的 JS
"useDefineForClassFields": true,
"module": "ESNext", // 使用 ES Module 格式打包编译后的文件
"lib": ["ESNext", "DOM", "DOM.Iterable"], // 引入 ES 最新特性和 DOM 接口的类型定义
"skipLibCheck": true, // 跳过对 .d.ts 文件的类型检查
"esModuleInterop": true, // 允许使用 import 引入使用 export = 导出的内容
"sourceMap": true, // 用来指定编译时是否生成.map文件
"allowJs": false, // 是否允许使用js
"baseUrl": ".", // 查询的基础路径
"paths": { // 路径映射,配合别名使用
"@/*": ["src/*"],
"@build/*": ["build/*"],
"#/*": ["types/*"]
},
/* Bundler mode */
"moduleResolution": "node", // 使用 Node/bundler 的模块解析策略
"allowImportingTsExtensions": true,
"resolveJsonModule": true, // 允许引入 JSON 文件
"isolatedModules": true, // 要求所有文件都是 ES Module 模块。
"noEmit": true, // 不输出文件,即编译后不会生成任何js文件
"jsx": "preserve", // 保留原始的 JSX 代码,不进行编译
/* Linting */
"strict": true, // 开启所有严格的类型检查
"noUnusedLocals": true, // 报告未使用的局部变量的错误
"noUnusedParameters": true, // 报告函数中未使用参数的错误
"noFallthroughCasesInSwitch": true // 确保switch语句中的任何非空情况都包含
},
"include": [ // 需要检测的文件
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"mock/*.ts",
"types/*.d.ts",
"vite.config.ts"
],
"exclude": [ // 不需要检测的文件
"dist",
"**/*.js",
"node_modules"
],
"references": [{ "path": "./tsconfig.node.json" }] // 为文件进行不同配置
}
tsconfig.node.json
修改文件如下:1
2
3
4
5
6
7
8
9
10{
"compilerOptions": {
"composite": true, // 对于引用项目必须设置该属性
"skipLibCheck": true, // 跳过对 .d.ts 文件的类型检查
"module": "ESNext", // 使用 ES Module 格式打包编译后的文件
"moduleResolution": "Node", // 使用 Node/bundler 的模块解析策略
"allowSyntheticDefaultImports": true // 允许使用 import 导入使用 export = 导出的默认内容
},
"include": ["vite.config.ts"]
}
类型定义
新建文件夹 types
,用来存放类型定义。比如新建 index.d.ts
:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16type TargetContext = "_self" | "_blank";
type EmitType = (event: string, ...args: any[]) => void;
type AnyFunction<T> = (...args: any[]) => T;
type PropType<T> = VuePropType<T>;
type Writable<T> = {
-readonly [P in keyof T]: T[P];
};
type Nullable<T> = T | null;
type NonNullable<T> = T extends null | undefined ? never : T;
interface Fn<T = any, R = T> {
(...arg: T[]): R;
}
interface PromiseFn<T = any, R = T> {
(...arg: T[]): Promise<R>;
}
后续也可以新增其他文件,比如 global.d.ts
存放全局定义,router.d.ts
存放路由定义等
类型检查命令
修改 package.json
,新增以下命令:1
2
3"scripts": {
"type-check": "vue-tsc --noEmit"
},
保存后,运行 npm run type-check
,即可项目中是否有类型错误