TypeScript是由微软大神Anders Hejlsberg（安德斯·海尔斯伯格，丹麦人，Turbo Pascal编译器的主要做者，Delphi、C#开发领导者，同时也是.NET奠定人之一）领衔开发的。javascript
TypeScript可谓一门语言，其主要特性有：css
- 兼容 ECMAScript 2015（ES6）规范，可选择编译成ES6或ES5规范的JavaScript代码（ECMAScript 3及以上版本）；
- 面向对象，并拥有一些函数式特性；
- 类型语言；
- 实现了注解、泛型等特性；
- 适配大型App构建。
这些特性很是吸引我，特别是 Anders Hejlsberg是个人四位“偶像”之一（其余三位分别是 Linus Torvalds、 Eric Raymond、 Dave Thomas——知名Ruby/Rails程序员、做家，如今喜欢上了Elixir），这更是提升了TypeScript在我心中的颜值。很多人对此类最 终编译成JavaScript的语言不感冒，刚好ES6正式发布后增长了许多特性，让他们更是以为此类语言是鸡肋。但只凭 TypeScript的品质及某些独有特性如泛型、注解，就有其存在的极大价值，何况著名框架Angular 2就是使用TypeScript开发的！html
工欲善其事，必先利其器，除了一门语言是内力，还需有趁心的利刃为兵器。好马配好鞍——我以为TypeScript的最佳开发工具是Visual Studio Code——同属微软出品的优秀编辑器，做为一家公司的两个利器，其搭配使用时浑然天成。最重要的是，微软当下拥抱开源的力度是愈来愈 大，TypeScript与VS Code都是开源的。同时，VS Code的代码提示、片断及调试功能也很是棒！java
本文将详细阐述TypeScript与VS Code相结合的开发环境打造之道，为后续的学习提供先决条件。node
先总结一下TypeScript开发环境用到的各类工具：程序员
- Node——经过npm安装TypeScript及大量依赖包。从https://nodejs.org/下载并安装它；若是安装各类包不方便，能够将安装源改成国内镜像，具体方案网络上已经有不少了，可供参考；
- VS Code——从 https://code.visualstudio.com/ 下载并安装它；
- TypeScript——TypeScript语言，后面经过npm安装；
- concurrently——Node包，同时执行命令用。 后面经过npm安装；
- lite-server——Node包，轻量级的Node开发服务器。 后面经过npm安装；
先按上述列表安装Node与VS Code，接下来咱们开始安装其他工具。web
1 .2 安装及开发环境配置
1.2.1 安装TypeScript
建议先将TypeScript安装成全局包方式，打开终端或命令行窗口，执行如下命令安装TypeScript：chrome
npm install -g typescript
本文写做时TypeScript的版本为1.8.10。typescript
1.2.2 安装其余Node包
新建一个目录，如：hello-typescript，用刚安装好的VS Code编辑名为package.json的文件，保存于hello-typescript目录中。shell
package.json是包描述文件。其中列出了应用所需的各类依赖包、待执行脚本，以及其余一些设置内容。编辑其内容为：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
{
"name"
:
"hello-typescript"
,
"version"
:
"0.0.1"
,
"description"
:
"Learning TypeScript."
,
"scripts"
: {
"start"
:
"tsc && concurrently \"npm run tsc:w\" \"npm run lite\""
,
"lite"
:
"lite-server"
,
"tsc"
:
"tsc"
,
"tsc:w"
:
"tsc -w"
},
"author"
:
"2gua"
,
"license"
:
"ISC"
,
"dependencies"
: {
},
"devDependencies"
: {
"lite-server"
:
"^2.2.0"
,
"concurrently"
:
"^2.0.0"
}
}
|
package.json文件主要说明：
"name"——包的名称
"version"——版本
"description"——App描述，方便搜索
"scripts"——可执行的脚本
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\""——同时执行的命令
"lite": "lite-server"——启动lite-server服务器
"tsc": "tsc"——执行一次TypeScript编译
"tsc:w": "tsc -w"——以监控模式运行TypeScript编译器。后台始终保持进程。一旦TypeScript文件变化即会重编译
"dependencies"——生产环境中须要的依赖包
"devDependencies"——开发中要使用的安装包
关于package.json的配置能够参考：这里。
1.2.3 配置VS Code的TypeScript开发环境
VS Code提供了很好的TypeScript开发特性支持。
首先，打开刚才建立的目录hello-typescript：
能够看到当前VS Code的资源管理器显示以下：
编辑示例代码
先来编辑咱们的第一个TypeScript程序hello-typescript.ts，放在根目录（指hello-typescript，下同）下。
看看，VS Code对TypeScript的支持是很是到位的。
hello-typescript.ts代码文件的内容以下：
/** * BirdWhisperer * by 2gua */ class BirdWhisperer { chirping: string; constructor(message: string) { this.chirping = message; } chirp() { return 'Ah~ oh~ ' + this.chirping; } } let birdWhisperer = new BirdWhisperer('coo-coo-coo...'); document.body.innerHTML = birdWhisperer.chirp();
建立TypeScript编译器配置文件
当前TypeScript代码并不能直接执行，需编译为JavaScript代码。而借助VS Code，咱们就不用在命令行输入编译命令了。为此，在根目录添加一个tsconfig.json文件。该文件是TypeScript编译器配置文件。文件内容以下所示：
{
"compilerOptions": { "target": "es5", "module": "amd", "sourceMap": true }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] }
tsconfig.json文件各项说明以下：
- "compilerOptions"——编译器选项；
- "target"——编译目标，如这里编译为es5代码；
- "module"——处理独立文件时的模块加载方式；
- "sourceMap"——是否建立map文件以帮助调试；
- "exclude"——编译器会编译TypeScript文件（.ts或.tsx），经过排除设置里的TypeScript文件不会被编译。
关于tsconfig.json的进一步信息能够参考：这里。
建立测试页面
最后，咱们还须要建立一个测试页面index.html来测试咱们的程序。
在新建立的index.html键入：html:5，按Tab键，就会生成好HTML模版文件！而后在body中键入：script:src，按Tab键，而后加载咱们立刻要编译好的的hello-typescript.ts对应的JavaScript文件hello-typescript.js：
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Bird Whisperer</title> </head> <body> <script src="hello-typescript.js"></script> </body> </html>
VS Code无疑很是贴心！
编译项目
在命令行窗口进入项目根目录，执行npm start，将看到会自动打开浏览器窗口：
若是调整TypeScript程序，工具咱们前面的配置，服务器会自动识别咱们的变更并刷新浏览器，不须要咱们手动刷新浏览器：
再来看看如今的项目状况：
项目里多了两个文件，一个是TypeScript编译后对应的JavaScript文件，也就是咱们前面包含进测试页面inde.html里的。另外一个.map文件后面立刻会用到。
开发环境几乎配置妥妥了，剩下还须要看看调试TypeScript程序。
1.2.4 VS Code调试
点击Debug按钮（或者Ctrl+Shift+d），就会出现如下界面：
点击绿色小三角（或F5）就开始调试。首次会弹出调试配置，请选择“Node.js”：
此时会建立.vscode/launch.json文件，首先要配置一下该文件。将"program"设置为hello-typescript.js，"sourceMaps"设置为true：
如今先试着在文件中设置一个断点（在图示位置点击一下便可，再次点击就关闭断点，如是切换）：
而后再次点击绿色小三角进行调试，以后试着选择“单步跳过”命令，看看左边的“变量”窗口发生的变化：
有时候我都怀疑VS Code不是编译器，而是一个IDE了！
注意.map文件是调试用的文件。同时，要进行.ts文件的调试，在.vscode/launch.json文件中，请将"sourceMaps"设置为true。
1.2.5 浏览器调试
Chrome下的调试
打开Chrome，Ctrl+Shift+i打开开发者工具，选择Sources页面，打开hello-typescript.ts,设置断点，再次刷新页面，以后点击“单步跳过”命令，看看效果：
### Firefox下的调试
虽然你们都喜欢Chrome，但做为Firefox老用户，一直不舍Firefox，Firefox也是我主要浏览器。调试步骤跟Chrome下的状况差不离：
至此，TypeScript及VS Code的安装及开发/调试环境设置就OK了。打造好了兵器，是时候开始勤练内力了，接下来就能够迈进TypeScript的世界......
1.2.6 如何使用多条命令
使用 concurrently 便可。
须要安装 concurrently
npm install -g concurrently
package.json的 scripts:
"command1":"aaaaa", "command2":"bbbbb", "test":"concurrently \"npm run command1\" \"npm run command2\""
而后 npm test就能够同时监听 aaaaa 和 bbbbb 了.
1.2.7 关于 --save 和 --save-dev的区别
--save是对生产环境所需依赖的声明(开发应用中使用的框架，库),
--save-dev是对开发环境所需依赖的声明(构建工具，测试工具).
正常使用npm install时，会下载dependencies和devDependencies中的模块，
当使用npm install --production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块。
1.2.8 安装http-server
咱们知道写typescript有时要用的浏览器进行预览，哪咱们还须要安装一下http服务。
npm install -g http-server
这样http服务就装好了，万能的npm有没有？
如何启动？输入：http-server 回车就好了，http://localhost:8080/
如何关闭？快捷键：ctrl+c
更多使用方法和命令，能够输入 http-sever -help 来查看。
1.2.10 关于 lite-server
除了上面这个之外，还有另外一个可推荐的是：lite-server
轻量级的仅适用于开发 的 node 服务器， 它仅支持 web app, 它可以为你打开浏览器, 当你的html或是JavaScript文件变化时，它会识别到并自动帮你刷新浏览器, 还能使用套接字自动注入变化的CSS, 当路由没有被找到时，它将自动后退页面。
安装与使用，如下是被推荐的安装lite-server的方式:
npm install -g lite-server --save-dev
--save-dev 选项，将会把安装的环境写入到pakage.json里面
在你的项目中的 package.json 文件中添加一个 “script” 入口:
"scripts": { "dev": "lite-server" },
cript 入口, 你就能够经过如下命令来启动 lite-server 了:
lite-server
npm run dev
lite-server 使用BrowserSync, 它是容许你去覆盖默认的配置，这得经过你项目里的文件 bs-config.json 或 bs-config.js 来完成
lite-server -c configs/my-bs-config.js
举例来讲, 要改变端口号, 被监测的文件路径, 以及你项目的base路径, 在你项目中建立 bs-config.json 文件:
{
"port": 8000, "files": ["./src/**/*.{html,htm,css,js}"], "server": { "baseDir": "./src" } }