简介
本文将简述怎样运用vscode [Visual Studio Code]开辟东西来搭建一套TypeScript的开辟环境，重要的目标是落地留痕，同时也愿望能对一些刚入门的小伙伴有肯定的参考价值。[注重：Windows，Linux，OS X在操纵上基本上一致，只是东西的装置有所不同，这里仅以Windows平台作为本次教程的演示环境]
TypeScript是一种由微软开辟的自在和开源的编程言语，一般我们以为其是JavaScript的一个超集，且本质上向这个言语添加了可选的静态范例和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，已事情于TypeScript的开辟。
TypeScript为大型应用之开辟而设想，能够编译成javascript来确保兼容性。
准备事情
Node.js Node.js – Official Site
Visual Studio Code Visual Studio Code – Official Site
装置Node.js
一方面供应一个开辟的Runtime；另一方面供应的npm东西，我们能够应用这个东西来装置TypeScript。
下载Node.js装置包
起首根据准备事情内里供应的链接下载对应平台的Node.js装置包
装置Node.js并检测是不是装置胜利
装置Node.js，装置历程基本上是下一步，即可完成，然后在CMD中运转以下敕令：node -v 来查询当前node.js的版本号，然后输出如图所示的结果就示意node.js装置胜利，接着能够输入敕令：npm -v 来查询当前npm东西的版本号[能够须要时刻稍长点]，便会输出如图所示的结果示意npm东西可用
设置node.js的npm装置package的全局途径[非必需]
由于npm装置东西默许会跑到C盘[由于npmrc文件中默许的设置为：prefix=${APPDATA}\npm]，如许偶然能够会由于体系权限的题目，致使不能一般胜利的装置某些东西，那末我们能够先将npm装置的全局途径自定设置一下，比方：我们能够在nodejs的目次下[即你的node.js装置后的根目次]新建两个目次：node_global，node_cache，然后找到nodejs目次下的node_modules/npm目次下名为npmrc 或许 .npmrc文件，[为平安，我们能够先将该文件copy一个副本出来举行备份]运用文本编辑器翻开，修正并新增以下：prefix 和 cache 离别对应之前新建的目次node_global 和 node_cahce 
设置package的环境变量[有必要]
经由过程步骤3设置后，后续在装置东西的时刻，比方装置TypeScript，最终会装置到node_global中，所以为了后续运用东西敕令行，我们能够设置一个环境变量：
起首新建一个NODE_PATH -> NODE_PATH=D:\EasBuilding\nodejs\node_global，然后在Path下新增%NODE_PATH%
检察typescript版本
[这里只是为了申明题目，可不必举行这一步] 翻开CMD，运转敕令：tsc -v，这里不能一般像是版本号，这是由于这里还没有装置typescript，所以我们接下来就先装置TypeScript Compiler
装置TypeScript
装置TypeScript Compiler
在前面装置好Node.js后，我们能够直接运用npm东西来装置TypeScript，这个TypeScript的Package实在也是一个Compiler，我们能够经由过程这个Complier将typescript编译成javascript。翻开敕令提示符CMD(或其他终端Terminal)，输入指令：npm install -g typescript，稍等片刻即可完成TypeScript Compiler的装置。
更新TypeScript Compiler
如上图所示，下载的TypeScript版本为1.8.10，在官网，该版本为最新稳定版，所以不须要更新，假如我们下载的版本小于这个版本，我们能够运用以下敕令来举行更新：npm update -g typescript
装置Visual Studio Code
下载Visual Studio Code装置包并装置
起首根据准备事情内里供应的链接下载对应平台的vscode装置包
我的第一个TypeScript顺序
新建一个workspace事情目次
这里我先在桌面上新建一个DemoModules的目次来寄存一些我的Demo Projects，然后选中DemoModules右键运用 vscode 翻开或许翻开CMD，切换到DemoModules下，然后输入敕令：code . 既能够运用 vscode 翻开DemoModules目次。
接着，在该目次下新建一个名为TS_DEMO的目次：
建立我的第一个typescript文件
在TS_DEMO下新建一个名为greeter.ts的文件，并输入以下代码：
我们发明这就是一个简朴的javascript code，那末我继承革新一下这个代码，弄得轻微复杂点，到场接口interface和类class：
继承在该目次下新建一个index.html的文件，并在body中引入greeter.js剧本：
编译typescript文件
起首在TS_DEMO目次下建立一个名为tsconfig.json的文件，能够手动建立该文件，并输入以下代码：
也能够运用敕令自动建立这个设置文件，CMD中切换到TS_DEMO目次，然后输入敕令：tsc -init 即可自动建立
接下来我们继承输入编译敕令，编译greeter.ts；输入指令：tsc -w greeter.ts, 个中-w是watch监控的意义，当typescript文件内容发作转变时会自动举行编译。
我们能够看到，TS_DEMO目次下多了一个.js后缀的同名文件，这就是typescript编译后的javascript文件。
同时我们还能够变动tsconfig.json中的target属性，调解编译出来的javascript版本
末了我们将index.html用Chrome或许Firefox翻开看看结果：
