TypeScript快餐教程 (1) – 初识

TypeScript快餐教程 (1) – 初识

JavaScript，更广泛点也许可以说是ECMA Script的各种实现，从诞生到现在，一直就没断过争议。ECMA Script 4的夭折正是这些争论严重程度的重要体现。

Anyway，不断争议如何，JavaScript的地位一直不曾被撼动。针对JavaScript存在的问题，可编译成JavaScript的语言一直就前仆后继。

这其中，DART，CoffeeScript和TypeScript是其中最有名的三个。

我们来看个小例子：

class Point{ 
    number x, y; Point(this.x, this.y); } class ColorPoint extends Point{ 
    number color; ColorPoint(this.x,this.y,this.color); } main(){ var p = new Point(1,1); }

怎么样？这个语法比ECMA Script 6还需要用constructor（）函数用起来更像Java吧？

DART的优势：

1. 在Google中被广泛使用
2. 在Fuchsia操作系统中被用来写应用代码
3. 语法特别适合Java/C#用户学习

a = 1 if a is yes print (a + ' is yes')

翻译成JavaScript代码，是这样的:

// Generated by CoffeeScript 1.10.0 (function() { 
    var a; a = 1; if (a === true) { print(a + ' is yes'); } }).call(this);

为了避免使用在JavaScript中比较trick的==操作符，CoffeeScript提供了is操作符来简化使用===带来的不快。
另外，为了方便程序员的使用，CoffeeScript提供了yes和on作为true的别名。
这样的小优化，在CoffeeScript中随处可见。

CoffeeScript的最要优势之一是Github的编辑器Atom代码中使用了大量的CoffeeScript。并且Atom的plugin可以使用CoffeeScript开发。

CoffeeScript的方向是更加自由，更像脚本语言一些，跟DART的像传统语言的方向基本上是背道而驰。

下面，当当当当，我们的主角TypeScript就要出场了。

TypeScript比起Google的Dart丝毫不逊色，因为它也是出自名门，是微软公司的产品。他的主要负责人可是比Lars Bak成名早得多的大牛Anders Hejlsberg。Anders曾经领导开发了伟大的产品Turbo Pascal，Delphi和.Net及C#.

TypeScript通过tsc工具，将TypeScript转化为javascript，再执行javascript.

TypeScriptv既然叫Type Script，有类型的脚本语言。我们这一讲就从类型说起。

Type Script的类型

可以声明多种类型 – 联合类型

Type Script中第一个不同于其他同类语言的一点是，它支持一个变量可能是多种类型。

比如我们有一个命令行参数，可能是一个字符串，也可能是一个字符串数组。这很好啊，我们就声明是两种类型就好了：

var paras: string | string[]; paras = "-a" paras = ["-a", "-t"]

类型守护

既然支持联合类型了，那么给静态检查就带来困难了啊。这可如何是好呢？TypeScript提供了类型守护功能，当Type Script能确认在一段代码中，确定是一个类型之后，就会对它按照这个类型来进行检查。

比如我们按paras是string的情况来判断，那么在这个if块中，paras就是string.例：

if (typeof paras === 'string') { console.log(paras + " is a string") } else { console.log(typeof paras); }

非侵入式的类型

interface Point{ 
    x: number; y: number; } class ColorPoint{ 
    color : Color constructor(public x ,public y){ this.color = Color.Black; } } var cp : Point = new ColorPoint(1,1)

Point接口定义了x,y两个变量。ColorPoint类只要同样定义x,y两个同类型变量，就算是实现了Point接口。在定义变量类型时，就可以用Point做他的类型了。

这样是不是比DART那样用extends来写更有趣一些呢？

不过，这只是TypeScript的语法糖，我们来看下tsc生成的js代码，Point直接被无视掉了：

var ColorPoint = (function () { 
    function ColorPoint(x, y) { 
    this.x = x; this.y = y; this.color = Color.Black; } return ColorPoint; }()); var cp = new ColorPoint(1, 1);

枚举类型

TypeScript支持枚举类型。从生成的代码来看，功能还是挺爽的。

例：TypeScript源码：

enum Color { Red, Green, Blue, Black, White, Yellow }; var color1: Color = Color.Blue;

生成的JavaScript代码：

var Color; (function (Color) { 
    Color[Color["Red"] = 0] = "Red"; Color[Color["Green"] = 1] = "Green"; Color[Color["Blue"] = 2] = "Blue"; Color[Color["Black"] = 3] = "Black"; Color[Color["White"] = 4] = "White"; Color[Color["Yellow"] = 5] = "Yellow"; })(Color || (Color = {})); ; var color1 = Color.Blue;

数字和数组

var num1: number = 10; var num2: any = 20; var num3: number[] = [1, 2, 3]; var num4: Array 
  
    = [ 
   4, 
   5, 
   6]; 
  

布尔类型

例：

var b1 : boolean = undefined; var b2 : boolean = null; var b3 : boolean = false; var b4 : boolean = true;

TypeScript是一门检查型的语言

TypeScript因为最终要生成JavaScript代码，所以很多都是一些编译期的检查。当生成JavaScript代码时，这些信息就丢失了。

比如上面布尔型的例子，生成的JavaScript代码，会把类型信息全部丢掉：

var b1 = undefined; var b2 = null; var b3 = false; var b4 = true;

数值的例子也是一样：

var num1 = 10; var num2 = 20; var num3 = [1, 2, 3]; var num4 = [4, 5, 6];

所以，总结起来，对于基本类型，TypeScript主要是进行编译期检查，包括联合类型和类型守护皆是如此。一旦编译通过生成JavaScript，这些类型信息就将全部丢失。