002 vue3-admin项目的目录及文件说明之tsconfig.app.json

说明

tsconfig.app.json 是 TypeScript 配置文件，专门用于应用代码的编译配置。

基本结构

{"extends": "@vue/tsconfig/tsconfig.dom.json","compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo","types": ["vite/client"],/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"erasableSyntaxOnly": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

核心配置项

1 extends 属性

 "extends": "@vue/tsconfig/tsconfig.dom.json"

• 作用：继承基础的 TypeScript 配置
• 优势：保持配置的一致性，避免重复配置。此处使用 Vue 推荐的最佳实践配置
• 继承关系：tsconfig.app.json 继承自@vue/tsconfig/tsconfig.dom.json（@vue/tsconfig 是 Vue 官方的 TypeScript 配置包）

2 compilerOptions 属性

  "compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo","types": ["vite/client"],/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"erasableSyntaxOnly": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true}

• outDir：指定编译输出目录
• tsBuildInfoFile：指定 TypeScript 增量编译信息文件的位置
  • 用于缓存编译信息，提高后续编译速度
• types：指定要包含的类型声明文件
  • 空数组表示不包含任何类型声明，此处包含 Vite 客户端相关的类型声明

代码质量检查配置：

"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true

• strict：启用所有严格类型检查选项
• noUnusedLocals：禁止未使用的局部变量
• noUnusedParameters：禁止未使用的函数参数
• erasableSyntaxOnly：只允许可擦除的语法（较新的 TypeScript 选项）
• noFallthroughCasesInSwitch：禁止 switch 语句中的 case 穿透
• noUncheckedSideEffectImports：禁止未检查的副作用导入（较新的 TypeScript 选项）

3 files 属性

"files": ["src/main.ts","src/polyfills.ts"
]

• 作用：指定要编译的特定文件
• 包含文件：
  • main.ts：应用的入口文件
  • polyfills.ts：浏览器兼容性填充

4 include 属性

"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]

• 作用：指定要编译的文件模式
• 包含文件：
  • src/**/*.ts：src 目录下所有的 TypeScript 文件
  • src/**/*.tsx：src 目录下所有的 TypeScript JSX 文件
  • src/**/*.vue：src 目录下所有的 Vue 单文件组件

与其他配置文件的关系

tsconfig.json

• 基础配置：包含通用的 TypeScript 编译选项
• 被继承：被 tsconfig.app.json 和 tsconfig.spec.json 继承

tsconfig.spec.json

• 测试配置：专门用于测试代码的编译配置
• 包含测试：通常包含 src/test.ts 和测试相关的文件

配置建议

开发环境

• 启用严格模式："strict": true
• 开启未使用变量检查："noUnusedLocals": true
• 配置路径别名："paths": { "@app/*": ["src/app/*"] }

生产环境

• 关闭源映射："sourceMap": false
• 启用声明文件生成："declaration": true
• 优化编译选项："noImplicitAny": true