默认情景是在Win系统

前置条件：

1. 安装 NodeJs

2. 安装typescript模块:

npm install -g typescript

为了确保安装了typescript模块，请在命令行终端验证一下:

tsc -v #可以看到安装的typescript版本

这里的开发工具是vscode，实际使typescript可以自动编译成JS文件的是webpack。

首先，创建一个目录作为工作目录，该目录的结构如下：

.
+-- index.html
+-- build
|   +-- webpack.config.js
+-- src
    +-- main.ts

目录结构说明:

1. index.html文件用来在浏览器运行JS文件

2. build目录下的webpack.config.js文件用来配置webpack

3. src目录里面的main.ts用来编写typescript代码

以上所有的目录和文件都先创建好

再使用npm初始化编译环境

npm init -y #初始化package.json
npm install typescript #初始化本地typescript
tsc --init #初始化tsconfig.json

安装tslint并初始化配置

typescript的风格比较的严谨，所以安装tslint:

npm install tslint -g
tslint -i

安装webpack和相关依赖

npm intall webpack webpack-cli webpack-dev-server -D

因为只是在本地搭建的一个编译环境，所以无需全局安装

设置启动脚本

#package.json
"scripts":{
 "test":"echo "Error: no test specified" && exit 1",
 "serve": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js"
},

其他依赖安装

npm install cross-env -D    #识别生成环境or开发环境
npm install ts-loader -D    #解析.ts文件    
npm install html-webpack-pluin -D   #处理html文件模块

配置文件webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/main.ts",
    output: {
        filename: "build.js"
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    module: {
        rules: [{
            test: /.tsx?$/,
            use: "ts-loader",
            exclude: /node_modules/
        }]
    },
    devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map",
    devServer: {
        contentBase: "./dist",
        stats: "errors-only",
        compress: false,
        host: "localhost",
        port: 8080
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ]
};

以上全部完成之后就可以在main.ts里面编写typescript代码，通过命令npm run serve启动服务之后，随着每次的改动，通过浏览器查看http://localhost:8080/代码是随着改动的，无需手动刷新浏览器。