typeScript tsconfig 配置详解

tsconfig.json 的定义

tsconfig.json  文件是  [TypeScript]  项目的配置文件，它包含了编译器的配置选项。
首先我们先了解一下 tsc 的一些命令

tsc –init 初始化一个 tsconfig.json 文件
tsc xxx.ts => 编译某一个 ts 文件，但是每次改写之后需要重新执行
tsc xxx.ts -w => 编译某一个 ts 文件, 但是会对某一个文件进行监听，自动编译

需要说明的一点是 当使用 tsc 命令的时候,后面没有任何参数才会使用 tsconfig 配置进行编译

tsconfig.json 的默认顶级配置
  1. files(指定一个包含相对或绝对文件路径的列表)
  2. include(通过匹配需要转换的文件)
  3. exclude(忽略 include 和 files 中需要转换的文件）
  4. compilerOptions(一个复杂的配置，详细)
tsconfig.json 的常见配置

下面的配置当编译 tsc 命令的时候会对 src 下面的所有 ts 文件进行转义，但是会忽略 comjs 文件夹下的文件

  1. **/表示匹配所有子目录
  2. *代表当前文件夹下面的文件
1
2
3
4
5
6
7
8
9
10
{
    // 定义哪些文件夹下面的文件被被编译
    "include": [
      "./src/**/*"
    ],
    // 定义哪些是不被处理的
    "exclude":[
      "./src/comjs/**/*"
    ]
}
复杂配置 compilerOptions

当没有配置 compilerOptions 时，tsc 会默认使用其默认的配置
下面一些常见配置，其他有需要用到的时候再去查看文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
"compilerOptions": {
      // 只编译修改过的文件,这个时候会生成tsconfig.tsbuildinfo,下次编译的时候会进行对比只编译修改过的文件
      "incremental": true,
      // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
      "target": "es5",
      // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
      "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":[]",
  }