TypeScript简介及配置编译选项指南

TypeScript 简介

1. TypeScript是JavaScript的超集。
2. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
3. TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
4. TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。
5. 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

TypeScript 开发环境搭建

6. 首先下载Node.js

7. 64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi

8. 32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi

9. 安装Node.js（跟着安装教程下一步即可）

10. cmd面板使用npm全局安装typescript
    输入 命令：npm i -g typescript

使用TypeScript

由于TS代码需要通过编译器编译为JS代码后才能由解析器执行，所以我们需要对ts代码进行编译。具体编译方法如下：

1. 在cmd面板使用对ts文件进行编译，命令：tsc 文件名
   生成tsconfig.json文件，命令：tsc init
2. 在开发工具Webpack中编译ts文件时可以在终端中使用命令：tsc 文件名
   也可以开启监视模式自动编译，自动监听编译指定文件的命令：tsc 文件名 -w
   也可以通过配置tsconfig,json文件对所有ts文件进行统一编译与监视*，有tsconfig,json配置文件后可以通过tsc命令编译全部ts文件，通过tsc -w命令监视所有文件
3. 在开发工具Vscode中编译ts文件也可以在终端中使用命令：tsc 文件名编译指定ts文件；
   也可以通过配置tsconfig,json文件对所有文件进行统一编译与监视*，有tsconfig,json配置文件后，选择Vscode上面的工具栏 终端->运行任务->
   选择要监视的文件或文件夹后即可自动编译ts文件到指定目录
   

创建tsconfig.json配置文件及相关配置信息：

使用开发者工具可以直接创建tsconfig.json配置文件；也可以通过在终端使用tsc init 命令生成tsconfig.json配置文件；还可以手动创建tsconfig.json配置文件，然后相关配置信息及作用如下所示：

{
/*
  tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
    "include" 用来指定哪些ts文件需要被编译
      路径：** 表示任意目录
            * 表示任意文件
    "exclude" 不需要被编译的文件目录
        默认值：["node_modules", "bower_components", "jspm_packages"]

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

  /*
    compilerOptions 编译器的选项
  */
  "compilerOptions": {

    // target 用来指定ts被编译为的ES的版本
    // 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'
    "target": "es2015",
    // module 指定要使用的模块化的规范
    // 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
    "module": "es2015",
    // lib用来指定项目中要使用的库
    //'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es
    //2018', 'es2019', 'es2020', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scri
    //pthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.r
    //eflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.st
    //ring', '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.s
    //haredmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable
    //', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref'
//    "lib": ["es6", "dom"]


    // outDir 用来指定编译后文件所在的目录
    "outDir": "./dist",

    // 将代码合并为一个文件
    // 设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
    //"outFile": "./dist/app.js"

    // 是否对js文件进行编译，默认是false
//    "allowJs": true,
    // 是否检查js代码是否符合语法规范，默认是false
//    "checkJs": true,
    // 是否移除注释
    "removeComments": true,
    // 不生成编译后的文件
    "noEmit": false,


    // 当有错误时不生成编译后的文件
    "noEmitOnError": true,

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

    // 用来设置编译后的文件是否使用严格模式，默认false
    "alwaysStrict": true,

    // 不允许隐式的any类型
    "noImplicitAny": true,

    // 不允许不明确类型的this
    "noImplicitThis": true,

    // 严格的检查空值
    "strictNullChecks": true


  }
}

以上便是相关配置信息及注释。