tsconfig 配置

tsc

tsc
- tsc 命名默认会编译整个项目所有的 ts 文件，但是也可以自己指定文件名，例如 tsc test.ts，但是编译的文件默认和源文件在同一文件夹下，这是因为 tsc 会结合 tsconfig 文件进行编译
tsc -w
- watch 模式监控当前项目 ts 文件变化立即进行编译

tsconfig 配置详解

{
   // 指定需要编译文件 否则默认当前目录下除了exclude之外的所有.ts, .d.ts,.tsx 文件
   "include": ["./test.ts"],
   // 指定需要编译文件 否则默认当前目录下除了exclude之外的所有.ts, .d.ts,.tsx 文件
   "files": ["./src/**/*"],
   // 不编译某些文件
   "exclude": ["test.ts"],
   "compilerOptions": {
       // 只编译修改过的文件,这个时候会生成tsconfig.tsbuildinfo,下次编译的时候会进行对比只编译修改过的文件
       "incremental": true,
       // 指定 ECMAScript 目标版本: 'es3', 'es5'(default), 'es6/es2015', 'es2016', 'es2017',..., 'es2023' or 'esnext'
       "target": "es5",
       // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es6/es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext', 'preserve'
       "module": "commonjs",
       /* 注意：如果未指定--lib，则会注入默认的librares列表。注入的默认库为：
       对于 --target ES5: DOM,ES5,ScriptHost
       对于 --target ES6: DOM,ES6,DOM.Iterable,ScriptHost
       TS 绝不会在您的代码中注入polyfill,所以需要你自己制定编译lib */
       "lib": ["es5", "dom", "ScriptHost", "es2015.promise"],
       // 允许编译JS
       "allowJs": true,
       /* 是否检测JS的语法,例如下面的语法编辑器会报错
       let name = 'paul';
       console.log(name.a.b) */
       "checkJs": true,
       // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
       "jsx": "preserve",
       /* 如果设为true，编译每个ts文件之后会生成一个js文件和一个声明文件,
       declaration和allowJs不能同时设为true */
       "declaration": true,
       // 值为true或false，指定是否为声明文件.d.ts生成map文件
       "declarationMap": true,
       // 用来指定编译时是否生成.map文件
       "sourceMap": true,
       // 当module设置为 'amd' and 'system'的时候可以使用此命令,这样可以将ts文件打包到一个目录下
       "outFile":"./",
       //  outDir 编译后的文件存到到哪个目录下,默认是每一个ts文件的当前目录,,下面的配置就是把ts编译到build目录下
       "outDir": './build',
       // 下面单独介绍
       "rootDir": "./src",
       // 是否编译构建引用项目,很复杂后面介绍
       "composite": true,
       // 指定文件用来存储增量编译信息,默认是tsconfig.tsbuildinfo
       "tsBuildInfoFile": "./",
       // 编译的时候删除注释
       "removeComments": true,
       // 不生成编译文件，这个一般比较少用,这个build目录下将没有任何文件,但是会进行编译,有错误会抛出
       "noEmit": true,
       // 是否引入npm包tslib中的辅助函数,__extends等
       "importHelpers": true,
       // 当target为'ES5' or 'ES3'时，为'for-of', spread, and destructuring'中的迭代器提供完全支持
       "downlevelIteration": true,
       // isolatedModules的值为true或false，指定是否将每个文件作为单独的模块，默认为true，它不可以和declaration同时设定
       // 不是很理解,将每一个文件作为单独模块
       "isolatedModules": true,
       /* Strict Type-Checking Options */
       // 严格模式将会打开下面的几个选项
       "strict": false,
       /* 不允许变量或函数参数具有隐式any类型,例如
       function(name) {
           return name;
       } */
       "noImplicitAny": true,
       // null类型检测,const teacher: string = null;会报错
       "strictNullChecks": true,
       // 对函数参数进行严格逆变比较
       "strictFunctionTypes": true,
       // 严格检查bind call apply
       "strictBindCallApply": true,
       // 此规则将验证构造函数内部初始化前后已定义的属性。
       "strictPropertyInitialization": true,
       // 检测this是否隐式指定
       "noImplicitThis": true,
       // 使用js的严格模式,在每一个文件上部声明 use strict
       "alwaysStrict": true,
       /* Additional Checks */
       // 默认false,是否检测定义了但是没使用的变量
       "noUnusedLocals": true,
       // 用于检查是否有在函数体中没有使用的参数
       "noUnusedParameters": true,
       // 用于检查函数是否有返回值，设为true后，如果函数没有返回值则会提示
       "noImplicitReturns": true,
       // 用于检查switch中是否有case没有使用break跳出switch
       "noFallthroughCasesInSwitch": true,
       /* Module Resolution Options */
       // 用于选择模块解析策略，有'node'和'classic'两种类型
       "moduleResolution": "node",
       // 复杂的很 下面单独介绍这三个模块
       "baseUrl": './',
       "paths": {},
       "rootDirs": [],
       /* typeRoots用来指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载 */
       typeRoots: [],
       // types用来指定需要包含的模块，只有在这里列出的模块的声明文件才会被加载进来
       types:[],
       // 用来指定允许从没有默认导出的模块中默认导入
       "allowSyntheticDefaultImports": true,
       // 通过为导入内容创建命名空间，实现CommonJS和ES模块之间的互操作性
       "esModuleInterop": true ,
       // 不把符号链接解析为真实路径，具体可以了解下webpack和node.js的symlink相关知识
       "preserveSymlinks": true,
       "allowUmdGlobalAccess": true,

       // sourceRoot用于指定调试器应该找到TypeScript文件而不是源文件的位置，这个值会被写进.map文件里
       "sourceRoot": '',
       // mapRoot用于指定调试器找到映射文件而非生成文件的位置，指定map文件的根路径，该选项会影响.map文件中的sources属性
       "mapRoot": '',
       // inlineSourceMap指定是否将map文件内容和js文件编译在一个同一个js文件中，如果设为true,则map的内容会以//#soureMappingURL=开头，然后接base64字符串的形式插入在js文件底部
       "inlineSourceMap": true,
       // inlineSources用于指定是否进一步将ts文件的内容也包含到输出文件中
       "inlineSources": true,

       // experimentalDecorators用于指定是否启用实验性的装饰器特性
       "experimentalDecorators": true,

       // emitDecoratorMetadata用于指定是否为装上去提供元数据支持，关于元数据，也是ES6的新标准，可以通过Reflect提供的静态方法获取元数据，如果需要使用Reflect的一些方法，需要引用ES2015.Reflect这个库
       "emitDecoratorMetadata": true,
       // compileOnSave的值是true或false，如果设为true，在我们编辑了项目中的文件保存的时候，编辑器会根据tsconfig.json中的配置重新生成文件，不过这个要编辑器支持
       "compileOnSave": true,
       // 很复杂 下面介绍
       "references": [],
   }
}

