前言

如果一个目录下存在一个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文件）的类型检查。

"skipLibCh

• 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的配置选项比较多，但我们日常开发中用到的其实就那几项，掌握好会有利于我们对项目的整体把控。