TS编译设置和配置文件属性解读

1. 编译选项

1.1 自动编译文件

• 编译文件时，使用-w指令后，TS编译器会自动监视文件的变化，并在文件发生变化时重新编译。

• 示例

  tsc xxx.ts -w
  

1.2 自动编译整个项目

• 如果直接使用tsc指令，就可以自动将当前项目下的所有ts文件编译为js文件

• 但直接使用tsc指令的前提是，要在项目根目录下创建一个ts的配置文件 tsconfig.json

  tsc --init
  

如果直接执行 tsc命令，只是一次性生成 所有的js文件

如果直接执行 tsc -w 命令，它会生成所有的js文件，并且还会去监视，只有对应的文件发生变化，就会自动去重新编译生成

1.3 tsconfig.json文件

它是ts编译器的配置文件，可以根据它的信息，对代码进行编译。

1.3.1 外层属性

• include:用于指定哪些ts文件需要进行编译

  • **：任意目录
  • *：任意文件

  include:[
      "./src/**/*"
  ]
  

  • 以上表示根目录下的src目录下的任意目录的任意文件，需要进行编译

• exclude：用于指定哪些ts文件不需要进行编译

  • 默认值:["node_modules","bower_components",‘jspm_packages“]

    "exclude": ["./src/hello/*"],
  

• extends

  • 定义被继承的配置文件

  • "extends":"./configs/base"
    

  • 上述示例中，当前配置文件中会自动包含config目录下base.json中的所有配置信息。

• files：设置文件，设置哪些文件需要被编译

  • files:[
        "xxx.ts"
    ]
    

• compilerOptions：是ts编译器的选项

1.3.2 compilerOptions属性

• target：用来指定ts被编译成ES的版本

  • 默认是es3

  • 可选值

    'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 
    

• module：指定哪种版本的模块化

  'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
  

  给一个错误的值，就可以看到可以支持哪些版本的模块化

• lib :用来指定项目中使用的库

  •   "lib": ["DOM"], 
    

  • 比如上面的DOM，如果没有指定，则不会使用Dom的相关方法【也就是document的相关方法和属性】，也不会有任何的提示。

  • 给定一个错误的值，可以看到可以使用哪些库

• outDir：用于指定编译后js文件的所在目录

  "outDir": "js",  
  

  • 输出到根目录下的js目录下【没有这个目录，会自动创建】

• outFile：将所有的全局作用域中的代码合并懂同一个文件中

  Only 'amd' and 'system' modules are supported alongside --outFile. 
  

• allowJs：是否对js文件进行编译，默认为false

• checkJs：是否检查js代码是否符合语法规范

• removeComments：是否移除注释

• noEmit：是否不生成编译后的文件

• noEmitOnError：当有错误时不生成编译后的文件

• alwaysStrict：用来设置编译后的文件是否使用严格模式，默认为false

  • 当有模块化代码的时候，默认就有严格模式了。

• noImplicitAny：不允许隐式any

• noImplicitThis：不允许不明确类型的this，【默认为true】

• strictNullChecks：严格检查空值

• strict：所有严格模式的总开关