热门标签 | 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


推荐阅读
  • 在Ubuntu 16.04 LTS上配置Qt Creator开发环境
    本文详细介绍了如何在Ubuntu 16.04 LTS系统中安装和配置Qt Creator,涵盖了从下载到安装的全过程,并提供了常见问题的解决方案。 ... [详细]
  • DNN Community 和 Professional 版本的主要差异
    本文详细解析了 DotNetNuke (DNN) 的两种主要版本:Community 和 Professional。通过对比两者的功能和附加组件,帮助用户选择最适合其需求的版本。 ... [详细]
  • 解决微信电脑版无法刷朋友圈问题:使用安卓远程投屏方案
    在工作期间想要浏览微信和朋友圈却不太方便?虽然微信电脑版目前不支持直接刷朋友圈,但通过远程投屏技术,可以轻松实现在电脑上操作安卓设备的功能。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • 本文详细记录了在银河麒麟操作系统和龙芯架构上使用 Qt 5.15.2 进行项目打包时遇到的问题及解决方案,特别关注于 linuxdeployqt 工具的应用。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 数据库内核开发入门 | 搭建研发环境的初步指南
    本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
  • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 解决PHP与MySQL连接时出现500错误的方法
    本文详细探讨了当使用PHP连接MySQL数据库时遇到500内部服务器错误的多种解决方案,提供了详尽的操作步骤和专业建议。无论是初学者还是有经验的开发者,都能从中受益。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • XNA 3.0 游戏编程:从 XML 文件加载数据
    本文介绍如何在 XNA 3.0 游戏项目中从 XML 文件加载数据。我们将探讨如何将 XML 数据序列化为二进制文件,并通过内容管道加载到游戏中。此外,还会涉及自定义类型读取器和写入器的实现。 ... [详细]
  • 本文深入探讨了Linux系统中网卡绑定(bonding)的七种工作模式。网卡绑定技术通过将多个物理网卡组合成一个逻辑网卡,实现网络冗余、带宽聚合和负载均衡,在生产环境中广泛应用。文章详细介绍了每种模式的特点、适用场景及配置方法。 ... [详细]
  • 在现代网络环境中,两台计算机之间的文件传输需求日益增长。传统的FTP和SSH方式虽然有效,但其配置复杂、步骤繁琐,难以满足快速且安全的传输需求。本文将介绍一种基于Go语言开发的新一代文件传输工具——Croc,它不仅简化了操作流程,还提供了强大的加密和跨平台支持。 ... [详细]
  • 本文详细介绍了 com.facebook.drawee.view.SimpleDraweeView 中的 setScaleType 方法,提供了多个实际代码示例,并解释了其在不同场景下的应用。 ... [详细]
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社区 版权所有