很多開發者對新生事物，會有畏懼的心情，其實，靜下心來，大家會發現，編程語言之間都是相通的，大同小異。因最近Cocos游戲開發建議使用TypeScript，故給大家介紹下TypeScript，幫助大家快速入門。
TypeScript是由微軟開發的自由和開源的編程語言，是JAVAScript的一個超集，支持 ECMAScript 6標準。設計目標是開發大型應用，它可以編譯成純JavaScript，編譯出來的 JavaScript可以運行在任何瀏覽器上。
一、 JavaScript 與 TypeScript 的區別
TypeScript是JavaScript的超集，擴展了JavaScript的語法，因此現有的JavaScript代碼可與TypeScript一起工作無需任何修改，TypeScript 通過類型注解提供編譯時的靜態類型檢查。TypeScript可處理已有的JavaScript代碼，并只對其中的TypeScript代碼進行編譯。
1. TypeScript與JavaScript 基礎類型的區別
JavaScript是一種弱類型的編程語言，其基本數據類型有number、string、boolean、Array、null、undefined。
而TypeScript 遵循強類型，如果將不同的類型賦值給變量會編譯錯誤，如下實例：
var num:number = "bycw"; // 這個代碼會編譯錯誤
但是，為了保持跟JavaScript的弱類型同步性，TypeScript中增加了any類型，表示任意類型，聲明為 any 的變量可以賦予任意類型的值。如下：
var a : any = "bycw"; // 將字符串賦值給any類型的變量a
a = 666; // 將數值賦值給any類型的變量a
需要注意的是：TypeScript會進行類型推斷，也就是當類型沒有給出時，TypeScript 編譯器利用類型推斷來推斷類型。如果由于缺乏聲明而不能推斷出類型，那么它的類型被視作默認的動態 any 類型。如下：
var num = 2; // 類型推斷為 number
console.log("num 變量的值為 "+num);
num = "12"; // 編譯錯誤，因為推斷類型為number，再賦值字符串
console.log(num);
編譯時，報錯：error TS2322: Type '"12"' is not assignable to type 'number'.表示字符串“12”不能賦值給一個number類型的變量。
除此外，TypeScript還支持聯合類型。
聯合類型（Union Types）可以通過管道(|)將變量設置多種類型，賦值時可以根據設置的類型來賦值。注意：只能賦值指定的類型，如果賦值其它類型就會報錯?？梢酝ㄟ^聯合參數限定函數參數的類型。
創建聯合類型的語法格式如下： Type1|Type2|Type3
TypeScript聲明一個聯合類型：
var val:string|number
val = 12
console.log("數字為 "+ val)
val = "Runoob"
console.log("字符串為 " + val)
2. TypeScript與JavaScript 基礎語法的區別
相對于JavaScript，TypeScript語義化表述更清晰，更便于閱讀理解，也方便使用其它面向對象編程語言的開發者快速上手。
【1】在變量聲明和方法聲明時，TypeScript需要在變量名及方法名后加上冒號(:)及數據類型。
【2】在語法結構上，TypeScript 還支持 for…of 、forEach、every 和 some 循環。
for...of 語句創建一個循環來迭代可迭代的對象。在 ES6 中引入的 for...of 循環，以替代 for...in 和 forEach() ，并支持新的迭代協議。for...of 允許你遍歷 Arrays（數組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的數據結構等。
TypeScript for...of 循環
let someArray = [1, "string", false];
for (let entry of someArray) {
console.log(entry); // 1, "string", false
}
forEach、every 和 some 是 JavaScript 的循環語法，TypeScript 作為 JavaScript 的語法超集，當然默認也是支持的。
因為 forEach 在 iteration 中是無法返回的，所以可以使用 every 和 some 來取代 forEach。
TypeScript forEach 循環
let list = [4, 5, 6];
list.forEach((val, idx, array) => {
// val: 當前值
// idx：當前index
// array: Array
});
TypeScript every 循環
let list = [4, 5, 6];
list.every((val, idx, array) => {
// val: 當前值
// idx：當前index
// array: Array
return true; // Continues
// Return false will quit the iteration
});
當然，相對于JavaScript、TypeScript做了一些優化和改進，在本文后續內容中給大家逐一解析。（參見本文后續TypeScript新增特性）
二、 TypeScript與Java等編程語言的區別
對于之前使用Java、C#等編程語言的學習者幾乎可以在幾分鐘內快速上手。比如其變量和方法聲明與Java語法的區別如下：
TypeScript中聲明變量： var county: string= “china”;
Java中聲明變量： String county = “china”;
TypeScript中聲明方法： public update(dt : number) : void{}
Java中聲明變量： public void update(dt){}
簡言之，相對于Java，TypeScript將數據類型放到了變量名后，將返回值類型放到了方法名后且在中間插入了一個:，學Java的同學是不是感覺被山寨了??！
三、 TypeScript新增特性
1. 可選參數和默認參數
可選參數：在 TypeScript 函數里，如果我們定義了參數，則我們必須傳入這些參數，除非將這些參數設置為可選，可選參數使用問號標識 ？。
以下實例，我么將 lastName 設置為可選參數：
function buildName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName("Bob"); // 正確
let result2 = buildName("Bob", "Adams", "Sr."); // 錯誤，參數太多了
let result3 = buildName("Bob", "Adams"); // 正確
可選參數必須跟在必需參數后面。 如果上例我們想讓 firstName 是可選的，lastName 必選，那么就要調整它們的位置，把 firstName 放在后面。如果都是可選參數就沒關系。
默認參數：我們也可以設置參數的默認值，這樣在調用函數的時候，如果不傳入該參數的值，則使用默認參數，語法格式為：
function function_name(param1[:type],param2[:type] = default_value) {
}
注意：參數不能同時設置為可選和默認。
以下實例函數的參數 rate 設置了默認值為 0.50，調用該函數時如果未傳入參數則使用該默認值：
function calculate_discount(price:number,rate:number = 0.50) {
var discount = price * rate;
console.log("計算結果: ",discount);
}
calculate_discount(1000)
calculate_discount(1000,0.30)
編譯以上代碼，得到以下 JavaScript 代碼：
輸出結果為：function calculate_discount(price, rate) {
if (rate === void 0) { rate = 0.50; }
var discount = price * rate;
console.log("計算結果: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);
計算結果: 500
計算結果: 300
3. 剩余參數
有一種情況，我們不知道要向函數傳入多少個參數，這時候我們就可以使用剩余參數來定義。剩余參數語法允許我們將一個不確定數量的參數作為一個數組傳入。這個語法跟Java中JDK1.5版本新增功能一致。
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "macKinzie");
函數的最后一個命名參數 restOfName 以 ... 為前綴，它將成為一個由剩余參數組成的數組，索引值從0（包括）到 restOfName.length（不包括）。
function addNumbers(...nums:number[]) {
var i;
var sum:number = 0;
for(i = 0;i<nums.length;i++) {
sum = sum + nums[i];
}
console.log("和為：",sum)
}
addNumbers(1,2,3)
addNumbers(10,10,10,10,10)
編譯以上代碼，得到以下 JavaScript 代碼，如下：
function addNumbers() {
var nums = [];
for (var _i = 0; _i < arguments.length; _i++) {
nums[_i] = arguments[_i];
}
var i;
var sum = 0;
for (i = 0; i < nums.length; i++) {
sum = sum + nums[i];
}
console.log("和為：", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);
輸出結果為：
和為： 6
和為： 50
4. Lambda 函數
Lambda 函數也稱之為箭頭函數。箭頭函數表達式的語法比函數表達式更短。這一點跟Java中JDK1.8版本后的新增特性一致。
函數只有一行語句： ( [param1, parma2,…param n] )=>statement;
以下實例聲明了 lambda 表達式函數，函數返回兩個數的和：
var foo = (x:number)=>10 + x
console.log(foo(100)) //輸出結果為 110
編譯以上代碼，得到以下 JavaScript 代碼：
var foo = function (x) { return 10 + x; };
console.log(foo(100)); //輸出結果為 110
輸出結果為：110
5. 數組解構
我們也可以把數組元素賦值給變量，如下所示：
var arr:number[] = [12,13]
var[x,y] = arr // 將數組的兩個元素賦值給變量 x 和 y
console.log(x, y)
編譯以上代碼，得到以下 JavaScript 代碼：
var arr = [12, 13];
var x = arr[0], y = arr[1]; // 將數組的兩個元素賦值給變量 x 和 y
console.log(x,y);
輸出結果為：12 , 13
四、 面向對象相關設計
TypeScript 是面向對象的 JavaScript。
TypeScript 支持面向對象的所有特性，比如 類、接口等。
TypeScript在面向對象設計這塊跟Java如出一轍。Java基礎好的同學，可以無痛過渡。
1. 類
類描述了所創建的對象共同的屬性和方法。跟Java中幾乎完全一樣，僅僅構造函數略有區別。
class Car {
// 字段
engine:string;
// 構造函數
constructor(engine:string) {
this.engine = engine
}
// 方法
disp():void {
console.log("發動機為 : "+this.engine)
}
}
使用 new 關鍵字來實例化類的對象，語法格式如下：
var object_name = new class_name([ arguments ])
類實例化時會調用構造函數，例如：
var obj = new Car("Engine 1")
類中的字段屬性和方法可以使用 . 號來訪問：
// 訪問屬性
obj.field_name
// 訪問方法
obj.function_name()
其它封裝、繼承、多態等跟Java中幾乎一毛一樣。在此不做過多介紹。只是細微區別，例如默認訪問修飾符為public（默認） : 公有，可以在任何地方被訪問。
2. TypeScript 接口
接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應該是抽象的，需要由具體的類去實現，然后第三方就可以通過這組抽象方法調用，讓具體的類執行具體的方法。TypeScript 接口定義如下：
interface interface_name {
}
以下實例中，我們定義了一個接口 IPerson，接著定義了一個變量 customer，它的類型是 IPerson。
customer 實現了接口 IPerson 的屬性和方法。
interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
var customer:IPerson = {
firstName:"Tom",
lastName:"Hanks",
sayHi: ():string =>{return "Hi there"}
}
console.log("Customer 對象 ")
console.log(customer.firstName)
console.log(customer.lastName)
console.log(customer.sayHi())
var employee:IPerson = {
firstName:"Jim",
lastName:"Blakes",
sayHi: ():string =>{return "Hello!!!"}
}
console.log("Employee 對象 ")
console.log(employee.firstName)
console.log(employee.lastName)
需要注意接口不能轉換為 JavaScript。 它只是 TypeScript 的一部分。
