typescript的安装与配置

全局安装typescript

在命令行输入 npm install -g typescript 或者也可以使用cnpm。安装完成后，假设当前目录下有index.ts文件，在命令行输入tsc index.ts,便可在当前目录下得到index.js文件。

typescript的配置

如果相对编译后的文件做一定的细化限制，我们可以使用typescript的配置文件。使用方法很简单，在项目根目录下创建一个json文件，命名为tsconfig.json即可。配置说明如下

{
  "compilerOptions": {
    "allowUnreachableCode": true, // 不报告执行不到的代码错误。
    "allowUnusedLabels": false,    // 不报告未使用的标签错误
    "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句
    "baseUrl": ".", // 工作根目录
    "experimentalDecorators": true, // 启用实验性的ES装饰器
    "jsx": "react", // 在 .tsx文件里支持JSX
    "sourceMap": true, // 是否生成map文件
    "module": "commonjs", // 指定生成哪个模块系统代码
    "noImplicitAny": false, // 是否默认禁用 any
    "removeComments": true, // 是否移除注释
    "types": [ //指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件
      "node", // 引入 node 的类型声明
    ],
    "paths": { // 指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样
      "src": [ //指定后可以在文件之直接 import * from 'src';
        "./src"
      ],
    },
    "target": "ESNext", // 编译的目标是什么版本的
    "outDir": "./dist", // 输出目录
    "declaration": true, // 是否自动创建类型声明文件
    "declarationDir": "./lib", // 类型声明文件的输出目录
    "allowJs": true, // 允许编译javascript文件。
    "lib": [ // 编译过程中需要引入的库文件的列表
      "es5",
      "es2015",
      "es2016",
      "es2017",
      "es2018",
      "dom"
    ]
  },
  // 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
  "include": [
    "src/**/*"
  ],
  // 指定一个排除列表（include的反向操作）
  "exclude": [
    "demo.ts"
  ],
  // 指定哪些文件使用该配置（属于手动一个个指定文件）
  "files": [
    "demo.ts"
  ]
}

下面介绍一些常用的字段细节：

"baseUrl"

"baseUrl"："." 说明工作目录的根路径是tsconfig.json所在的目录，如果指定为"baseUrl"："src",则根路径为tsconfig.json所在的目录下的src目录

 

"target"

指定生成的js版本，默认为"ES3",其余选项为'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020',  'ESNEXT'，“EXNEXT”包含最新的一些TC39标准提案，具体见 https://github.com/tc39/proposals

 

"module"

指定生成代码的模块类型，选项有'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', 'ESNext'。

如果不指定，则由target字段决定，target为es3或者es5的时候，module的默认值为commonjs，当target为其他的值的时候，那么module的默认值为es6。

 

"types"

一个数组。如果指定了types，只有被列出来的包才会被包含进来。 比如：

{
   "compilerOptions": {
        "types" : ["node", "lodash", "express"]
   }
}

这个tsconfig.json文件将仅会包含 ./node_modules/@types/node，./node_modules/@types/lodash和./node_modules/@types/express。/@types/。 node_modules/@types/*里面的其它包不会被引入进来。

指定"types": []来禁用自动引入@types包。

注意，自动引入只在你使用了全局的声明（相反于模块）时是重要的。 如果你使用 import "foo"语句，TypeScript仍然会查找node_modules和node_modules/@types文件夹来获取foo包。

 

“lib”

一个数组，指定需要引入的库。如果--lib没有指定默认注入的库的列表。默认注入的库为：
► 针对于--target ES5：DOM，ES5，ScriptHost
► 针对于--target ES6：DOM，ES6，DOM.Iterable，ScriptHost

其他配置值可参考： https://www.tslang.cn/docs/handbook/compiler-options.html

这些库主要是为原生的一些类型和api提供类型接口，注意尽量不要引入无用的库，比如写node项目就可以不需要引入DOM相关的库，避免编译时报错。

 

”include“

一个数组，该数组下的文件都会被编译，该字段可以使用通配符，而”files“字段中只能一个个文件指定，不能使用通配符。所以建议使用include而尽量少用files。

 

”exclude“

一个数组，与”include“字段相反，该数组内的文件不会被编译，可使用通配符。

 

小tips：命令行输入tsc --init会生成一个包含常用的配置的tsconfig.json文件。