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

说明

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

基本结构

{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
// 解决路径别名,ts文件@符号转成src路径报错问题
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
// "auto-import.d.ts" 解决没有显示import，找不到的问题
"types": ["element-plus/global", "./auto-imports.d.ts", "./components.d.ts"]
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "./auto-imports.d.ts", "./components.d.ts"]
}

项目特点分析

技术栈特点

• Vue 3 + TypeScript + Vite：现代前端技术栈
• Element Plus：使用了 Element Plus UI 库
• 自动导入：使用了自动导入功能（auto-imports.d.ts）
• 组件类型声明：使用了组件类型声明（components.d.ts）

开发体验优化

• 路径别名：使用 @ 符号简化导入路径
• 类型支持：完善的类型声明配置
• 代码质量：严格的类型检查和 linting 规则

构建优化

• 增量编译：使用 tsBuildInfoFile 提高编译性能
• 合理的文件包含：精确指定需要编译的文件

实际应用价值

解决的常见问题

1 路径别名问题：通过 baseUrl 和 paths 解决 @ 符号路径报错2 自动导入问题：通过 types 和 include 解决自动导入的类型识别3 组件类型问题：通过包含 components.d.ts 提供组件类型支持

开发效率提升

• 减少路径编写错误
• 提供更好的 IDE 智能提示
• 提前发现类型错误
• 提高编译速度

总结

这个 tsconfig.app.json 文件是一个配置完善的 Vue 项目 TypeScript 配置，它解决了现代 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 选项）

路径别名配置：

"baseUrl": ".",
"paths": {
  "@/*": ["src/*"]
}

• baseUrl：设置基础路径，用于解析非相对模块名
• paths：配置路径映射，将 @/* 映射到 src/*
• 解决的问题：解决 TypeScript 文件中使用 @ 符号路径别名报错的问题

类型声明配置：

"types": ["element-plus/global", "./auto-imports.d.ts", "./components.d.ts"]

• element-plus/global：Element Plus UI 库的全局类型声明
• ./auto-imports.d.ts：自动导入的类型声明文件
• ./components.d.ts：组件类型声明文件
• 解决的问题：解决没有显式 import 时找不到类型的问题

 

 

 

 

 

 

3 files 属性

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

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

4 include 属性

"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "./auto-imports.d.ts", "./components.d.ts"]

• 作用：指定要编译的文件模式
• 包含文件：
  • src/**/*.ts：src 目录下所有的 TypeScript 文件
  • src/**/*.tsx：src 目录下所有的 TypeScript JSX 文件
  • src/**/*.vue：src 目录下所有的 Vue 单文件组件
  • ./auto-imports.d.ts：根目录下的自动导入类型声明文件
  • ./components.d.ts：根目录下的组件类型声明文件

与其他配置文件的关系

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

 files 、 include 、exclude 属性的使用建议

{
  "files": [
    // 只包含必要的入口文件
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    // 包含所有源代码文件
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": [
    // 排除不需要的文件
    "src/**/*.spec.ts",
    "src/**/*.test.ts",
    "node_modules"
  ]
}

files 属性

• 精确指定：明确列出要编译的具体文件
• 优先级高：即使文件被 exclude 排除，也会被包含
• 适合场景：指定入口文件、核心文件

include 属性

• 模式匹配：使用 glob 模式匹配文件
• 范围更广：可以匹配多个文件
• 适合场景：包含整个源代码目录

exclude属性作用与include相反即不包含哪些文件

最佳实践建议

1 明确入口文件：

• 使用 files 指定核心入口文件
• 确保这些文件总是被编译

2 广泛包含源代码：

• 使用 include 包含所有源代码文件
• 利用 glob 模式简化配置

3 合理排除文件：

• 使用 exclude 排除测试文件、第三方代码
• 避免重复编译

4 性能考虑：

• 对于大型项目，files 可能性能更好
• 对于小型项目，include 更方便维护