523
TypeScript快餐教程 (1) - 初識
TypeScript快餐教程 (1) - 初識
JavaScript，更廣泛點也許可以說是ECMA Script的各種實現，從誕生到現在，一直就沒斷過爭議。ECMA Script 4的夭折正是這些爭論嚴重程度的重要體現。
Anyway，不斷爭議如何，JavaScript的地位一直不曾被撼動。針對JavaScript存在的問題，可編譯成JavaScript的語言一直就前仆後繼。
這其中，DART，CoffeeScript和TypeScript是其中最有名的三個。
DART由Google推出，設計者是大名鼎鼎的v8引擎作者Lars Bak.
DART很像是一種傳統的麵向對象式的語言，比如很像Java。
我們來看個小例子：
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的優勢：
- 在Google中被廣泛使用
- 在Fuchsia操作係統中被用來寫應用代碼
- 語法特別適合Java/C#用戶學習
CoffeeScript是一門以發揚JavaScript的good part的小型語言。作者有比較好的Ruby功底，所以CoffeeScript寫出來有較濃的動態語言的風格。
例：
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);
}
非侵入式的類型
請允許我迫不及待地先介紹非侵入式的類型係統。
非侵入式，也就是說，一個類，實現某個接口，隻要實現了該接口要求的所有方法就可以了，並不需要像Java一樣明確地用implements來進行說明。Go語言中就是這樣做的，TypeScript也是如此，我們看個例子：
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;
數字和數組
數值類型與JavaScript一樣，隻支持number類型。
數組可以用數組方式寫，也可以用泛型的方式寫：
var num1: number = 10;
var num2: any = 20;
var num3: number[] = [1, 2, 3];
var num4: Array<number> = [4, 5, 6];
布爾類型
TypeScript的布爾類型，理論上隻支持true和false。
但是實測下來，賦null和undefined也是可以的。
例：
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，這些類型信息就將全部丟失。
最後更新：2017-11-02 21:03:29