很多開發(fā)者對新生事物，會有畏懼的心情，其實，靜下心來，大家會發(fā)現(xiàn)，編程語言之間都是相通的，大同小異。因最近Cocos游戲開發(fā)建議使用TypeScript，故給大家介紹下TypeScript，幫助大家快速入門。

TypeScript是由微軟開發(fā)的自由和開源的編程語言，是JavaScript的一個超集，支持 ECMAScript 6標準。設計目標是開發(fā)大型應用，它可以編譯成純JavaScript，編譯出來的 JavaScript可以運行在任何瀏覽器上。

一、 JavaScript 與 TypeScript 的區(qū)別

TypeScript是JavaScript的超集，擴展了JavaScript的語法，因此現(xiàn)有的JavaScript代碼可與TypeScript一起工作無需任何修改，TypeScript 通過類型注解提供編譯時的靜態(tài)類型檢查。TypeScript可處理已有的JavaScript代碼，并只對其中的TypeScript代碼進行編譯。

1. TypeScript與JavaScript 基礎類型的區(qū)別

JavaScript是一種弱類型的編程語言，其基本數(shù)據(jù)類型有number、string、boolean、Array、null、undefined。

而TypeScript 遵循強類型，如果將不同的類型賦值給變量會編譯錯誤，如下實例：

var num:number = "bycw"; // 這個代碼會編譯錯誤

但是，為了保持跟JavaScript的弱類型同步性，TypeScript中增加了any類型，表示任意類型，聲明為 any 的變量可以賦予任意類型的值。如下：

var a : any = "bycw"; // 將字符串賦值給any類型的變量a

a = 666; // 將數(shù)值賦值給any類型的變量a

需要注意的是：TypeScript會進行類型推斷，也就是當類型沒有給出時，TypeScript 編譯器利用類型推斷來推斷類型。如果由于缺乏聲明而不能推斷出類型，那么它的類型被視作默認的動態(tài) 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還支持聯(lián)合類型。

聯(lián)合類型（Union Types）可以通過管道(|)將變量設置多種類型，賦值時可以根據(jù)設置的類型來賦值。注意：只能賦值指定的類型，如果賦值其它類型就會報錯。可以通過聯(lián)合參數(shù)限定函數(shù)參數(shù)的類型。

創(chuàng)建聯(lián)合類型的語法格式如下： Type1|Type2|Type3

TypeScript聲明一個聯(lián)合類型：

var val:string|number

val = 12

console.log("數(shù)字為 "+ val)

val = "Runoob"

console.log("字符串為 " + val)

2. TypeScript與JavaScript 基礎語法的區(qū)別

相對于JavaScript，TypeScript語義化表述更清晰，更便于閱讀理解，也方便使用其它面向對象編程語言的開發(fā)者快速上手。

【1】在變量聲明和方法聲明時，TypeScript需要在變量名及方法名后加上冒號(:)及數(shù)據(jù)類型。

【2】在語法結構上，TypeScript 還支持 for…of 、forEach、every 和 some 循環(huán)。

for...of 語句創(chuàng)建一個循環(huán)來迭代可迭代的對象。在 ES6 中引入的 for...of 循環(huán)，以替代 for...in 和 forEach() ，并支持新的迭代協(xié)議。for...of 允許你遍歷 Arrays（數(shù)組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的數(shù)據(jù)結構等。

TypeScript for...of 循環(huán)

let someArray = [1, "string", false];

for (let entry of someArray) {

console.log(entry); // 1, "string", false

}

forEach、every 和 some 是 JavaScript 的循環(huán)語法，TypeScript 作為 JavaScript 的語法超集，當然默認也是支持的。

因為 forEach 在 iteration 中是無法返回的，所以可以使用 every 和 some 來取代 forEach。

TypeScript forEach 循環(huán)

let list = [4, 5, 6];

list.forEach((val, idx, array) => {

// val: 當前值

// idx：當前index

// array: Array

});

TypeScript every 循環(huán)

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做了一些優(yōu)化和改進，在本文后續(xù)內(nèi)容中給大家逐一解析。（參見本文后續(xù)TypeScript新增特性）

二、 TypeScript與Java等編程語言的區(qū)別

對于之前使用Java、C#等編程語言的學習者幾乎可以在幾分鐘內(nèi)快速上手。比如其變量和方法聲明與Java語法的區(qū)別如下：

TypeScript中聲明變量： var county: string= “china”;

Java中聲明變量： String county = “china”;

TypeScript中聲明方法： public update(dt : number) : void{}

Java中聲明變量： public void update(dt){}

簡言之，相對于Java，TypeScript將數(shù)據(jù)類型放到了變量名后，將返回值類型放到了方法名后且在中間插入了一個:，學Java的同學是不是感覺被山寨了??！

