• 编译选项是让我们编译ts变得更优雅、自动，对ts进行一些配置
    • 希望ts编译器可以自动监测ts文件的变化，就不用每次修改代码都要重新输一次：tsc tsc文件名.ts命令

    tsc 文件名.ts -w （加上-w ts编译器就会自动监视文件变化，并且将变化应用到最新的编译出来的js文件中
    但是这个监视只对一个文件监视，如果要监视第二个ts文件，就得再次输入命令开启新的监视窗口

    • 直接执行命令：tsc 编译器就会自动把文件夹下的所有ts文件一次性编译完成，但是前提是该文件夹目录下有ts的配置文件tsconfig.json（用来配置ts的一些编译信息，编译器会根据这些信息对ts文件进行编译）

    image.pngimage.png//默认生成的tsconfig.json文件

    • 在有配置文件后，执行：tsc -w 命令，就可以同时监视所有目录下的tsc文件

    tsfconfig.json文件

    • 是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译，可以写注释
    • 配置选项（编译相关）

    1.include
    定义希望被编译文件所在的目录, 指定哪些ts文件需要被编译
    默认值：[“/*”]
    路径：     表示任意目录， 表示任意文件
    image.png
    image.png// 一个    表示任意文件，两个**表示任意目录，根目录下的src目录下的任意目录下的任意文件

    2.exclude
    指定哪些ts文件不需要被编译，有默认值：如下左图，不写exclude的情况下执行默认值
    image.pngimage.png//表示hello下的文件不需要编译

    3.extends
    定义被继承的配置文件
    当配置文件过于复杂的时候，不想重复写，想继承其他json文件里面的东西
    image.png

    4.files
    跟include有点像，include是直接设置文件夹/目录，而files是直接把一个一个要编译的ts文件列出来
    image.png

    5.compilerOptions
    作用：决定编译器如何对ts文件进行编译，包含了许多子选项（target、lib、module、outDir……）
    1）target：目标，用来指定ts被编译为es版本（默认是es3版本，兼容性比较好，所有浏览器都支持
    可以是es3/es5/es6/es2020/ESNext等等
    image.png
    image.png//如果在es3版本，let一个变量，会被编译成var一个变量，而es6则还是let
    2）module：模块（原本js是没有模块这个概念，后来对js进行扩展添加增强模块化的功能）
    指定要使用哪种模块化的解决方案（规范）
    如下图是可选值：
    image.png
    实例：
    image.pngimage.pngimage.png
    //如果ts里面没有使用hi，就不会被编译到js 中，在js文件中就是export {};
    image.pngimage.pngimage.png
    3）lib：库，用来指定项目中要使用的库，一般情况下不动这个属性，用到哪些库就会根据这些库来检查代码
    比如项目中会经常用到第三方的js库：DOM（默认会有）
    image.png//表示什么库都没有用 image.png//默认会有dom库，所以不需要写
    当项目代码不是在浏览器中运行的时候，是在nodejs里面运行，nodejs是没有DOM，这种情况就可以去修改
    如下图是可选值：
    image.png
    4）outDir：指定编译后的js文件所在的目录
    image.png
    5）outFile：输出的文件，将代码合并为一个文件
    将编译后的js文件合并到app.js文件中。
    image.pngimage.pngimage.pngimage.png
    image.png//将两个ts文件编译成一个app.js文件
    设置outFile后，所有的全局作用域中的代码会合并到同一个js文件中；但如果ts文件中用到了模块化，就合并不了
    如果想把多个模块合并成一个文件，模块化modules的值必须得是amd或者system，此时编译就不会报下面的错
    image.png

    6.allowJs：是否对js文件进行编译，默认是false
    7.checkJs：是否检查js代码是否符合语法规范，默认是false
    image.png//checkJs为true时，就会检查报错
    8.removeComments：是否移除注释，默认false。如果true编译之后的注释会被删掉，注释就不会被编译
    9.noEmit：不生成编译后的文件，默认值false。设置true后执行tsc命令，执行编译的过程，但最后不会生成js文件
    用处：只想用tsc检查一下语法，不想生成编译文件
    10.noEmitOnError：当有错误（语法错误……）的时候，设置为ture，不生产编译后的文件。默认flase

    • 配置选项（语法相关）

    1.alwaysStrict：用来设置编译后的文件是否使用严格模式。默认false，不使用
    （严格模式比普通模式在浏览器中执行性能要好一些）
    （但如果ts里面有export这些导入引出模块的语句，编译之后js会自动进入严格模式）
    image.png//在js文件中，这样开启严格模式。如果alwaysStrict为true，那边编译后的js文件头部就会有“use strict”这样来开启严格模式

    2.noImplicitAny：默认值是false，因此当变量/参数不指定类型的时候，默认是any（这就是隐式any，设置为any的话，就会关闭ts所有类型检查）
    设置为true的话， 就不允许ts出现隐式的any情况，如果出现就会报错，提醒你要为变量/参数设置类型

    3.noImplicitThis：不允许不明确类型的this
    函数的this实际上是和函数的调用方式有关
    （普通模式下，以函数形式调用：this是window，以方法形式调用：this是调用方法对象）

    image.png//此时打印的this实际是不明确的，它的调用方式是不确定，所以用的时候会有风险，因为不确定
    这时候就希望ts解析器把这个错误/隐患 检查出来，所以要将noImplicitThis设置为true，就会检查这种隐式this
    当设置为true，提示上面的this 出错之后，怎么解决？可以在参数手动指定this为any/window，这样this就可以用了

    4.strictNullChecks：严格的检查空值
    在js中经常会写一些dom代码image.png这里会出现一个问题：getElementById会去网页获取元素，但是这时我获取的东西一定存在吗？不确定，那么box1有可能为null，这样box1.addEventListener就有可能会报错，这时候因为strictNullChecks默认值为false，ts编译器不会检查出这个问题
    image.png//设置为true后报错
    image.png//报错的解决方案1image.png//方案2
    5.strict：所有严格检查的总开关，默认false，如果为true，那么所有的严格检查（如上）都为true，一般写在配置文件最上面