TypeScript tsconfig 常用配置有哪些

打开电脑写代码时，你有没有过这样的经历：明明代码里写了正确的变量，编译器却总跳红提示“找不到类型”；或者明明只想用ES6的特性，结果编译出来的代码兼容了低版本浏览器，反而拖慢了运行速度？这时候，一份合适的tsconfig.json文件就能帮你解决这些麻烦。它就像TypeScript的“总调度表”，告诉编译器该怎么处理你的代码。

决定编译后代码的“能力范围”：target

想象你要把PPT做成不同版本，给不同的客户看。target就是告诉TypeScript，你要把代码编译成哪个版本的JavaScript，适配哪些环境。比如你写了箭头函数，要是设成es5，编译后就会变成普通函数；设成es2020，就保留箭头函数的写法，适合现代浏览器。平时做小程序或者移动端开发，一般设成es6就够了，兼顾兼容性和性能。

控制文件的“取舍规则”：include与exclude

一个项目里往往有几十上百个文件，总不能一个个告诉编译器“编译这个，不编译那个”。include就是列出自定义要编译的文件，比如src//*.ts，意思是src文件夹下所有子文件夹里的.ts文件都要编译；exclude刚好相反，用来排除不想编译的文件，比如测试文件test//*.test.ts或者第三方依赖node_modules，编译器就会自动忽略这些，不用你手动一个个删除。

开启类型检查的“开关”：strict

很多人刚用TypeScript时，会觉得“类型检查太严了，总报错”，但其实strict是个“磨刀不误砍柴工”的配置。把它设成true后，编译器会帮你揪出很多隐藏的问题，比如没赋值的变量、类型不匹配的函数参数。举个例子，你写了let age: number;却没赋值，要是strict没开，编译器不会提示，但开了之后就会报错，避免你后面用的时候出现undefined的bug。如果实在觉得太严，也可以单独调整里面的子项，比如只开noImplicitAny，防止隐式的any类型。

管理输出文件的“存放地”：outDir与rootDir

写代码时你可能会发现，编译后的.js文件和原.ts文件混在一个文件夹里，看着乱糟糟的。rootDir用来告诉编译器你的源代码放在哪个文件夹，一般设成src；outDir则是编译后文件的存放位置，设成dist的话，所有编译后的文件都会自动放到dist文件夹里，和源代码完全分开，找起来也方便。比如你写src/utils/helper.ts，编译后就会变成dist/utils/helper.js，结构一目了然。

允许更灵活的“类型导入”：moduleResolution

平时导入模块时，有时候写import { foo } from './utils'，有时候写import { bar } from 'lodash'，为什么有时候不用写全路径？这就是moduleResolution在起作用，设成node的话，就会按Node.js的规则找模块，不用你写完整的相对路径。如果是在浏览器里用，设成bundler会更合适，适合Webpack这类打包工具。

其实这些配置不用一次全记住，刚开始做项目时，先把target设成es6，strict设成true，加上include: ["src/**/*"]和outDir: "./dist"，就能解决80%的日常问题。等项目复杂了，再慢慢调整其他配置，让TypeScript更贴合你的开发习惯。