target / module/ lib 之间的区别

在 TypeScript 的 tsconfig.json 中，target、module 和 lib 是三个与编译输出相关的重要配置项。它们分别控制了生成的 JavaScript 代码的目标版本、模块化格式以及库的支持。下面详细解释它们之间的区别：

`target`

target 配置指定了 TypeScript 编译器应该生成哪个版本的 JavaScript 代码。它定义了 TypeScript 编译输出的 ECMAScript 版本。

常见的 target 值有：

ES3：生成兼容旧版浏览器的代码，适用于非常老的 JavaScript 引擎。
ES5：生成符合 ECMAScript 5 规范的代码，是最广泛支持的目标，适用于大多数浏览器。
ES6/ES2015：生成符合 ECMAScript 2015（ES6）规范的代码，支持更现代的 JavaScript 特性，如类、箭头函数、模板字符串等。
ES2016、ES2017 等：生成符合更高版本 ECMAScript 规范的代码，支持更多的新特性。
ESNext：生成与最新 ECMAScript 版本一致的代码，通常用于支持最新语言特性的环境。

示例：

{
  "compilerOptions": {
    "target": "ES6"
  }
}

这意味着 TypeScript 将编译到 ECMAScript 2015 (ES6) 规范的代码。

`module`

module 配置指定了 TypeScript 编译器在生成 JavaScript 代码时使用的模块化系统。它影响代码如何被拆分成模块，并且与 import 和 export 的方式直接相关。

常见的 module 值有：

CommonJS：生成 Node.js 使用的模块系统（require 和 module.exports）。通常用于 Node.js 环境。
ES6/ES2015：生成 ECMAScript 2015 模块，使用 import 和 export，这对于现代浏览器和支持 ES 模块的运行时（如 Node.js）非常有用。
AMD：生成异步模块定义（Asynchronous Module Definition）代码，常用于浏览器环境。
UMD：生成通用模块定义（Universal Module Definition）代码，既支持 AMD，也支持 CommonJS，适合浏览器和 Node.js。
System：生成用于 SystemJS 的模块代码。
ESNext：生成最新 ECMAScript 模块，通常与 target 设置为 ESNext 配合使用。

示例：

{
  "compilerOptions": {
    "module": "ES6"
  }
}

这意味着 TypeScript 会生成符合 ECMAScript 2015 模块系统的代码（即使用 import 和 export）。

`lib`

lib 配置指定了编译过程中要包含哪些 JavaScript 和 TypeScript 的标准库文件。这些库定义了常见的 JavaScript 环境的全局对象和 API，例如 Array、Promise、fetch 等。

lib 可以指定一个数组，列出要包含的库文件。例如：

"ES5"：包含 ECMAScript 5 的库定义。
"ES6"：包含 ECMAScript 2015（ES6）的库定义。
"DOM"：包含浏览器环境中的 DOM 和 BOM 库定义。
"WebWorker"：包含 Web Worker 环境的库定义。
"Node"：包含 Node.js 环境的库定义。
"ESNext"：包含最新版本的 ECMAScript 标准库。

如果没有指定 lib，TypeScript 会使用默认值，这通常是 "ES5" 和 "DOM"，但你可以通过 lib 来手动调整所使用的库文件。

示例：

{
  "compilerOptions": {
    "lib": ["ES6", "DOM"]
  }
}

这意味着 TypeScript 会使用 ECMAScript 2015 和 DOM 环境的库文件。这对开发 Web 应用或与浏览器交互的代码特别有用。

总结：

target：指定编译后的 JavaScript 代码的 ECMAScript 版本。
module：指定生成的 JavaScript 使用的模块系统（例如 CommonJS、ES6 模块等）。
lib：指定编译时可用的库文件，定义了全局对象和 API。

常见组合：

如果你要编写用于现代浏览器的应用，可以这样配置：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "lib": ["ES6", "DOM"]
  }
}

如果你在 Node.js 环境中编写代码，则可能会使用：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "lib": ["ES6", "Node"]
  }
}

参考

https://www.typescriptlang.org/tsconfig