TypeScript 如何配置 tsconfig.json

打开刚写完的代码文件夹，你可能会发现一堆后缀为.ts的文件——这些是用TypeScript写的代码，比JavaScript多了类型检查，写bug的概率都低了不少。但光有.ts文件还不够，得有个“指挥官”告诉编译器怎么处理这些文件，这就是tsconfig.json的作用。它就像你给外卖员的备注：“不要辣、多放葱、送到小区北门”，少一个要求，结果都可能不如预期。

先搞懂：tsconfig.json到底是啥？

简单说，它是TypeScript项目的“配置说明书”，告诉编译器三件事：要处理哪些.ts文件、怎么把它们转成浏览器能看懂的JavaScript、要不要开启那些有用的特性。如果你是一个人写小脚本，随便敲个ts文件直接用ts-node跑就行；但如果是做项目，不管是React还是Vue，都得有这个文件，不然编译器会摸不着头脑——就像你去餐厅吃饭，没说要什么菜，厨师只能随便炒。

最核心的两个配置项：必须先搞对

很多人第一次写tsconfig.json，容易被几十上百个配置项吓住，其实不用全记，先搞定最关键的两个，项目就能跑起来了。

第一个是compilerOptions，这是“编译器的工作规则”。比如target就是把.ts转成哪种JS版本，想让旧浏览器也能跑，就设成"es5"；想用上最新特性，设成"es2022"就行。还有outDir，就是编译后的JS文件放哪，别默认丢在根目录，设成"./dist"就整洁多了，就像把家里的脏衣服统一丢进洗衣机，不会乱扔一地。

第二个是include，告诉编译器哪些文件要处理。如果你的.ts文件都在src文件夹里，写"include": ["src//*"]就对了——这里的/*是通配符，意思是“src下所有文件夹里的所有文件”。要是不小心把测试文件或者配置文件也加进去了，就用exclude排除，比如"exclude": ["node_modules", "**/*.spec.ts"]，就像收拾房间时把不该算进“要整理的物品”的东西移出去。

别踩的两个新手坑

刚配置的人，很容易犯两个小错误。第一个是漏写"rootDir"，如果你的.ts文件都在src里，没设这个选项的话，编译后的JS会跟着生成一堆src文件夹，就像你把衣服放在卧室，结果洗衣机里也多出个“卧室”文件夹，特别乱，只要加"rootDir": "./src"就能解决。

第二个是strict配置别乱关。很多人为了省事，把"strict": false关掉，觉得类型检查太麻烦，但其实这是TypeScript最有用的特性——就像你点外卖备注“少糖”，要是没写，商家可能给你做全糖，最后喝着腻得慌。哪怕先只开"strictNullChecks": true，也能避免很多“空指针错误”，比如你用一个变量前忘了判断它是不是null，编译器会直接报错，比JS里运行时报错好改太多。

最后：怎么快速写出能用的配置？

不用从零敲，TypeScript官方给了现成的模板。你只要在项目里敲tsc --init，它就会自动生成一个带注释的tsconfig.json，里面每个配置项都有说明，看不懂的看注释就行。要是你用Vue或者React脚手架，脚手架会自动帮你生成合适的配置，不用自己改。

说白了，tsconfig.json就是给TypeScript“定规矩”，规矩定清楚了，代码写起来才省心，编译出来的结果也不会出乱子。哪怕只是把include、compilerOptions这几个核心项设对，已经能解决80%的项目问题了。