如何配置TypeScript编译选项？

当你开始用TypeScript，tsconfig.json这个配置文件就是你的总控制台。它告诉TypeScript编译器怎么处理你的代码：编译成哪个版本的JavaScript、去哪儿找文件、用什么规则检查类型。理解几个关键选项，就能搞定大部分场景。

生成一个初始配置

最省事的办法是让TypeScript自己生成一个。在项目根目录下运行：

npx tsc --init

这会创建一个包含大量选项（大部分被注释掉）的tsconfig.json文件。你不用管所有选项，重点关注几个最常用的就行。

指定编译目标和模块系统

target 决定把你的TypeScript代码编译成哪个版本的JavaScript。ES5兼容性最好，但代码会冗长一些。现在浏览器普遍支持ES6+，设成 ES2020 或 ESNext 能让编译出的代码更简洁。

{
  "compilerOptions": {
    "target": "ES2020"
  }
}

module 指定生成的模块系统。如果你用Webpack、Vite这类打包工具，或者用Node.js的ES模块，选 ESNext 或 ES2020。如果是老式Node.js项目，可能需要 CommonJS。

管理输出和源码结构

outDir 告诉编译器把编译后的.js文件放到哪个文件夹里，比如 "outDir": "./dist"。这样你的源码（.ts）和输出（.js）就不会混在一起。

rootDir 指定你的TypeScript源文件的根目录，通常是 "./src"。编译器会根据这个目录结构来保持输出文件的目录结构。

严格模式：决定检查的严厉程度

这是最重要的部分，关乎代码质量。strict 是一个总开关，启用后就会开启一系列严格的类型检查。

{
  "compilerOptions": {
    "strict": true
  }
}

我强烈建议你从一开始就打开 strict: true。它会帮你避免很多潜在的错误，比如变量未初始化、空值引用。虽然一开始可能有点烦，但长远看能省下大量调试时间。

与前端框架和库的集成

如果你用React，需要启用 jsx 选项。"jsx": "react-jsx"（对于React 17+的现代JSX转换）或 "jsx": "react"。

为了让编译器识别第三方库的类型，你通常需要设置 moduleResolution 为 "node"，这样它会去 node_modules 里找类型定义。esModuleInterop 选项通常也设为 true，能更好地处理CommonJS模块的默认导入。

一个实用的基础配置

一个现代前端项目的tsconfig.json基础配置可能长这样：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

用 include 指定要编译哪些文件，exclude 排除不需要的目录。

配置TypeScript不是一蹴而就的。你可以从一个严格的基线开始，如果遇到某些第三方库的类型问题，再通过 skipLibCheck 或更精细的规则来调整。核心是让类型系统为你服务，而不是成为绊脚石。