一、安装

npm i -g typescript

二、使用

安装完TypeScript后，我们可以通过tsc指令来编译.ts文件，如：

$ tsc index.ts

编译完成后，会自动生成一个同名.js文件，我们再运行这个同名文件便可得到执行结果了

三、结合React/Webpack使用

1、首先确保已经全局安装了webpack：

$ npm i -g webpack

2、添加React/ReactDOM及声明文件：

$ npm i -S react react-dom @types/react @types/react-dom

3、添加开发时依赖：

$ npm -D typescript awesome-typescript-loader source-map-loader 

其中，awesome-typescript-loader可以让Webpack使用TS的tsconfig.json文件来编译TS代码，而source-map-loader则是使用TS输出的sourcemap文件来告诉Webpack何时生成自己的sourcemaps
4、添加TS配置文件
在项目目录下创建tsconfig.json文件，其包含了输入文件列表和编译选项，可以用来告诉TS如何编译我们的TS源码，如：

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

5、Webpack的配置
在webpack里，我们需要添加的配置，则如下所示：

// ...
resolve: {
    // 配置.ts和.tsx为可缺省的引用文件扩展名
    extensions: ['.ts', '.tsx', '.js', '.json'],
    module: {
        rules: [
            // 将.ts和.tsx文件交由awesome-typescript-loader处理
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader'
            },
            // 配置输出的js文件都交由source-map-loader重新处理
            {
                enforce: 'pre',
                test: /\.js$/,
                loader: 'source-map-loader'
            }
        ]
    },
    // 可以将react库和react-dom库转成从全局变量中加载的模式
    // 避免所有的文件都打包成一个文件（因为库的代码是不变的，
    // 无需每次都重新打包）
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    }
}
// ...