51工具盒子项目代码同步至码云 weiz-vue3-template
关于tsconfig的配置字段可查看其他文档，如 typeScript tsconfig配置详解
tsconfig.json {#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 {#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 16 | type 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，即可项目中是否有类型错误
