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

TypeScript是由微軟開發(fā)的自由和開源的編程語(yǔ)言，是JavaScript的一個(gè)超集，支持 ECMAScript 6標(biāo)準(zhǔn)。設(shè)計(jì)目標(biāo)是開發(fā)大型應(yīng)用，它可以編譯成純JavaScript，編譯出來(lái)的 JavaScript可以運(yùn)行在任何瀏覽器上。

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

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

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

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

而TypeScript 遵循強(qiáng)類型，如果將不同的類型賦值給變量會(huì)編譯錯(cuò)誤，如下實(shí)例：

var num:number = "bycw";? ? // 這個(gè)代碼會(huì)編譯錯(cuò)誤

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

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

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

需要注意的是：TypeScript會(huì)進(jìn)行類型推斷，也就是當(dāng)類型沒有給出時(shí)，TypeScript 編譯器利用類型推斷來(lái)推斷類型。如果由于缺乏聲明而不能推斷出類型，那么它的類型被視作默認(rèn)的動(dòng)態(tài) any 類型。如下：

var num = 2;? ? // 類型推斷為 number

console.log("num 變量的值為 "+num);

num = "12";? ? // 編譯錯(cuò)誤，因?yàn)橥茢囝愋蜑閚umber，再賦值字符串

console.log(num);

編譯時(shí)，報(bào)錯(cuò)：error TS2322: Type '"12"' is not assignable to type 'number'.表示字符串“12”不能賦值給一個(gè)number類型的變量。

除此外，TypeScript還支持聯(lián)合類型。

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

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

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

var val:string|number

val = 12

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

val = "Runoob"

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

給大家推薦個(gè)學(xué)習(xí)交流群點(diǎn)擊鏈接加入群聊【cocos/unity交流群】

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

相對(duì)于JavaScript，TypeScript語(yǔ)義化表述更清晰，更便于閱讀理解，也方便使用其它面向?qū)ο缶幊陶Z(yǔ)言的開發(fā)者快速上手。

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

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

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

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)語(yǔ)法，TypeScript 作為 JavaScript 的語(yǔ)法超集，當(dāng)然默認(rèn)也是支持的。

因?yàn)?forEach 在 iteration 中是無(wú)法返回的，所以可以使用 every 和 some 來(lái)取代 forEach。

TypeScript forEach 循環(huán)

let list = [4, 5, 6];

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

? ? // val: 當(dāng)前值

? ? // idx：當(dāng)前index

? ? // array: Array

});

TypeScript every 循環(huán)

let list = [4, 5, 6];

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

? ? // val: 當(dāng)前值

? ? // idx：當(dāng)前index

? ? // array: Array

? ? return true; // Continues

? ? // Return false will quit the iteration

});

當(dāng)然，相對(duì)于JavaScript、TypeScript做了一些優(yōu)化和改進(jìn)，在本文后續(xù)內(nèi)容中給大家逐一解析。（參見本文后續(xù)TypeScript新增特性）

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

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

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

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

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

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

簡(jiǎn)言之，相對(duì)于Java，TypeScript將數(shù)據(jù)類型放到了變量名后，將返回值類型放到了方法名后且在中間插入了一個(gè):，學(xué)Java的同學(xué)是不是感覺被山寨了?。?/p>

三、 TypeScript新增特性

1.? 可選參數(shù)和默認(rèn)參數(shù)

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

以下實(shí)例，我么將 lastName 設(shè)置為可選參數(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.");? // 錯(cuò)誤，參數(shù)太多了

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

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

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

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

}

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

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

function calculate_discount(price:number,rate:number = 0.50) {

? ? var discount = price * rate;

? ? console.log("計(jì)算結(jié)果: ",discount);

}

calculate_discount(1000)

calculate_discount(1000,0.30)

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

輸出結(jié)果為：function calculate_discount(price, rate) {

? ? if (rate === void 0) { rate = 0.50; }

? ? var discount = price * rate;

? ? console.log("計(jì)算結(jié)果: ", discount);

}

calculate_discount(1000);

calculate_discount(1000, 0.30);

計(jì)算結(jié)果:? 500

計(jì)算結(jié)果:? 300

3.? 剩余參數(shù)

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

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

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

}

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

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

輸出結(jié)果為：

和為： 6

和為： 50

4.? Lambda 函數(shù)

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

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

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

var foo = (x:number)=>10 + x

console.log(foo(100))? ? ? //輸出結(jié)果為 110

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

var foo = function (x) { return 10 + x; };

console.log(foo(100)); //輸出結(jié)果為 110

輸出結(jié)果為：110

5.? 數(shù)組解構(gòu)

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

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

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

console.log(x, y)

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

var arr = [12, 13];

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

console.log(x,y);

輸出結(jié)果為：12 , 13

四、 面向?qū)ο笙嚓P(guān)設(shè)計(jì)

TypeScript 是面向?qū)ο蟮?JavaScript。

TypeScript 支持面向?qū)ο蟮乃刑匦裕热?類、接口等。

TypeScript在面向?qū)ο笤O(shè)計(jì)這塊跟Java如出一轍。Java基礎(chǔ)好的同學(xué)，可以無(wú)痛過渡。

1.? 類

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

class Car {

? ? // 字段

? ? engine:string;

? ? // 構(gòu)造函數(shù)

constructor(engine:string) {

? ? ? ? this.engine = engine

? ? }?

? ? // 方法

? ? disp():void {

? ? ? ? console.log("發(fā)動(dòng)機(jī)為 :? "+this.engine)

? ? }

}

使用 new 關(guān)鍵字來(lái)實(shí)例化類的對(duì)象，語(yǔ)法格式如下：

var object_name = new class_name([ arguments ])

類實(shí)例化時(shí)會(huì)調(diào)用構(gòu)造函數(shù)，例如：

var obj = new Car("Engine 1")

類中的字段屬性和方法可以使用 . 號(hào)來(lái)訪問：

// 訪問屬性

obj.field_name

// 訪問方法

obj.function_name()

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

2.? TypeScript 接口

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

interface interface_name {

}

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

customer 實(shí)現(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 對(duì)象 ")

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? 對(duì)象 ")

console.log(employee.firstName)

console.log(employee.lastName)

需要注意接口不能轉(zhuǎn)換為 JavaScript。 它只是 TypeScript 的一部分。