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

梦里梦外; 2023-01-17 09:30 180阅读 0赞

## 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 开发环境搭建 ##

1.  首先下载Node.js
2.  64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
3.  32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi
4.  安装Node.js（跟着安装教程下一步即可）
5.  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文件到指定目录  
    ![在这里插入图片描述][20210429085306500.png_pic_center]

## 创建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
    
    
      }
    }

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

[20210429085306500.png_pic_center]: /images/20221021/7dc9f64524f14a74ab6495daabbd5017.png