在新型应用程序中使用TypeScript

在新型应用程序中使用TypeScript2014-06-10 MSDN Rachel AppelJavaScript 原本的设计用途是在小型文档对象模型（DOM）树中操作 DOM。而随着时间的推移，JavaScript 已经广为流行，如今成为开发从小型市场应用到大型企业应用的各种应用程序的主流语言。随着 JavaScript 流行热度的持续增加，对其开发者提供各种工具和语言的支持也应运而生，TypeScript 就是这样一种语言。
TypeScript 是什么？她如何工作？

TypeScript 是 JavaScript 的一个超集，您可以通过它编写和生成更具强类型和面向对象特性的 JavaScript 代码，但仍保留开发者喜爱的（或有时是憎恨的）JavaScript 的灵活性。 TypeScript 扩展了 JavaScript 的用途范围，让它进入企业应用、网站开发和以往由于缺少相关工具而显得笨拙无力的领域。

Tsc.exe 是一个开源的 TypeScript 编译器/代码生成器，可在 typescriptlang.org 网站下载。 TypeScript 是独立编译器，因此任何时候都可以打开命令提示符窗口并以适当参数执行 tsc.exe，如下所示：

tsc.exe --out outputfile.js inputfile.ts

先编写 TypeScript 代码，然后放到编译器里“转”一下，出来的就是可运行的 JavaScript 代码。尽管 TypeScript 是个代码生成器，但它不输出不必要的代码（这不像可视化设计工具的惯常行为），也不转换变量名和调整变量顺序。这表明最终输出成果更容易调试，因为输出的就是直白的 JavaScript 代码。

JavaScript 已经是面向对象语言，但其原型式语法让很多开发者大倒胃口。为解决这一问题，TypeScript 向 JavaScript 增加了诸如类和接口等功能，这些也是对 ECMAScript 6 （ES6）标准的建议功能。这让 TypeScript 变成了染上语法成分的代码生成器，在大多数情况下减少了要维护的 JavaScript 代码量。例如，以下代码使用了原型式语法：

function Animal（name, species, habitat） {this.name = name;this.species = species;this.habitat = habitat;}Animal.prototype.sayHello = function（）{console.log（"RAWR！"）;}var animal = new Animal（"Fluffy", "Velociraptor ", "Everywhere.Run and hide."）;animal.sayHello（）;

上例开头是个构造函数，这是一种使用得极其频繁的 JavaScript 模式，其中没有其他面向对象语言中常见的封装类定义。在构造函数中，使用 this 关键字定义了与类实例成员相似的变量。在构造函数之外，是实际的 prototype 方法，它将 JavaScript 方法绑定到类上。在 TypeScript 中，利用类可以编写与上例相同的代码，但语法更自然，如图 1 所示。

图 1 TypeScript 类

class Animal{name: string;species: string;habitat: string;constructor（name: string, species: string, habitat: string）{this.name = name;this.species = species;this.habitat = habitat;}sayhello（）{Console.log（"RAWR"）;}}

对许多开发者来说，图 1 中的 TypeScript 代码示例比相应传统 JavaScript 代码的可读性更好。很明显，以上代码起到了类定义和成员列表的作用，并显示了参数的类型。TypeScript 还提供了类型检查、接口、静态编译时检查、lambda 式表达式以及通常编译型（而非解释型）语言才有的好用功能。JavaScript 语言的这些扩展是有益的，因为它们可以让您避开常见的编码陷阱。

其他常见的 JavaScript 难题包括：当 JavaScript 全局命名空间中存在太多具有公共范围的变量，就会导致全局命名空间污染（这些问题似乎发生得太频繁了）。幸运的是，TypeScript 通过模块的实现帮助解决了这一问题，因为模块的行为类似命名空间，并且创建了防止全局混乱的闭包。TypeScript 中的模块划分为两种类型：内部模块和外部模块。内部模块包含当前文件中声明的代码，如要导入外部模块，必须在当前代码文件开头加入 ///<reference path= ‘path/reference-file.ts’ />。要声明模块，只需用 module 关键字并在末尾加花括号即可。TypeScript 模块如下所示：

module outerModule {"use strict";module innerModule {export function aFunction { s: string };export var variable = 1;}}

而生成的 JavaScript 如下所示：

var outerModule;（function （outerModule） {"use strict";var innerModule;（function （innerModule） {function aFunction（） { s: string }innerModule.aFunction = aFunction;innerModule.variable = 1;}）（innerModule || （innerModule = {}））;}）（outerModule || （outerModule = {}））;

上述代码创建了一个单体模块实例，可由 outerModule 命名空间中任何 Windows 应用商店的应用程序访问。如您所见，模块呈现为匿名函数（即 Immediately Invoked Function Expressions （IIFE））。任何以 export 指令标示的成员变量都可在全局范围访问，等价于 C# 的成员标以 internal 关键字（即：属于项目范围的）。