携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

前言

如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。一个项目可以通过以下方式之一来编译：

配置

常用配置

files：是个数组用来设置需要编译的文件路径，不设置则表示根目录所有文件,不常用

"files":["app.ts",....]
复制代码

includes：指定某个目录下的ts去编译，可以是一个数组传入多个目录，** 代表所有目录下的所有文件

"includes":["./src",....]
复制代码

excludes：指定某个目录下的ts不去编译，可以是一个数组传入多个目录，** 代表所有目录下的所有文件

"excludes":["node_modules"]
复制代码

compileOnSave：是声明是否需要在保存时候自动触发 tsc 编译的字段。

compileOnSave: false
复制代码

compilerOptions: typescript编译最为重要的配置，编译相关的配置都在这个对象中。

  "compilerOptions": {
      "target": "es2016",
      *****
  }
复制代码

extends：用来继承其他的编译属性

extends:["...ts.json"]
复制代码

编译配置

基本选项

target: 用来指定ECMAScript的目标版本

"target":"es2016"
复制代码

module: 指定模块加载的类型主要有AMD CMD commonjs es2015等

"module": "commonjs"
复制代码

outDir：指定输出文件夹，

"outDir": ""
复制代码

outFile：如果设置则会将输出文件合并为一个文件

"outFile": "./"
复制代码

allowjs: 允许编译 javascript 文件

"allowjs": true
复制代码

checkJs: 报告JavaScript中的文件错误

"checkJs": true
复制代码

sourceMap: 设置是否要生成相应的.map文件方便本地调试

"sourceMap": true
复制代码

removeComments: 删除编译后的所有注释

"removeComments": true
复制代码

类型检查

skipDefaultLibCheck: 忽略库的默认声明文件的类型检查。

"skipDefaultLibCheck": true
复制代码

skipLibCheck：跳过声明文件（*.d.ts文件）的类型检查。

"skipLibCheck": true
复制代码

strict: 启用所用严格类型检查选项，默认为false可以设置为true
alwaysStrict：严格检查每个模块并在每个文件开头增加"use strict"

"removeComments": true
复制代码

noImplicitThis: 当 this 表达式值为 any 类型的时候，生成一个错误,这个木有咋用过

"noImplicitThis": true
复制代码

strictNullChecks：启用严格null检查模式，在2.0之前的版本基本类型赋值null和undefined是不会检查报错的，2.0之后加了这个属性设置为true是会检查

"strictNullChecks": false
//校验通过
let isFlag: boolean;
isFlag = null;      // OK
isFlag = undefined; // O
"strictNullChecks": true
//不能将类型“null”分配给类型“boolean”。ts(2322)
let isFlag: boolean;
isFlag = null;      // OK
isFlag = undefined; // O
复制代码

forceConsistentCasingInFileNames: 禁止对同一个文件的不一致引用

模块解析

jsx: 用来处理tsx，可以设置两种支持方式，"react"和"Preserve",react项目中使用ts时这个必须设置。

"jsx": "react"
复制代码

baseUrl: 这个配置很是常用，当我们在开始是引入自定义模块如果想以根目录

"baseUrl": "./src"
复制代码

paths: 模块名到基于 baseUrl 的路径映射的列表,配置之后可以直接在项目模块中import模块名使用

{
  "Utils":"./src/utils",
  ***
}
//使用
import Utils from 'util'
复制代码

preserveSymlinks:不把符号链接解析为其真实路径；将符号链接文件视为真正的文件。 |

"preserveSymlinks": true
复制代码

rootDirs:指定输入文件的根目录。用于通过 --outDir 控制输出目录结构

其他

默认所有可见的"@types"包会在编译过程中被包含进来。

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

"types":["express","jquery"***]
复制代码

typeRoots：

"typeRoots":["./typings"]
复制代码

watch：在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。监视文件和目录的具体实现可以通过环境变量进行配置
version：打印编译器版本号。

编译

TypeScript 编译器源文件位于 src/compiler 目录下，此处简单介绍下typescript编译的组成，以及执行流程。

组成如下

打开上面的源码地址可以看到以下几个文件，scanner.ts parser.ts binder.ts checker.ts emitter.ts,types.ts,system.ts这几个文件是整个编译的关键组成部分分别为：

Scanner 扫描器（scanner.ts）
Parser 解析器（parser.ts）
Binder 绑定器（binder.ts）
Checker 检查器（checker.ts）
Emitter 发射器（emitter.ts）
数据结构定义（types.ts）
操作环境，TypeScript 编译器与操作系统的所有交互均通过 System 接口进行。（system.ts）

编译流程

简单的介绍下编译流程：大概分为几个步骤：

源码加载=》扫描源码=》生成Token流=》解析Token=》生成AST抽象语法树=》语法检查=》类型验证=》生成JavaScript代码，后面会根据这一流程了解下typescript编译的相关源码，此处先做一了解。

总结

虽然typescript的配置选项比较多，但我们日常开发中用到的其实就那几项，掌握好会有利于我们对项目的整体把控。

参考文档：深入理解TypeScript
参考文档：Typescript文档

记录下typescript的使用（编译配置）

前言

配置