TypeScript：更好的JavaScript
发表于 16:10|
来源《程序员》|
摘要：TypeScript是微软公司于2012年发布（用以替代JavaScript）的一门语言，提供了类、模块和接口来帮助构建组件，帮助开发人员编写和维护应用程序。TypeScript 1.0近日发布，该版本支持Visual Studio等产品。
作为编程语言的TypeScript
关于TypeScript，首先要认识的一点就是：它是Anders Hejlsberg的作品。Anders是第一流的编程语言设计师，也是第一流的编译器实现者。作为Object
Pascal和C#之父，Anders这次仍然采用了此前的做法：他设计了一种新的语言，并实现了这种语言的编译器，来改进一种已有的语言。但这次又和此前有所不同，此前无论是Object
Pascal还是C#，编译的目标代码都是机器码，而TypeScript的目标代码则是JavaScript。
当然，如果把浏览器看作是虚拟机，而JavaScript看作是在这种虚拟机上运行的目标代码也无不可。总而言之，使用TypeScript这种语言撰写的源代码需要经过TypeScript编译器的编译，而产生的目标代码是标准的JavaScript。但这还不是TypeScript在语言设计层面上的特别之处，特别之处有两点。
TypeScript支持on-the-fly编译，即写一句TypeScript就可以立即得到对应的JavaScript代码，这个特性和CoffeeScript类似。但它比CoffeeScript支持更强的上下文推导，不需要完整的语句写完，就可以生成对应的、不完整的JavaScript代码。
TypeScript是JavaScript的超集（superset），“任何合法的JavaScript都是合法的TypeScript。”这种设计很明显是借鉴了C++对于C做扩充时采用的做法，它兼容已有的JavaScript代码的决定给很多JavaScript程序员向TypeScript转型时铺就坚实的第一步——他们可以从自己已有的代码出发，通过一点一点的改动来体会到TypeScript带来的好处，同时，时刻保留说“这样就够了”，然后停止的权利。直到掌握了比较全面的TypeScript技术以后，才从一开始就采用TypeScript来撰写代码，而只取用编译结果。实际上，“任何合法的JavaScript都是合法的TypeScript”这种说法并不准确，准确的说法是“任何合法的ECMAScript
6都是合法的TypeScript”。当然，ECMAScript 6还是一个正在修订的语言规范，而TypeScript在现阶段生成的任何目标代码，涉及可能会引起ECMAScript
6的新特性的，都采用了向下兼容的ECMAScript 5规范作为准则。但对于各个浏览器自行对JavaScript做的那部分扩充，TypeScript不保证予以支持。
TypeScript特性简介
前面已说过，TypeScript的设计目标是作为JavaScript或者说ECMAScript 6的超集。换句话说，如同C++的初始目标是作为“更好的C”一样，TypeScript也可以看作是“更好的JavaScript”，那么好在哪里呢？其实用C++和C的关系来做类比，还是很恰当的。TypeScript充分利用了JavaScript原有的对象模型并在此基础上做了扩充，添加了较为严格的类型检查机制，添加了模块支持和API导出的能力。比起JavaScript，TypeScript提供了更多在语言层面上的支持，使得程序员能够以更加标准化的语法来表达语义上的约束，从而降低了程序出错的机率；TypeScript也使得代码组织和复用变得更加有序，使得开发大型Web应用有了一套标准方法。
对象模型的扩展
JavaScript支持极为广泛的对象模型，除了null和undefined以外，几乎所有的其他实体都可以视为对象，即使是数值、字符串和布尔型亦可以隐式使用其对应的包装器而直接作为对象用于一般场合。函数和数组这样在其他的编程语言中不被视为对象的实体，在JavaScript亦视为“一等对象”（first-class
object），除了利用实体本身的场合，例如使用数值索引或调用函数体以外，还可以作为普通的对象拿来添加属性和方法。JavaScript对象支持在任意时刻动态添加属性和方法，并且支持修改和扩充内建对象。一句话，JavaScript提供了大量进行对象操作的基础设施（facilities）和基本工具（utilities），正是这些内容构成了JavaScript丰富而灵活的对象模型。TypeScript主要从两个方面对JavaScript对象模型进行扩展：一是在核心语言方面，二是在类概念的模塑方面。
声明语义学
在TypeScript中书写涉及DOM对象的JavaScript代码，一般来说不会遇到问题。但这并不是因为TypeScript语言中对DOM对象有所“了解”，而是因为TypeScript默认会加载名为lib.d.ts的声明文件，其中默认已包含了所有的DOM对象的声明。换言之，当你写下这个语句：
之时，编译器实际上已隐式地在最前面加上了一句：
这种声明称为环境声明（ambient declaration），遇到环境声明以后，TypeScript便会试图从声明的来源（如声明库中）分析和推导对象的类型信息。如果找不到任何的来源，它便默认该对象的类型为any。但无论如何，环境声明都不会向生成的JavaScript里加任何语句。事实上，所有的TypeScript声明都不会生成对应的JavaScript语句，因为JavaScript对象模型中的声明是可选的。这里也可以看出TypeScript遵循“除非必要，不生成多余的语句”的哲学。但声明在TypeScript中除了有着预先提供类型信息的重要作用之外，编译器还能根据这些信息完成强大的类型推导，以及精准的静态类型检查。
数据语义学
TypeScript中的数据要求带有明确的类型，如果设定为一种类型，却要将该类型内不合法的值赋给它，则静态类型检查机制会将这样的语句标示为错误。
可以采用interface关键字定义具名结构类型，这个特性类似于在JavaScript中采用字面量来定义JavaScript对象。所不同的是，在TypeScript中每个组分都必须指定类型，不过组分可以是可选的，在实际提供字面量对象时，可选组分可以不提供。
同样地，interface的数据类型定义，以及在TypeScript中为数据指定的任何静态类型声明，都不会在生成任何的JavaScript目标代码有任何体现。例如上面这段代码生成的JavaScript目标代码仅仅是：
函数对象的类型主要由它的签名式（signature）决定，包括各个形式参数的名字、类型和返回值类型。
值得注意的是，函数对象的返回值可以是void，这是void类型唯一可以出现的地方，而它的唯一可能取值是undefined。
函数语义学
TypeScript中的函数除了在JavaScript的函数对象模型的基础上添加了静态类型检查，体现了函数的数据方面之外，还在函数本身的性质上增加了不少新特性，例如函数缺省参数值：
它会对应地生成以下的JavaScript目标代码，从这里可以清晰地看到它生成代码的逻辑是通过判断参数有无定义来进行的：
TypeScript支持有限的函数重载，为何说是有限的呢？因为一般意义上的函数重载是根据函数签名式的不同，在函数被实际调用时根据实际参数的类型来绑定到特定的重载函数的。其背后的实现机制，大多数是所谓的名称重整（name
mangling）。但TypeScript中的函数重载不能这样做，它只支持能够以共用实现体为基础的重载，无论声明了多少个同名且签名式不同的函数，它都只能有一个实现体，且这个实现体必须对所有的重载版本都有意义。这样说可能比较令人费解，看个例子好了：
只要看一下上述TypeScript代码生成的JavaScript目标代码，就明白了大半：
原因就在于TypeScript在实现重载时并没有使用名称重整机制，而JavaScript又不支持重载，所以只能做出这样非常大的折中方案了。
TypeScript中最引人注目的一个函数对象特性是支持所谓的“箭头记法”（arrow notation），即Lamda表达式。例如下面的三个函数是等价的：
但箭头记法最重要的用途还是在需要使用回调函数的场合。此时最易犯的一个错误就是this的作用域并非保留在被调用函数所在的局部作用域，而成了函数调用方所在的作用域。还是通过一个例子来看：
此时，点击页面，弹出的警告框显示的值是“NAN”，显然有问题。而问题就出在这里的this指的是函数调用方作用域，此处成了全局作用域，结果自然不对。此时只要改用箭头记法，问题就迎刃而解：
这个记法是ECMAScript 6引入的，查看一下TypeScript生成的目标代码，就可以了解它是采用了迂回的办法在实现达到效果的同时又保持向下的兼容性。
class和继承语义学
TypeScript对JavaScript对象模型最重要的扩充，自然在于它补充了JavaScript中所没有引入的“类”的概念。是的，在JavaScript中没有类，只有对象，要实现所谓的“类式操作”（classical
operations），如封装、多态等，要通过若干基础设施，如原型、构造函数等来完成。这些对于非常熟悉JavaScript的程序员来说，也许都是可以完成的任务，但对于新手来说就困难重重了。并且，即使是高手，一段时间不写相关的代码也很容易遗忘和出错。但TypeScript却提供了标准的机制，将普通程序员熟悉的、C++和C#中常用的类概念映射到JavaScript中去，这样就大大降低了在JavaScript进行类式操作的难度。由于相关的概念理解起来并不困难，但技术内容却非常多，所以这里只介绍几点较关键的。
首先，用一句话来概括在TypeScript中class的核心语义：所有的class都是一个立即函数，所有的数据成员都是这个函数实例的属性，所有的方法都是这个函数原型的属性，所有的静态成员都是这个函数的构造函数的属性。各就各位，不会出错。只要看一下class生成的JavaScript目标代码就很明了，假设有个根据工龄计算工资的Human类定义如下：
它生成的JavaScript目标代码如下：
值得说明的是，TypeScript支持所谓的“存取器”。采用存取器，可以将函数封装，并且以数据属性的形式暴露出来。例如可以为上述类增加一个获取工资数额的存取器：
对应的JavaScript代码比较复杂，浏览器需要支持ECMAScript 5才能运行：代码组织和重构
TypeScript中引入了模块的概念，这类似于C++中的名字空间。它可以把声明、数据、函数和类封装在模块中，并采用export关键字导出，供模块外部的代码取用。之所以说它和命名空间比较相似，一是因为同名的模块可以自动合并，甚至可以分别存储在多个文件中；二是因为模块的名字可以分成不同层次，在层次较多时还可以命名简化的别名。但无论模块怎么组织，最终生成的还是标准的、可直接取用的JavaScript代码。正是靠着模块化、可插拔的结构，TypeScript才得以在维护一个较小的语言核心的前提下，对广泛使用的库如jQuery、CommonJS和Node.js等提供了完整的支持。
由于TypeScript并不是采用字符串匹配的粗糙方式来推导变量和函数的名字，对TypeScript代码进行命名的重构就如同微软的其他编程语言一样容易。只需要选中要重新命名的实体，并键入新的名字，而不需要担心名字相同而意义不同的其他实体也被同时重命名了。
TypeScript是现今所有对JavaScript的改进中，唯一完全兼容并作为它的超集存在的解决方案。并且，TypeScript几乎是改进了JavaScript对象模型的方方面面，本文介绍的只是其中比较重要的一部分技术，还有很多细节还需要读者自己去探索。现在，TypeScript的最新版本是0.8.1，并且开放了全部的源代码。很有意思的是，TypeScript本身就是用TypeScript实现的，这种递归式的结构也是编译器大牛们很钟爱的方式之一，因为当年Bjarne
Stroustrup也用C++本身来写C++编译器。熟悉TypeScript源码和规范不仅让我们可以更快地掌握这门新语言，也能够更深入地了解如何利用它来解决一些更复杂的问题，例如如何扩充它来支持一些特定的浏览器才提供的JavaScript特性等。总而言之，TypeScript可以说是最有前途的JavaScript扩展甚至替代的解决方案之一，有志于前端技术的朋友们应该尽快地熟悉起来。
作者高博，EMC中国卓越研发集团首席工程师，有丰富的技术团队管理经验，交付项目有大型桌面软件、移动设备和应用平台和以云存储和云计算为基础的在线企业备份系统。
相关阅读：
推荐阅读相关主题：
为了更好帮助企业深入了解国内外最新大数据技术，掌握更多行业大数据实践经验，进一步推进大数据技术创新、行业应用和人才培养，-12日，由中国计算机学会（CCF）主办，CCF大数据专家委员会承办，中国科学院计算技术研究所、北京中科天玑科技有限公司及CSDN共同协办的2015中国大数据技术大会（Big Data Technology Conference 2015，BDTC 2015）将在北京新云南皇冠假日酒店隆重举办。
相关热门文章微软将在六月发布TypeScript 2.0_Linux新闻_Linux公社-Linux系统门户网站
你好，游客
微软将在六月发布TypeScript 2.0
作者：译者/赖信涛
　　TypeScript 是 JavaScript 的，由微软提供维护和支持，六月份将更新 2.0 版本，其中将会添加非空类型的特性。&
　　非空类型几乎是 TypeScript 最令人期待的特性，微软的技术员和 TypeScript 开发者 Anders Hejlsberg 称，非空类型使用编译器一个叫做严格非空检查实现。&在这个检查中，undefined 和 null 不再是其他类型的一个值。&number 类型必须是 number，string 必须是 string，Boolean 只能是 True 或者 False，不可以是 null 或 undefined。&
　　为了兼容这个改变，TypeScript 2.0 将添加两种新的类型，一种只有一个值，叫 undefined，另一个叫 null。Union 类型可以使用这两个值。&如果一个值可以是 number 或者 undefined，那么可以将其声明为 union 类型。&Hejlsberg 说。&
　　非空类型的引入和控制底层类型是为 TypeScript 的新特性&&局部变量类型分析和控制流映射做准备。强化类型系统，同时，也使用 NPM 作为安装类型的包声明工具。微软使用 NPM 是因为它已经是成数的 JavaScript 包管理工具，Hejlsberg 说。NPM 可以用来管理他们之间的依赖关系。&
　　TypeScript 2.0 其他的特性包括只读属性和 async/await 的底层支持。TypeScript 中的 async/await 模拟同步来实现异步代码，不必使用事件处理器和特殊的回调函数；在 2015 年 11 月，微软称 。&
　　Hejlsberg 也简短地提到了 TypeScript2.1 以及之后版本的开发计划。包括在，以及更多重构的支持。&
　　最近的版本，在二月份已经放出，提高了编译速度以及编译 JavaScript 的支持。&
　　JavaScript 并不是为了大型应用而生的，不适合大型项目，而这就是 TypeScript 诞生的原因，Hdjlsberg 说。编译成 JavaScript，然后在 JavaScript 框架中开发，例如 Angular 和 Dojo 工具包等，可以方便地开发中型到大型的 JavaScript 项目。&
关于TypeScript的推荐文章：
使用Visual Studio Code开发TypeScript&
WebStorm下使用TypeScript&
TypeScript 基本语法&
TypeScript 的详细介绍：TypeScript 的下载地址：
　　英文原文：
本文永久更新链接地址：
相关资讯 & & &
& (昨 12:30)
& (02月15日)
& (昨 13:01)
& (02月16日)
& (12/15/:39)
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款使用Typescript来写javascript (目前相关工具不够成熟) - 为程序员服务
使用Typescript来写javascript (目前相关工具不够成熟)
18420 阅读
增加目前工具不够成熟的部分
前几天尝试使用haxejs来写javascript，以获得静态类型带来的益处。虽然成功了，但很快发现，导致开发效率没有提升，反而下降了。虽然我认为使用haxejs来写普通的js（或者与jquery相关的js）没有问题，但不适合与angularjs这样与HTML侵入较大的js框架配合。
昨天偶然发现idea居然支持typescript了，于是打算尝试一下typescript，目前的感觉还不错，相比haxejs，它与angularjs之间的配合要流畅得多。
与coffeescript的比较
Typescript与Coffeescript都是对javascript的改进，但两者走的是不同路线。Coffeescript是从语法的角度，通过提供类似于python/ruby的语法，让代码写起来更加简洁，可读性更好。并且它提供的一些控制结构，可以避开Javascript中的问题，比如for ... in ...，使用coffeescript可以让多层嵌套看起来不那么痛苦：
self.validate json, (err, json) -&
if err then cb(err)
else self.mapFiles json, (err, json) -&
if err then cb(err)
else self.addFields json, (err, json) -&
if err then cb(err)
else self.store.create json, cb
回调的参数放在右边，看起来就像是把前面函数的返回值放在了右边供调用，读起来比较轻松。习惯于python/ruby的开发者可能会比较喜欢coffeescript，我也觉得它在这方面很好。
而Typescript走的是另一条路，通过增加静态类型，提高程序的可靠性，并没有从语法层面进行大的改进。
我觉得它们两者是互补的，如果能把两者结合起来，既提供静态类型，又增强语法就太好了，不过这可能在很久以后才有可能出现。
编辑器支持
Idea并没有声明已经支持typescript，没有看到相关插件，在建项目时也没有任何提示，只有在创建一个以.ts结尾的文件时，它可以识别出来，说明这还是一个实验性的功能，没有完全完成。不过经过我的试用，基本功能都有了：
代码高亮、格式化
其中编译为js文件的功能似乎有点问题，另外module()函数的检验有时候也不太对，不过这并不影响我们的使用。尽管还是一个开发中的功能，但已经跟idea对haxe的支持不相上下了。
另外，你还可以使用VS2012+typescript插件，这是官方推荐的。另外喜欢用sublime text2的同学，可到这里下载：。另外vim/emacs也有相关的插件也有，eclipse这里似乎还没有动静。
据说typescript提供了一些服务性质的api，可以让IDE实现功能（如代码提示等）更加容易。
官方地址：
先到nodejs网站下载并安装nodejs，然后运行以下命令：
npm install -g typescript
其中npm是由nodejs提供的包管理工具，安装nodejs后就直接可用了。
Typescript相关的资料不多，目前官网上仅有一些示例和简单的文档，我收集的有以下这些链接
语言规范：，可用来参考，很难看懂
Typescript官方的文档很简单，只给出了一个简单的例子，没有详细的文档来讲解各功能，所以对于初学者入门还是稍有难度，我花了不少时间才基本会用，比我预想的时间多了很多。
难度不是在语言特性上，而是在代码的组织和示例上，实在太少。比如如何调用声明文件，如何按module来组织代码等，对于初次接触typescript的人还需要一些时间理解。
我对Typescript的印象，可总结为以下几点：
Typescript的思路还是Javascript，只是对它进行了增强
Typescript可以看作是Javascript的超集，所有javascript代码可以直接写在typescript中，这一点对于Javascript程序员来说很方便
Typescript中增加了静态系统，提供了class/interface/method的支持。类型系统可以让我们在编译期验证代码是否有笔误，也可以获得编辑器的提示
Typescript以module方式来组织代码，既支持commonjs的方式，又支持amd的方式
Typescript中的文件可分为实现文件和声明文件，有点像c++中的.cpp和.h的关系。
Typescript即可用来写后台代码，也可以用来写前台代码，初步感觉似乎更偏后台一些
Class/Interface/Method
Typescript中提供了class、interface关键字，可将代码以类的方式组织在一起。构造函数为constructor，静态方法前要加static。在实例方法中调用静态方法时，必须在前面加上类名。这块看起来比较普通，很好理解。
class User {
constructor(name:string, age:number) {
alert("hell, " + name);
User.test(age);
static test(n:number) {
console.log("this is a static method, argument: " + n);
这块对于非Javascript程序员来说，有点不太好理解。我之前虽然学习了一段时间的nodejs，但现在已经快忘光了，这几天拾起来的时候，还是很痛苦的，资料很少。现在只能算是有所了解，讲的可能不全对。
Javascript在语言层面没有提供模块机制，当代码多了以后，很难组织起来。比如在服务器端，将不同的功能分在不同的文件中以复用，或者在浏览器端，想把一个大文件分成多个，按需下载。但文件之间依赖关系、如何向外暴露对象供使用等，都没有规定。所以人们做了很多尝试，制定了一些规范来解决这个问题，其中比较有名的有两个名词，一个commonjs，一个是amd。
关于它们的介绍和相互关系，可以看这篇文章，说得很好：
简单地说，commonjs是一套规范，它定义了如何将代码组织为模块，如何向外暴露对象，如果依赖。在导入模块时，又可以分为同步和异步，一般可认为commonjs代表同步，AMD代表异步。服务器端代码更需要同步，浏览器那边更需要异步，在typescript的编译器中同时支持这两种方式。但commonjs是默认的，所以我前面说感觉它更偏向后端。
当我们在代码中使用了module()函数时，Typescript可以把它们编译为commonjs或amd方式的调用。比如：
/// &reference path="./libs/underscore.d.ts"/&
import _ = module("underscore");
当我们这样编译时：
tsc test.ts
它会生成这样的js代码：
var _ = require("underscore");
当我们指定为amd时：
tsc --module amd test.ts
它会生成这样的代码：
define(["require", "exports", "underscore"], function(require, exports, _____) {
var _ = _____;
在服务器端我们一般用前者，在浏览器端一般使用后者（或者完全不用module）。
不使用Module
如果我们在typescript使用了module函数，则生成的代码在浏览器端执行时，需要有一些script loader的支持。对于浏览器端代码，我们一般生成amd风格的代码，所以需要找一个支持amd的库放在前端。这样的库有很多，比如：
JSLocalnet
可根据自己的需要使用。我尝试了，不喜欢它的网站风格，写了那么多，但总是没说重点。比如关于它的配置，我们需要面对的第一个问题，可是它就是没给一个示例出来，让我在网上到处找别人写的例子。要想用好它，可能得先好好读它的文档，再到网上找别人的代码看。
所以最后我还是按照传统的方式来组织代码，在typescript中完全不使用module函数，而用了全局声明的方式：
/// &reference path="../../libs/underscore.browser.d.ts"/&
declare var _:UnderscoreS
/// &reference path="../../libs/underscore.browser.d.ts"/&
import _ = module("underscore")
当使用declare var来声明某变量时，即假设它已经在全局中可用，后面的UnderscoreStatic则是在underscore.browser.d.ts这个文件中定义的，关于underscore提供的所有方法的接口描述。
使用这种方式时，我们保证这段js在浏览器端运行时，已经导入了underscore.js。我们可以按照传统的方式来引用js文件：
&script src="http://freewind.me/blog//.../jquery.js"&&/script&
&script src="http://freewind.me/blog//.../underscore.js"&&/script&
&script src="http://freewind.me/blog//.../myapp.js"&&/script&
如果你既不想用requirejs等库，又想异步下载js文件，可以考虑这个库：
headjs不支持commonjs/amd，它有自己的异步下载的api，十分简洁好用。配合我上面的declare var方式，很好用。
这里给出一个简单的例子（headjs+jquery+underscore+angularjs+本站js）：
&script src="http://freewind.me/public/javascripts/head-0.99.min.js"&&/script&
&script type="text/javascript"&
head.js('/public/libs/jquery-ui-1.8.24/js/jquery-1.8.2.min.js',
'/public/libs/jquery-ui-1.8.24/js/jquery-ui-1.8.24.custom.min.js',
'/public/libs/underscore/1.4.3/underscore.min.js',
'/public/libs/bootstrap-2.1.1/js/bootstrap.min.js',
'/public/libs/angular-1.0.2/angular.min.js',
'/public/libs/angular-ui-0.3.2/angular-ui.min.js',
'/public/libs/marked.js',
'/public/libs/slickswitch/js/jquery.slickswitch.js',
'/public/libs/html5.js',
'/public/libs/flot/0.7/jquery.flot.js',
'/jsRoutes.js',
'/public/libs/moment/1.7.2/moment.min.js',
'/public/javascripts/angular-config.js',
'/public/javascripts/app.js');
head.ready(function () {
app.value("AdminCommonData", {
"menuTree": [],
在head.js()方法中，可传入多个js路径，它们并行下载，但按照声明顺序依次执行。可以把一个head.js()分开写成多个。head.ready()方法将会在所有js下载完成后执行里面的回调函数。
headjs有一个非常好用的特性，即可以把head.js()放在head.ready()的后面：
head.js(".../a.js");
head.ready(function() { console.log('I'm ready')});
head.js(".../b.js");
其中的head.ready()函数，虽然写在"b.js"前面，但还是会等到b.js下载并执行完后，才会执行。
如果我们的模板引擎使用了继承关系，则该特性很有用。比如在play中有一个layout.html文件和内页main.html，我们可以这样组织代码。
layout.html
&script src="http://freewind.me/public/javascripts/head-0.99.min.js"&&/script&
&script type="text/javascript"&
head.js('/public/libs/jquery-ui-1.8.24/js/jquery-1.8.2.min.js'
// 所有全局通用的js放在这里);
#{doLayout /}
head.ready(function() {
// 最后执行的启动代码放在最后
#{extends "layout.html" /}
head.js(".../main.js",
// 仅在本页中使用的js文件)
head.ready(function() {
// 可以在这里为layout.html最后的函数调用准备数据
在这里要补充一句，如果你使用angularjs+headjs的话，不能在&html&上声明ng-app="xxx"，而应该在layout.html中最后的函数中调用：
&script type="text/javascript"&
head.ready(function () {
angular.bootstrap(document, ["MyModule", "MyAnother"]);
注意一定要把&html&上的ng-app去掉。我之前尝试把它们两个结合使用总是失败，这次终于找到原因。
如果你仔细看了前面的例子，会发现有一些以三个斜杠开头的代码，如：
/// &reference path="../../libs/underscore.browser.d.ts"/&
它是一种注释，告诉typescript编译器，当前文件使用了哪些声明文件，以帮助编辑器提示信息，及编译器检查类型。这种注释很重要，如果后面的路径不对，则编译会失败。
引用的文件以.d.ts结尾，它们是一种声明文件，就像是c语言中的header文件，只包含了类或函数的签名，而没有实际内容，用于编辑器提示和编译器验证。它们的内容形如：
declare interface UnderscoreVoidListIterator {
(element : any, index : number, list : any[]) :
declare interface UnderscoreMemoListIterator {
(memo : any, element : any, index : number, list : any[]) :
declare interface UnderscoreListIterator {
(element : any, index : number, list : any[]) :
这种文件很重要，因为我们要想使用第三方的js库，一般都需要手动做出这样的声明文件，才能在typesafe的环境中使用它们。只需要以注释的方式写上即可，不需要在实际代码中声明或引用什么。
现在在idea中，这些引用还得手动去写，不太方便，我想tsc或者编辑器应该会对它进行增强。
下载第三方js库的声明文件
现在有很多优秀的第三方js库，我们要在typescript中使用它们，难道要一一手动创建这些文件吗？这个工作量可不小。
好在已经有人这么做并把成果开源出来了，我们可以直接下载它们，放在自己的项目中，再加上引用注释即可。
包含几乎全部的：，你应该把它clone到本地。
使用方法：把它们clone到本地，放在某个地方（比如工具目录中），然后在我们自己的typescript中添加以一个引用即可：
/// &reference path="../../libs/AngularTS.module.d.ts"/&
/// &reference path="../../libs/underscore.browser.d.ts"/&
创建自己的声明文件
如果我们用typescript写了一些模块，想让别人调用，除了把整个代码复制给他以外，还可以生成一个声明文件(.d.ts)，让他使用该声明文件即可。tsc提供了选项让我们生成.d.ts:
tsc --declaration my.ts
如果一切正常，将会在当前目录下产生一个my.d.ts文件，里面包含了my.ts中定义的代码的接口声明。
Typescript在javascript的基础上提供了类型系统，但它同时也支持动态类型。如果我们把一个变量或者返回值声明为any，则它表示“动态类型”，编译器不会检查它的类型信息，但我们也得不到编辑器的提示信息。
function(obj: any) {
obj.non_exist_method();
如代码中所示，obj被声明为any，虽然内部调用了一个不存在的方法，编译器也不会提示有误，只有在运行期才知道。
虽然typescript支持静态类型，但我们并不需要像java那样，在每个地方都要声明类型，因为typescript可以推断：
var name = "Freewind";
则name会被认为是string类型.
function myname(name:string) {
则myname函数的返回值被认为是string类型。
但我们在声明的地方，最好还是加上类型，以后看起来会比较清楚。
可表示动态类型
true或false
字符串数组
等于{a: b:}
{ a:string, b: }
{ a:string, ()=& }
后面那个是函数
() =& void
表示形如 function() {} 这样的函数
(string) =& number
表示形如 function(name:string) { return 10; } 这样的函数
{ [string]: }
表示一个object，它的key为string，值为数学，形如：
{ "aaa": 111, "bbb": 222}
this.filter((todo: Todo) =& todo.get('done'));
使用grunt自动编译typescript
如果你使用的编辑器还不支持自动编译typescript，可以使用grunt来编译，还可以进行更多的任务，如对产生的js进和合并、压缩等工作，十分方便。
具体可参看这篇文章：
Typescript待实现的特性
仅以目前的typescript来说，虽然在类型方面做的不错，但是语言本身还有很多可以改进的地方。比如简化语法，提供更好用的控制结构，对异步进行更好的支持等。如果可以在语言层面改进javascript那些容易出错、不方便的地方，我想会有更多人采用typescript。
，可以看到呼声较高的特性有：
实现await关键字：可以让异步调用变得简单
for … of：js内置的for(x in y)对于数组来说，容易产生问题，但我们又需要经常遍历数组，所以提供for of代替
内置压缩js的功能
protected关键字
生成xml格式的文档
extension methods：可以让我们的函数调用更加流畅，比如underscore的那些方法 ，就可以写成 array.filter(function(item) {return ..})
allow module.exports
string interpolatio and block strings
support for abstract classes
macros：利用macro，可以扩展语言本身
其中我对2,3,6,10,11这几项很感兴趣，如果它们实现了，则typescript的吸引力会大大增强。
TypeScript展望
对于Typescript的未来，我还是比较看好的，因为对于服务器端的编程，类型系统是很重要的，可以让我们的代码质量变得更高，让不同版本之间的库的兼容性也更好。
我之前使用nodejs感觉很郁闷的一点是，某一个库升级了（如改变了api接口），则相关的库都出错了，而想要找出问题很难，只能通过单元测试找到问题，再查看文档解决。而这样的问题在java中出现的就比较少，因为有类型系统的保证，如果接口改变了，直接编译都会出错。
使用typescript后，让nodejs代码也具有的这样的能力，对于社区的前进是很有帮助的。而且对于java/c#程序员来说，这是很有吸引力的。
随着以后typescript相关编辑器、工具的成熟，可以预见它将和coffeescript一样，成为javascript开发人员的标准备选，也许会有一些库和工具直接支持typescript，那样的话就会有更多人来使用typescript了。
如果你对typescript也感兴趣，欢迎加入QQ群：Typescript热情交流群（）
相关工具还不够成熟
经过几天的试用，发现现在使用它也还是不够方便。主要有几下几点：
Idea的编辑器支持typescript的高亮、格式化及代码提示，但还不能像java那样，实时显示错误，所以只能借助第三方工具（比如gruntjs）来编译并显示错误。这种方式对于一个静态类型的语言来说，不是很方便，因为类型方面的错误很容易犯，如果分成两步走，来回切换工具会让定位很麻烦。
我使用的是gruntjs，它基于nodejs，有typescript插件可以编译typescript文件。但是由于nodejs在windows平台上的有一个bug导致无法全面取得错误信息，当ts文件有错误时，只能取到第一行（错误行号），而拿不到具体信息。有时候怎么看那一行都不知道错在哪儿，只好又另开一个cmd，调用tsc命令去编译，很麻烦。
更麻烦的事情来了。在gruntjs中编译提示有误，但我手动调用tsc编译又没错，调试很久都不找不到原因。gruntjs就没法用了。
Typescript不支持将多个ts文件合并生成一个js并压缩，所以我只能借助gruntjs工具实现，但gruntjs又有点问题。
Typescript语言本身还存在一些问题。比如array明明有length属性，但不能被识别，导致明明与它匹配的接口会编译出错。另外，一个any[]类型的数组，应该可以包含各种对象，但放入一个string和一个函数后，提示有误，必须在string前加一个&any&（可能是因为Typescript目前还不支持泛型，导致推断有误）
综上所述，目前使用typescript进行前端开发，问题还比较多，各种小问题都会影响开发效率。所以看样子，只能老老实实地使用javascript（或者coffeescript?），等到typescript成熟一些后再用它。
原文地址：, 感谢原作者分享。
您可能感兴趣的代码