typescript-tsconfig.json-一一网

1. include

定义希望被编译文件所在的目录

默认值：[“**/*”]

  // 所有src目录和tests目录下的文件都会被编译
  // ** 表示任意文件夹，*表示任意文件
  "include":["src/**/*", "tests/**/*"]
复制代码

2. exclude

定义需要排除在外的目录

默认值：[“node_modules”, “bower_components”, “jspm_packages”]

    // src下hello目录下的文件都不会被编译
    "exclude": ["./src/hello/**/*"]
复制代码

3. extends

定义被继承的配置文件

// 当前配置文件中会自动包含config目录下base.json中的所有配置信息
"extends": "./configs/base"
复制代码

4. files

指定被编译文件的列表，只有需要编译的文件少时才会用到(一般用includes)

// 列表中的文件都会被TS编译器所编译

```json
    "files": [
        "core.ts",
        "sys.ts",
        "types.ts",
        "scanner.ts",
        "parser.ts",
        "utilities.ts",
        "binder.ts",
        "checker.ts",
        "tsc.ts"
    ]
```
复制代码

compilerOptions

1. target

设置ts代码编译的目标版本
可选值：
- ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

示例：

  // 我们所编写的ts代码将会被编译为ES6版本的js代码
  "compilerOptions": {
      "target": "ES6"
  }
复制代码

2. module

设置编译后代码使用的模块化系统
可选值：
- CommonJS、UMD、AMD、System、ES2020、ESNext、None、ES2015、ES6

示例：

"compilerOptions": {
    "module": "CommonJS"
}
复制代码

3. lib

指定代码运行时所包含的库（宿主环境，譬如获取dom的库，document等方法，不设置都没有）,如果是在浏览器环境下是不需要改的，如果是在nodejs环境才需要。
可选值：lib用来指定项目中要使用的库

‘es5’, ‘es6’, ‘es2015’, ‘es7’, ‘es2016’, ‘es2017’, ‘es2018’, ‘es2019’, ‘es2020’, ‘esnext’, ‘dom’, ‘dom.iterable’, ‘webworker’, ‘webworker.importscripts’, ‘webworker.iterable’, ‘scripthost’, ‘es2015.core’, ‘es2015.collection’, ‘es2015.generator’, ‘es2015.iterable’, ‘es2015.promise’, ‘es2015.proxy’, ‘es2015.reflect’, ‘es2015.symbol’, ‘es2015.symbol.wellknown’, ‘es2016.array.include’, ‘es2017.object’, ‘es2017.sharedmemory’, ‘es2017.string’, ‘es2017.intl’, ‘es2017.typedarrays’, ‘es2018.asyncgenerator’, ‘es2018.asynciterable’, ‘es2018.intl’, ‘es2018.promise’, ‘es2018.regexp’, ‘es2019.array’, ‘es2019.object’, ‘es2019.string’, ‘es2019.symbol’, ‘es2020.bigint’, ‘es2020.promise’, ‘es2020.sharedmemory’, ‘es2020.string’, ‘es2020.symbol.wellknown’, ‘es2020.intl’, ‘esnext.array’, ‘esnext.symbol’, ‘esnext.asynciterable’, ‘esnext.intl’, ‘esnext.bigint’, ‘esnext.string’, ‘esnext.promise’, ‘esnext.weakref’

示例：

  "compilerOptions": {
      "target": "ES6",
      "lib": ["ES6", "DOM"],
      "outDir": "dist",
      "outFile": "dist/aa.js"
  }
复制代码

4. outDir

编译后文件的所在目录
默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置

示例：

  // 设置后编译后的js文件将会生成到dist目录
  "compilerOptions": {
      "outDir": "dist"
  }
复制代码

5. outFile(一般不用，都是交给打包工具webpack等处理)

将所有的文件编译为一个js文件
默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果js中使用了import引入包或者文件，就需要设置module的值为None、System或AMD，它会将模块一起合并到文件之中。否则报错

示例：

 "compilerOptions": {
     "outFile": "dist/app.js"
 }
复制代码

6. allowJs

是否对js文件进行编译，默认是false

7. checkJs

是否检查js代码是否符合语法规范，默认是false

示例：

  "compilerOptions": {
      "allowJs": true,
      "checkJs": true
  }
复制代码

8. removeComments

是否删除注释
默认值：false(不删除)

9. noEmit 不生成编译后的文件

一般用来检查语法通不通过。不生成文件，用的比较少

默认值：false

noEmitOnError

有错误的情况下不进行编译
默认值：false

8. 严格检查

strict
- 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
alwaysStrict
- 总是以严格模式对代码进行编译，如果使用了import和export，默认就是严格模式
noImplicitAny
- 禁止隐式的any类型，如果定义参数的时候没有设置类型，默认就是会any

noImplicitThis

禁止类型不明确的this

    function test() {
        alert(this); // 这个this就是不明确的this
    }
复制代码

strictBindCallApply
- 严格检查bind、call和apply的参数列表
strictFunctionTypes
- 严格检查函数的类型

strictNullChecks

严格的空值检查

  var dom = document.getElementById('#test')
  dom.addEventListener('click', function (){
      alert('hello');
  }); // dom的值有可能为空，如果strictNullChecks为true，检查会错误
  
  解决方案
  1. 方案1
  if(box1 !== null){
       box1.addEventListener('click', function (){
           alert('hello');
       });
  }
 2. 方案2
  box1?.addEventListener('click', function (){
      alert('hello');
  });

复制代码