浅谈TypeScript
TypeScript为JavaScript的超集（ECMAScript6）， 这个语言添加了基于类的面向对象编程。TypeScript作为JavaScript很大的一个语法糖，本质上是类似于css的less、sass，都是为了易于维护、开发，最后还是编译成JavaScript。趁着周末的时间，浅尝了Typescript，下面是总结的一些特性。
Types
所有类型都是any类型的子类型，其他类型被分成元类型(primitive types)和对象类型(object types)。
1. 元类型包括 number, boolean, string, null, undefined
2. 对象类型为所有类、模块、接口和字面量类型；
编译前：
var b: any; // 所有JavaScript值 var c; // Same as c: any var a: number; // 显式类型 var d: boolean; var e: string; var f: string[] = ["hello", "world"]; //数组类型 var g: [number, string] = [3, "three"]; //元组类型 var h: string | number; //联合类型，几个不同的类型之中的一个 function k() : void{ //void是any的子类型，是undefined的超类型，与其他类型无关 alert('hi man'); }
编译后：
var b; // 所有JavaScript值 var c; // Same as c: any var a; // 显式类型 var d; var e; var f = ["hello", "world"]; //数组类型 var g = [3, "three"]; //元组类型 var h; //联合类型，几个不同的类型之中的一个 function k() { alert('hi man'); }
Expressions
表达式的东西比较多，但比较简单，仅列出一些关键的。
编译前：
var a = [2, 3, 4]; var b = [0, 1, ...a, 5, 6]; //=>[0, 1].concat(a, [5, 6]); var f: (s: string) => string = function (s) { return s.toLowerCase(); }; var X = x => Math.sin(x); //传入x值，返回计算结果 var q = 1; var p = 2; [q, p] = [p, q]; //解构赋值
编译后：
var a = [2, 3, 4]; var b = [0, 1].concat(a, [5, 6]); //=>[0, 1].concat(a, [5, 6]); var f = function (s) { return s.toLowerCase(); }; var X = function (x) { return Math.sin(x); }; //传入x值，返回计算结果 var q = 1; var p = 2; _a = [p, q], q = _a[0], p = _a[1]; //解构赋值 var _a;
Statements
语句的内容也比较简单
1. 块级作用域
2. 简单变量声明、解构变量声明
3. If,Do,While,For-In,For-Of,Continue,Break,Return,Switch,Throw,Try Statement
Functions
函数声明有三个关键地方：
编译前：
//默认值 function strange(x: number, y = 2, z = x + y) { return z; } console.log(strange(1)); console.log(strange(3,2,1)); //解构参数 function drawText({ text = "", location: [x, y] = [0, 0], bold = false }) { return text + ":" + x + y +":" + bold; } console.log(drawText({text:'lu',location:[1,2], bold:true})); //函数重载 function pick(x: string): string; function pick(x: number): string; function pick(x): any { if (typeof x == "string") { return x + "string"; } else if (typeof x == "number") { return x + 10000; } } console.log(pick("lu")); console.log(pick(1));
编译后：
//默认值 function strange(x, y, z) { if (y === void 0) { y = 2; } if (z === void 0) { z = x + y; } return z; } console.log(strange(1)); console.log(strange(3, 2, 1)); //解构参数 function drawText(_a) { var _b = _a.text,
text = _b === void 0 ? "" : _b,
_c = _a.location,
_d = _c === void 0 ? [0, 0] : _c,
x = _d[0],
y = _d[1],
_e = _a.bold,
bold = _e === void 0 ? false : _e; return text + ":" + x + y + ":" + bold; } console.log(drawText({ text: 'lu', location: [1, 2], bold: true })); function pick(x) { if (typeof x == "string") { return x + "string"; } else if (typeof x == "number") { return x + 10000; } } console.log(pick("lu")); console.log(pick(1));
Interfaces
接口还可以继承接口或类 （Java只能是接口）
编译前：
interface ClockInterface { currentTime: Date; setTime(d: Date); } //编译后是没有interface这东西的 class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { } }
编译后：
var Clock = (function () { function Clock(h, m) { } Clock.prototype.setTime = function (d) { this.currentTime = d; }; return Clock; })();
Classes
类的内容跟后端语言非常像了，举个例子体会下就行了。
编译前：
class Point { constructor(public x: number, public y: number) { } public toString() { return "x=" + this.x + " y=" + this.y; } } class ColoredPoint extends Point { constructor(x: number, y: number, public color: string) { super(x, y); } public toString() { return super.toString() + " color=" + this.color; } //static声明静态函数，不加static默认是实例函数 static f() { } } //泛型 class Pair<T1, T2> { constructor(public item1: T1, public item2: T2) { } public toString() { return "Pair"+ this.item1.toString() + this.item2.toString(); } } console.log(new Point(1,2).toString()); console.log(new ColoredPoint(1,2,'blue').toString()); console.log(new Pair<Point,ColoredPoint>(new Point(1,2),new ColoredPoint(1,2,'blue')).toString());
编译后：
var __extends = (this && this.__extends) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; var Point = (function () { function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return "x=" + this.x + " y=" + this.y; }; return Point; })(); var ColoredPoint = (function (_super) { __extends(ColoredPoint, _super); function ColoredPoint(x, y, color) { _super.call(this, x, y); this.color = color; } ColoredPoint.prototype.toString = function () { return _super.prototype.toString.call(this) + " color=" + this.color; }; //static声明静态函数，不加static默认是实例函数 ColoredPoint.f = function () { }; return ColoredPoint; })(Point); //泛型 var Pair = (function () { function Pair(item1, item2) { this.item1 = item1; this.item2 = item2; } Pair.prototype.toString = function () { return "Pair" + this.item1.toString() + this.item2.toString(); }; return Pair; })(); console.log(new Point(1, 2).toString()); console.log(new ColoredPoint(1, 2, 'blue').toString()); console.log(new Pair(new Point(1, 2), new ColoredPoint(1, 2, 'blue')).toString());
Enums
枚举类型
编译前：
enum Operator { ADD, DIV, MUL, SUB } function compute(op: Operator, a: number, b: number) { console.log("the operator is" + Operator[op]); } var b: boolean = true; compute(Operator.ADD, 1, 2); compute(Operator.ADD, 1, b); //编译时error，但能编译成js
编译后：
var Operator; (function (Operator) { Operator[Operator["ADD"] = 0] = "ADD"; Operator[Operator["DIV"] = 1] = "DIV"; Operator[Operator["MUL"] = 2] = "MUL"; Operator[Operator["SUB"] = 3] = "SUB"; })(Operator || (Operator = {})); function compute(op, a, b) { console.log("the operator is" + Operator[op]); } var b = true; compute(Operator.ADD, 1, 2); compute(Operator.ADD, 1, b); //编译时error，但能编译成js
Namespaces
命名空间：为了避免出现同名的变量或函数的冲突。
import：能将其他命名空间或命名空间的元素引入使用。
export：能将元素（变量、函数、类等）导出到命名空间上。
编译前：
namespace A { export class X { s: string } } namespace B { import Y = A; // Alias for namespace A import Z = A.X; // Alias for type and value A.X export var K = 2; export function f(){ var x = new Z(); } } //变量只有在使用了，才会被生成
编译后：
var A; (function (A) { var X = (function () { function X() { } return X; })(); A.X = X; })(A || (A = {})); var B; (function (B) { var Z = A.X; // Alias for type and value A.X B.K = 2; function f() { var x = new Z(); } B.f = f; })(B || (B = {}));
Modules
TypeScript模块支持了ECMAScript6模块，同时兼容CommonJS, AMD，System模块，可以编译成相应模块。
编译指令：
tsc module system main.ts （只需要编译main.ts就行，log.ts在编译时会被引入）
编译前：
main.ts
import { message } from "./log";
message("hello");
log.ts
export function message(s: string) { console.log(s); }
编译后：
由于有几种模块编译的指令，生成的代码并不相同，就不一一列出来。
Ambients
环境声明向TypeScript域中引入一个变量，这对生成的JS里将没有任何影响。
PS： document等JS内建的对象通过文件‘lib.d.ts’默认包含在TS中;
可以这样引入jQuery库
declare var $;
总结
Typescript的好处很明显，在编译时就能检查出很多语法问题而不是在运行时。不过由于是面向对象思路，如果是纯前端的人员（没有后端语言基础），那用起来应该是比较吃力的。有没有需求使用Typescript，我觉得写出代码是否易于维护、优雅，不在于用了什么框架、语言，在于开发者本身的架构思路。诚然好的框架和语言能间接帮助开发者写出规范的代码，但不代码就能写得好。所以如果Typescript能使团队易于协同开发，提高效率，那才考虑使用。如果都用得很痛苦，那还是简单的来。
附录
1. 安装Typescript
npm install -g typescript
2. GetSource
https://github.com/Microsoft/TypeScript/tree/v1.7.2
3. 文章里面的demo例子
下载地址：examples.zip
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
