项目代码同步至码云 weiz-vue3-template
关于tsconfig的配置字段可查看其他文档，如 typeScript tsconfig配置详解
tsconfig.json
文件修改如下:
{
"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
修改文件如下：
{
"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：
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，新增以下命令：
"scripts": {
"type-check": "vue-tsc --noEmit"
},保存后，运行 npm run type-check，即可项目中是否有类型错误
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。
