TypeScript 入门指南

红薯 发布于 2012/10/07 21:48
阅读 65K+
收藏 92

你是否听过 TypeScript?

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言。

为什么会有 TypeScript?   

JavaScript 只是一个脚本语言,并非设计用于开发大型 Web 应用,JavaScript 没有提供类和模块的概念,而 TypeScript 扩展了 JavaScript 实现了这些特性。TypeScript 主要特点包括:

  • TypeScript 是微软推出的开源语言,使用 Apache 授权协议
  • TypeScript 是 JavaScript 的超集. 
  • TypeScript 增加了可选类型、类和模块
  • TypeScript 可编译成可读的、标准的 JavaScript
  • TypeScript 支持开发大规模 JavaScript 应用
  • TypeScript 设计用于开发大型应用,并保证编译后的 JavaScript 代码兼容性
  • TypeScript 扩展了 JavaScript 的语法,因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改
  • TypeScript 文件扩展名是 ts,而 TypeScript 编译器会编译成 js 文件
  • TypeScript 语法与 JScript .NET 相同
  • TypeScript 易学易于理解

语法特性

  • 类 Classes
  • 接口 Interfaces
  • 模块 Modules 
  • 类型注解 Type annotations
  • 编译时类型检查 Compile time type checking 
  • Arrow 函数 (类似 C# 的 Lambda 表达式)

JavaScript 的 TypeScript 的区别

TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

编辑器支持

Visual Studio 2012 支持 TypeScript 模块/语法高亮,这个需要安装 TypeScript 插件。而类似 Sublime Text, Vim and Emacs 编辑器支持语法高亮。 在 VS 2012 编辑器中,还提供了重构和 Go To Definition 等功能。

Refactor Goto Definition , HTML Application with TypeScript - Shemeer  

注意: TypeScript 不依赖任何 IDE,你可在任何应用中自行将 TypeScript 编译成 JavaScript。

如何获取

可通过以下两个方法来安装 TypeScript:

注意: 需要关闭其他应用程序来避免安装时的一些问题。

下面是通过 MSI 文件安装时的界面:

如果你只是想先看看 TypeScript 而已,可 click here.  

如何编译 TypeScript   

要在应用中使用 TypeScript 必须先编译,编译的结果是生成 js 文件,你可通过 TypeScript 编译器 tsc 来完成这个过程。

如果你在 Visual Studio 2012 中使用 TypeScript,它会自动将 ts 文件编译成 js 文件。

TypeScript 编译器模板被安装在如下路径:

C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0

或者是:

C:\Program Files\Microsoft SDKs\TypeScript\0.8.0.0

要编译 TypeScript 文件,可使用如下命令:

tsc filename.ts

一旦编译成功,就会在相同目录下生成一个同名 js 文件,你也可以通过命令参数来修改默认的输出名称。

如果你希望 TypeScript 被自动编译,你可以了解下 Sholo.TypeScript.Build , Web Essentials 2012.  

TypeScript 项目/文件 模板

一旦你在 Visual Studio 2012 上安装了插件,你会获得如下模板:

HTML Application with TypeScript   

MVC – TypeScript Internet Application

TypeScript File   

首个用 TypeScript 编写的 HTML 应用

现在我开始用 TypeScript 创建一个简单的 HTML 应用。

首先通过 File -> New-Project 新建项目:



输入必要信息,点击 Ok 按钮,创建后项目模板如下:

我们将看到 app.js 依赖于 app.ts,默认的 app.ts 文件包含类和构造函数等等,如下图:

TypeScript 文件将会被编译为 JavaScript (app.js),下面是编译后的 JavaScript 代码:

然后我们可以在页面中引用 JavaScript

当你构建或者重新构建项目时,你将看到提示是否重新编译 TypeScript 的信息:

如果在 .??proj 文件中有如下内容将会被自动编译:

当你运行此应用时会在页面上显示当前的日期和时间

你也可以在线玩玩:Playground 

Playground TypeScript - Shemeer

更多阅读资料   

总结 

这篇文章中我们简单的介绍了如何使用 TypeScript,希望你能喜欢或者觉得对你有帮助。

英文原文OSCHINA原创翻译

加载中
0
Sephiroth
Sephiroth
TypeScript?有没有SexScript?
0
KingDon
KingDon
好吧 名字真犀利
0
0
述而不作
述而不作

理解语境这个应该是javaScript。。。

w
wml199039
不是的,这儿就是TypeScript
3602
3602
就是ts编译器编译成js了..
0
北落
北落
微软的又一门语言
0
泰明
泰明
是不是只有IE支持?
你来人间一趟
你来人间一趟
是编译成js 都能用 微软做开源语言 真心支持
0
寻找爱玩Tom
寻找爱玩Tom
哎,微软总是搞自己特殊的东西,又不统一,要符合大众啊,否则,微软你总是造语言,别人也不会用你的,不过话说回来,微软的东西确实封装的犀利,人多力量大还是好啊,用利益作为动力产生的东西毕竟还是比那些所谓开源的东西好,有条例,真是应验“一分钱就一分货”,开源东西最大的缺点就是乱,乱的一团糟。
sikele
sikele
js的世界本来就一团乱不统一,框架各异
kakai
kakai
开源的东西呈现出多样化难道就是你说的乱?你认为乱,只能说明你不会用,你只要认准了一个东西,你完全可以专用一个。 再说从开源内部实现来讲,你去认真看看一些有名的开源类库,它们的架构也是比较好的。开源的东西也是那些有意向奉献出自己的实战经验的人所编写的。
戴威
戴威
回复 @浪子剑客 : 我认为其实最重要是这个东西的质量怎么样,后续可有保障,有无推广价值,是否有应用环境。
寻找爱玩Tom
寻找爱玩Tom
@喵了个咪 坚信思想只有通过交流,才能进步。
寻找爱玩Tom
寻找爱玩Tom
@喵了个咪 呵呵,你这么说,我就无话可说了,不管什么论都好,如果你自己都没看明白,那就。。。。,我只是想说的是我是不带任何色彩的评价,尽量做到客观论事,希望大家一起交流而已。
下一页
0
鞋底两万里
鞋底两万里
无聊…js足够用了…
醪糟儿蛋
醪糟儿蛋
回复 @铂金小猪 : 你完全没理解我的意思,如果我告诉你冰毒是有益的,你信吗?如果不信自己问度量!这是精神类药物,过量就是害
铂金小猪
铂金小猪
回复 @醪糟儿蛋 : 好吧,那毒品呢?香烟呢?冰毒呢?这些东西,都合理是吧。还有啥牛奶里的三聚氰胺(注意:是牛奶里的)
醪糟儿蛋
醪糟儿蛋
回复 @铂金小猪 : 鸦片不合理吗?别忘了许多医药用品都有鸦片提炼物!鸦片也用于烹饪调味!当然你要把鸦片当饭吃,那我没着了
铂金小猪
铂金小猪
回复 @醪糟儿蛋 : 鸦片存在,它合理不?
狄仁傑
狄仁傑
回复 @醪糟儿蛋 : 存在未必合理,不然就沒有那麼多的東西等著別人去推翻了
下一页
0
forkman
forkman

引用来自“浪子剑客”的答案

哎,微软总是搞自己特殊的东西,又不统一,要符合大众啊,否则,微软你总是造语言,别人也不会用你的,不过话说回来,微软的东西确实封装的犀利,人多力量大还是好啊,用利益作为动力产生的东西毕竟还是比那些所谓开源的东西好,有条例,真是应验“一分钱就一分货”,开源东西最大的缺点就是乱,乱的一团糟。
说的太好了。
返回顶部
顶部