给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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值