给sublime安装TypeScript插件及编译

我正准备弃sublime改换vscodes时，从网上找到了这一篇介绍sublime安装TypeScript插件的文章讲解的很好，按照文中讲解的一步步配置，最终安装成功。但，美中不足的是他文中提到的那个下载地址，需要科学上网然后我打开，我是从github上clone下来的

clone命令 $ git clone --depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript

下面是正文

-----------------------------------------

Sublime Text创建开发环境（for Windows）：
1、下载Sublime Text 3，或者Sublime Text 2版本，网址可自己google，下载后安装。

2、下载typescript.tmlanguage，这个用来支持Sublime Text中TS代码高亮，下载地址：
http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled.aspx

3、安装TS编译器，两种方法选一个就可以了

方法1：从http://typescript.codeplex.com/下载MSI（TypeScript 1.0 Tools for Visual Studio 2012），包含了ts在VS

的编辑器和编译器，下载后安装（即使没有安装VS也可以），系统环境变量中会自动添加相关编译器路径。

方法2：从nodejs.org下载Node.js，下载后安装，安装目录内有个npm.dll，我们使用执行npm install -g

typescript
例如我安装在f盘，则依次执行下列cmd命令：
f:
cd F:\Program Files\nodejs
npm install -g typescript

4、启动Sublime Text，Preferences菜单里选择Browse Packages，
在打开的路径内（一般是系统盘目录，不是安装Sublime Text的目录，不用在意是哪里）创建文件夹TypeScript，把

typescript.tmlanguage拷贝到文件夹下

5、然后再Sublime Text菜单中，Build System ➤New Build System
写入如下命令：

[plain]  view plain  copy

 print ?

1. {  
2.     "cmd": ["tsc","$file"],  
3.     "file_regex": "(.*\\.ts?)\\s\\(([0–9]+)\\,([0–9]+)\\)\\:\\s(...*?)$",  
4.     "selector": "source.ts",  
5.     "osx": {  
6.         "path": "/usr/local/bin:/opt/local/bin"  
7.     },  
8.     "windows": {  
9.         "cmd": ["tsc", "$file"]  
10.     }  
11. }  

保存，会让你选择存放目录，直接存在打开的目录下就可以（一般是C:/xxxx/User/目录），可以

命名为TypeScript.sublime-build

6、重启Sublime Text，就可以使用了

7、测试代码：新建一个项目文件夹，新建类Main.ts，写入如下代码

[plain]  view plain  copy

 print ?

1. class Greeter {  
2.     greeting: string;  
3.     constructor(message: string) {  
4.         this.greeting = message;  
5.     }  
6.     greet() {  
7.         return "Hello, " + this.greeting;  
8.     }  
9. }  
10.   
11. var greeter = new Greeter("world");  
12.   
13. var button = document.createElement('button');  
14. button.textContent = "Say Hello";  
15. button.onclick = function() {  
16.     alert(greeter.greet());  
17. }  
18.   
19. document.body.appendChild(button);  

使用Ctrl+B编译，或使用菜单Tools->Builder编译
输出[Finished in 3.0s]相关内容表示编译成功，会在项目目录生成一个.js文件

其他：

如果你编译器选择的安装MSI，编译ts报错，尝试把上面的命令中后面的代码

"windows": {
"cmd": ["tsc", "$file"]
}
改为
"windows": {
"cmd": ["tsc.exe", "$file"]
}

ts在线直观编辑器（ts to js），http://www.typescriptlang.org/playground

参考：《typescript-revealed》

原文地址：http://blog.csdn.net/taotao3686/article/details/25881209