三、 TypeScript新增特性

1. 可選參數(shù)和默認參數(shù)

可選參數(shù)：在 TypeScript 函數(shù)里，如果我們定義了參數(shù)，則我們必須傳入這些參數(shù)，除非將這些參數(shù)設置為可選，可選參數(shù)使用問號標識 ？。

以下實例，我么將 lastName 設置為可選參數(shù)：

function buildName(firstName: string, lastName?: string) {

if (lastName)

return firstName + " " + lastName;

else

return firstName;

}

let result1 = buildName("Bob"); // 正確

let result2 = buildName("Bob", "Adams", "Sr."); // 錯誤，參數(shù)太多了

let result3 = buildName("Bob", "Adams"); // 正確

可選參數(shù)必須跟在必需參數(shù)后面。 如果上例我們想讓 firstName 是可選的，lastName 必選，那么就要調(diào)整它們的位置，把 firstName 放在后面。如果都是可選參數(shù)就沒關系。

默認參數(shù)：我們也可以設置參數(shù)的默認值，這樣在調(diào)用函數(shù)的時候，如果不傳入該參數(shù)的值，則使用默認參數(shù)，語法格式為：

function function_name(param1[:type],param2[:type] = default_value) {

}

注意：參數(shù)不能同時設置為可選和默認。

以下實例函數(shù)的參數(shù) rate 設置了默認值為 0.50，調(diào)用該函數(shù)時如果未傳入?yún)?shù)則使用該默認值：

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. 剩余參數(shù)

有一種情況，我們不知道要向函數(shù)傳入多少個參數(shù)，這時候我們就可以使用剩余參數(shù)來定義。剩余參數(shù)語法允許我們將一個不確定數(shù)量的參數(shù)作為一個數(shù)組傳入。這個語法跟Java中JDK1.5版本新增功能一致。

function buildName(firstName: string, ...restOfName: string[]) {

return firstName + " " + restOfName.join(" ");

}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

函數(shù)的最后一個命名參數(shù) restOfName 以 ... 為前綴，它將成為一個由剩余參數(shù)組成的數(shù)組，索引值從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 函數(shù)

Lambda 函數(shù)也稱之為箭頭函數(shù)。箭頭函數(shù)表達式的語法比函數(shù)表達式更短。這一點跟Java中JDK1.8版本后的新增特性一致。

函數(shù)只有一行語句： ( [param1, parma2,…param n] )=>statement;

以下實例聲明了 lambda 表達式函數(shù)，函數(shù)返回兩個數(shù)的和：

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. 數(shù)組解構

我們也可以把數(shù)組元素賦值給變量，如下所示：

var arr:number[] = [12,13]

var[x,y] = arr // 將數(shù)組的兩個元素賦值給變量 x 和 y

console.log(x, y)

編譯以上代碼，得到以下 JavaScript 代碼：

var arr = [12, 13];

var x = arr[0], y = arr[1]; // 將數(shù)組的兩個元素賦值給變量 x 和 y

console.log(x,y);

輸出結果為：12 , 13

四、 面向對象相關設計

TypeScript 是面向對象的 JavaScript。

TypeScript 支持面向對象的所有特性，比如 類、接口等。

TypeScript在面向對象設計這塊跟Java如出一轍。Java基礎好的同學，可以無痛過渡。

1. 類

類描述了所創(chuàng)建的對象共同的屬性和方法。跟Java中幾乎完全一樣，僅僅構造函數(shù)略有區(qū)別。

class Car {

// 字段

engine:string;

// 構造函數(shù)

constructor(engine:string) {

this.engine = engine

}

// 方法

disp():void {

console.log("發(fā)動機為 : "+this.engine)

}

}

使用 new 關鍵字來實例化類的對象，語法格式如下：

var object_name = new class_name([ arguments ])

類實例化時會調(diào)用構造函數(shù)，例如：

var obj = new Car("Engine 1")

類中的字段屬性和方法可以使用 . 號來訪問：

// 訪問屬性

obj.field_name

// 訪問方法

obj.function_name()

其它封裝、繼承、多態(tài)等跟Java中幾乎一毛一樣。在此不做過多介紹。只是細微區(qū)別，例如默認訪問修飾符為public（默認） : 公有，可以在任何地方被訪問。

2. TypeScript 接口

接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應該是抽象的，需要由具體的類去實現(xiàn)，然后第三方就可以通過這組抽象方法調(diào)用，讓具體的類執(zhí)行具體的方法。TypeScript 接口定義如下：

interface interface_name {

}

以下實例中，我們定義了一個接口 IPerson，接著定義了一個變量 customer，它的類型是 IPerson。

customer 實現(xiàn)了接口 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 的一部分。