热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

给sublime安装TypeScript插件及编译

我正准备弃sublime改换vscodes时,从网上找到了这一篇介绍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


推荐阅读
  • 本文介绍了JavaScript进化到TypeScript的历史和背景,解释了TypeScript相对于JavaScript的优势和特点。作者分享了自己对TypeScript的观察和认识,并提到了在项目开发中使用TypeScript的好处。最后,作者表示对TypeScript进行尝试和探索的态度。 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 树莓派语音控制的配置方法和步骤
    本文介绍了在树莓派上实现语音控制的配置方法和步骤。首先感谢博主Eoman的帮助,文章参考了他的内容。树莓派的配置需要通过sudo raspi-config进行,然后使用Eoman的控制方法,即安装wiringPi库并编写控制引脚的脚本。具体的安装步骤和脚本编写方法在文章中详细介绍。 ... [详细]
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • 微信民众号商城/小顺序商城开源项目介绍及使用教程
    本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目,包括前端和后端的目录结构,以及所使用的技术栈。同时提供了项目的运行和打包方法,并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接,以及加入前端交流QQ群的方式。 ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • 前言:原本纠结于Web模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中ev ... [详细]
  • Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ... [详细]
  • CF:3D City Model(小思维)问题解析和代码实现
    本文通过解析CF:3D City Model问题,介绍了问题的背景和要求,并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景,每个网格单元可以作为建筑的基础,建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路,并给出了相应的代码实现供读者参考。 ... [详细]
  • GreenDAO快速入门
    前言之前在自己做项目的时候,用到了GreenDAO数据库,其实对于数据库辅助工具库从OrmLite,到litePal再到GreenDAO,总是在不停的切换,但是没有真正去了解他们的 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • 在加载一个第三方厂商的dll文件时,提示“找不到指定模块,加载失败”。由于缺乏必要的技术支持,百思不得期间。后来发现一个有用的工具 ... [详细]
  • npmrunbuild后dist文件夹下面直接浏览器打开index.html,css和js的路径都不正确。放到跟目录下就正常了,iis上同样只能在根目录下。我项目的目录如下: ... [详细]
  • 1、PLSQLDeveloper记住登陆密码在使用PLSQLDeveloper时,为了工作方便希望PLSQLDeveloper记住登录Oracle的用户名和密码&#x ... [详细]
author-avatar
水妖精Fairy
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有