TypeScript简明教程03--详解tsconfig.json编译配置文件

   前言：我们都知道浏览器目前无法直接识别ts文件，因此需要使用tsc将其编译成js文件才能在浏览器环境中运行。现在存在的最大问题就是每次更新ts文件之后，都需要使用tsc进行编译，我们可以使用tsc -w指令检测单个文件的实时更新编译，但是面对项目中众多的ts文件，部分需要编译成js文件，而部分不需要编译成js文件，如何实现此功能便是tsconfig.json配置文件存在的意义。本文将对tsconfig.json文件各项配置信息进行详细介绍：

一、创建tsconfig.json编译配置文件

此文件使用json格式的语法进行编写，如果不熟悉json语法结构的可先了解一下对于理解本文帮助更大。include和exclude两个配置选项是最常用的，直接决定了我们编译文件的范围。

 //ts编译器根据此文件中的配置信息对项目中的ts文件进行编译
    
    //include 用于指定哪些ts文件需要被编译
    //exclude 不需要被编译的文件目录，存在对应的默认值。

    "include": [
        "./src/**/*"    //**表示任意目录，*表示任意文件
    ],
    "exclude": [

    ],

二、两个延伸配置项extends和files

  此两个配置项分别适用于大型复杂项目和简单项目中使用，我们一般不会使用file去限定仅编译指定的ts文件。

  "extends": "",    //定义继承的配置文件，当存在多个配置文件的引入其他配置文件信息，

   "files": ["04hello.ts"],   //指定需要编译的文件，项目文件少的时候使用，不太常见。

三、编译选项compilerOptions(最为复杂，也极为重要)

       此部分可以对ts编译成js的版本，模块化的解决方案，编译后的输入输出文件目录，编译后是否保存ts中的注释等选项进行配置确认，仅列举了部分常见的配置项及其含义。

 "compilerOptions": {
    //ts被编译成js的版本，一般指定为ES6,默认为ES3。可选的有es2015\es2016\es2018等。
          "target": "ES3", 
    //module解决方案选择，指定模块化的规范。可选的有commonjs,amd,system,es6,es2015,es2020.
           "module": "es2015", 
    //lib 用于指定项目中所需要使用的库,一般不使用，如果为空则默认不不使用任何的库。
    // 当需要在nodejs环境下的时候可以进行配置使用，一般不需要进行设置。
     // "lib": [],
    
    //outDir 用于指定编译后的js文件所在的目录，一般单独的创建一个dist文件夹放置
    "outDir": "./dist",

    //outFile  会将全局作用域中的代码合并到同一个文件中。一般不会使用
    //"outFile": "./dist/app.js"

    //allowJs 是否对js文件进行编译，默认是false
    "allowJs": false,

    //checkJs  检查js代码是否符合语法规范，默认为false
    "checkJs": false,
    
     //是否移出注释信息，默认为false,注释信息不会被转移到编译完成的js文件中去，
    "removeComments": false,
}

我们一般使用dist文件夹作为ts编译后的放置目录。

outFile配置项要与module相对应，否则会报错。

四、对编译器进行配置，提高编译后的JS代码的可靠性

    此部分配置项同样属于compilerOption，各配置项的作用见如下说明。需要特别注意的是strict是一切与之相关的“总开关”,特别重要。

{
 //不生成编译后的文件，可以用于文件类型语法检查
    "noEmit": false,
    
    // 当有错误的时候不会生成编译后的文件，
    "noEmitOnError": false,

    //用于设置编译后的文件是否使用严格模式,默认为false。
    "alwaysStrict": false,
    
    //是否允许隐式的any类型声明检查
    "noImplicitAny": false,

    //不允许不明确类型的this，避免存在潜在的问题。
    "noImplicitThis": false,

    //严格的检查空组，
    "strictNullChecks": false,

    //所有严格检查的总开关
    "strict": false,
}

五、总结归纳

      tsconfig.json的配置项直接决定了对于ts文件的编译效果，对于常见的配置项还是很有必要熟记于心的，对于我们使用ts进行开发便捷性以及编译完成后的js代码质量是一个很重要的保证项。

    以上简单的介绍了tsconfig.json的相关配置项的作用，接下来就是学习如何使用打包工具webpack对ts文件进行打包了，下一篇博客将很快出炉。

会当水击三千里，自信人生二百年，因为热爱，所以坚持。