1. 全局安装typescript
（1）安装
npm i -g typescript
这样我们就可以使用tsc命令行工具了。
（2）创建tsconfig.json
在项目目录中执行，
tsc --init
将在当前目录中创建一个tsconfig.json文件。
（3）修改配置
修改tsconfig.json，开启jsx和allowJs配置，
{
...,
"allowJs": true
"jsx": "preserve",
...
}
2. 安装开发环境依赖
npm i --save-dev \
typescript \
ts-loader \
@types/react @types/react-dom
其中，ts-loader是typescript的webpack loader。
@types/react和@types/react-dom，是react和react-dom的Declaration Files。
3. 修改webpack.config.js
添加resolve配置，增加新的loader，
...
module.exports = {
context: ...,
entry: ...,
output: ...,
// 添加resolve
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
loaders: [
// 增加新的loader
{
test: /\.tsx?$/,
loaders: ['babel-loader', 'ts-loader']
},
...
]
},
plugins: ...
};
4. 关于.tsx文件
（1）如果.ts文件中包含jsx，则需要将.ts文件改成.tsx文件
（2）需要引用.tsx文件时，不用加扩展名，import xxx from './xxx';，而引用.jsx文件，是需要加扩展名的
（3）.tsx文件中，React和ReactDOM不支持default import，需要进行修改
// 原来
import React from 'react';
import ReactDOM from 'react-dom';
// 修改成
import * as React from 'react';
import * as ReactDOM from 'react-dom';
