【Angular4学习】服务端 自动编译typeScript为JavaScript（vscode/webstrom）

【前言】
本文遇到的问题是在搭建web服务器时无法将写好的typeScirpt编译成Javascript造成无法访问web服务器。
【正文】
1.首先确保自己已经安装了typescript,可以用tsc -v查看版本，没有安装的话使用下面命令安装。这里没有写版本号默认是最新版。

npm install -g typescript

2.安装tsd编译typescript代码命令工具

npm install -g tsd@^0.6.0

3.安装 .d.ts 文件

npm install @types/node --dev-save

4.在项目的一级目录建立一个tsconfig.json文件，作为typescript的编译配置文件，注释很详细，简单了解一下配置文件的作用。

{
    "compileOnSave": true,
    "compilerOptions":{       //编译器配置
        "target":"es5",       //目标是编译成es5规范的脚本，也就是js
        "module":"commonjs",  //模块的规范是commonjs
        "emitDecoratorMetadata": true,
        "experimentalDecorators":true,   //这两个是要保留装饰器的元数据
        "outDir":"build",   //编译后文件默认放置在build文件夹下
        "lib":["es6"]       //开发时使用es6的语法
    },
    "exclude": [            //编译时要排除的文件
        "node_modules"
    ]
}

这些都完成后，我们需要的ts开发环境已经搭建完成。

---

5.准备工作做好了，到了编译环节
（1）当你使用webstrom开发，我们需要在typescript的语言选项里面修改编译器的配置，让webstrom知道我们建立了tsconfig.json文件作为编译器的默认配置。
方式：
打开菜单栏webstrom–preferences–搜索typescript–Languages&Frameworks–Typescript
找到Compiler,点击Enable启用Typescript编译器 ，并使用tsconfig.json文件
如图示：

设置完成后，当你编写ts文件之后会自动编译成js文件保存到build文件夹下的同名文件。
（2）当你使用vscode开发，我们需要在每次ts编写文件编写完成时，打开终端手动输入tsc -w，之后将编译成功。
6.看看编译后的效果

（1）编译前的server/hello_server.ts文件内容

import * as http from 'http'
const server=http.createServer((request,response)=>{
   response.end("Hello Node!");
});
server.listen(8000);   //服务器监听8000端口，收到服务打印出hello node

（2）编译后的build/hello_server.js文件内容

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var http = require("http");
var server = http.createServer(function (request, response) {
    response.end("Hello Node!");
});
server.listen(8000); //服务器监听8000端口，收到服务打印出hello node

7.启动我们编译后的服务器

node build/hello_server.js

结果：访问8000端口浏览器上成功显示hellonode!