[TOC]
目前转换 Typescript 有三种常用的方式：
1. 经典的`ts-loader`
2. `awesome-typescript-loader`
3. `babel7`之后已经支持的`@babel/preset-typescript`
> Xee：在其他react handbook书中“开发环境配置” 中可能介绍过～
> [Use TypeScript to Create a Secure API with Node.js and Express: Getting Started](https://auth0.com/blog/use-typescript-to-create-a-secure-api-with-nodejs-and-express-getting-started/)
# 用 Babel 去构建 TypeScript 项目
## Babel 编译 TS
现在空项目中创建 package.json 文件，再去安装 Babel，@babel/core 是 babel 的核心，@babel/cli 是 Babel 的命令行，可以在终端使用 Babel 的命令行，输入 `npx babel --help` 查看所有的命令。接下来创建 src 目录并进入：
~~~shell
npm init -y && npm install -D @babel/core @babel/cli && mkdir src
npm install -D @babel/preset-env @babel/preset-typescript
npm install -D @babel/plugin-proposal-class-properties
npm install -D @babel/plugin-proposal-object-rest-spread @babel/plugin-proposal-decorators
~~~
`package.json` 同级目录下新建.`babelrc`文件
```json
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript" // presets是自下而上执行的
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
```
> 使用的时候注意下面两点：
> 1.If you are including your plugins manually and using @babel/plugin-proposal-class-properties, make sure that @babel/plugin-proposal-decorators comes before @babel/plugin-proposal-class-properties.
> 2. When using the legacy: true mode, @babel/plugin-proposal-class-properties must be used in loose mode to support the @babel/plugin-proposal-decorators.
这时在 package.json 文件的`scripts`里面新增以下内容：
```
"scripts": {
"build": "npx babel src -d dist -x \".ts, .tsx\"",
"dist": "npx babel src --out-dir dist --extensions '.ts , .tsx'"
},
```
build 是 dist 的简写版本，功能是一样的，Babel 不能自己识别`.tsx和.ts`文件，所以需要`--extensions`指定文件，简写为`-x`。
现在来配置，安装 typescript：
~~~shell
npm install -D typescript
~~~
初始化配置文件：
~~~shell
npx tsc --init
~~~
打开配置文件 `tsconfig.json`，更改 `noEmit` 配置项，表示只执行类型检查不编译输出文件：
~~~shell
"noEmit": true, /* Do not emit outputs. */
~~~
这时在命令行执行，持续监听文件的更改就行了：
~~~shell
npx tsc --watch
~~~
类型检查配置完成。这时 Babel 负责编译，typescript 负责类型检查。
## babel 环境 TS 兼容问题
Babel 环境中 TypeScript 中的语法有四个不能使用：
* 命名空间 `namespace`
* 模块兼容 `export = xx`
* 类型断言只支持 `as`方式
* 常量枚举 `const enmu {}`
现在还是推荐使用主流方式去构建 TypeScript 项目，即 webpack 的方式，使用 ts-loader 配合 typescript 实现。附赠一个技巧：
> webpack 使用 ts-loader来编译检查 TypeScript 的时候，随着项目越来越大，速度会变慢这时需要
> 我们配置 `options:{ transpileOnly:true }`表示 `ts-loader`只做编译不做类型检查
> 这时类型检查可以交给插件`fork-ts-checker-webpack-plugin`
> **各司其职的好处就可以提高文件的编译速度**
>**请务必牢记 Babel 不做类型检查，如果需要类型检查安装 TypeScript 来执行类型检查的工作。**
> [用 Babel 去构建 TypeScript 项目](https://www.jianshu.com/p/83c14c881a2c)
# Using ES6 and ESNext with TypeScript
有时候你需要使用 `Promise` 或者 `document` 这些在 ES6 或者 操作 DOM 时，需要用到的属性时，typescript 可能会报错，不能找到相关的定义！
可以通过在 `tsconfig.json`中进行配置解决该问题：
```json
{
"compilerOptions": {
"target": "es5",
"outDir": "lib",
"lib": [
"dom",
"es2017"
]
},
"include": [
"src"
]
}
```
添加 `lib` 属性，值为包含 "es2017" 或者 "es6" 的 数组，可以解决相关问题（或者其他在ES5 中不存在的定义）
或者你可以借助 polyfill，它们已经实现了相关定义：
安装：
```js
npm i -D core-js
```
在代码中 进行导入：
```js
// import 'shim' from 'core-js':
import "core-js/shim";
const foo = () => Promise.resolve(null);
```
# TypeScript Node
https://github.com/TypeStrong/ts-node
通过node 直接运行ts文件！
~~~
yarn global add ts-node
# Install a TypeScript compiler (requires `typescript` by default).
yarn global add typescript
~~~
