前言
在现代前端和后端开发中,TypeScript 已经成为许多开发者的首选语言。然而,TypeScript 的配置文件(特别是多个配置文件协同工作时)常常让开发者感到困惑。本文将深入探讨 tsconfig.json、tsconfig.app.json 和 tsconfig.node.json 的关系、配置细节和最佳实践,帮助您彻底掌握 TypeScript 项目配置。
一、三个配置文件的关系与定位
1. 角色分工
| 配置文件 | 主要用途 | 典型应用场景 |
|---|---|---|
tsconfig.json |
根配置文件,定义全局默认配置和项目引用(Project References) | 多项目仓库的入口配置 |
tsconfig.app.json |
前端应用专用配置(继承根配置或框架预设) | Vue/React 等前端项目 |
tsconfig.node.json |
Node.js 服务端专用配置(继承根配置) | Express/NestJS 等后端项目 |
2. 协作流程
3. 文件加载顺序
-
TypeScript 首先读取
tsconfig.json -
根据
references或extends加载子配置 -
合并所有配置(子配置优先级高于父配置)
二、tsconfig.json 详解
1. 核心结构
{
"extends": "",
"***pilerOptions": {},
"include": [],
"exclude": [],
"references": [],
"files": []
}
2. ***pilerOptions 关键配置
语言目标相关
| 属性 | 描述 | 推荐值 | 默认值 |
|---|---|---|---|
target |
编译目标ES版本 |
"ES2018"/"ES2022"
|
"ES3" |
lib |
包含的API库声明 | ["ES2018", "DOM"] |
根据target推断 |
module |
模块系统类型 |
"ESNext"/"***monJS"
|
"***monJS" |