【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!