引言

很多開發(fā)者對(duì)新生事物，會(huì)有畏懼的心情，其實(shí)，靜下心來，大家會(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，編譯出來的 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í)例：

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

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

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

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

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

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

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

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

4. 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è)置的類型來賦值。注意：只能賦值指定的類型，如果賦值其它類型就會(huì)報(bào)錯(cuò)?？梢酝ㄟ^聯(lián)合參數(shù)限定函數(shù)參數(shù)的類型。

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

1. var val:string|number

2. val =12

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

4. val ="Runoob"

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

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)來迭代可迭代的對(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)

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

2. for(let entry of someArray){

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

4. }

forEach、every 和 some 是 JavaScript 的循環(huán)語(yǔ)法，TypeScript 作為 JavaScript 的語(yǔ)法超集，當(dāng)然默認(rèn)也是支持的。 因?yàn)?forEach 在 iteration 中是無(wú)法返回的，所以可以使用 every 和 some 來取代 forEach。?TypeScript forEach 循環(huán)

1. let list =[4,5,6];

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

3. // val: 當(dāng)前值

4. // idx：當(dāng)前index

5. // array: Array

6. });

TypeScript every 循環(huán)

1. let list =[4,5,6];

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

3. // val: 當(dāng)前值

4. // idx：當(dāng)前index

5. // array: Array

6. returntrue;// Continues

7. // Return false will quit the iteration

8. });

當(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ū)別如下：

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

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

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

4. Java中聲明變量：publicvoid update(dt){}

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

三、TypeScript新增特性

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

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

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

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

2. if(lastName)

3. return firstName +" "+ lastName;

4. else

5. return firstName;

6. }

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

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

9. 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 functionname(param1[:type],param2[:type] = defaultvalue) { }?注意：參數(shù)不能同時(shí)設(shè)置為可選和默認(rèn)。

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

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

2. var discount = price * rate;

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

4. }

5. calculate_discount(1000)

6. calculate_discount(1000,0.30)

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

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

2. if(rate ===void0){ rate =0.50;}

3. var discount = price * rate;

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

5. }

6. calculate_discount(1000);

7. calculate_discount(1000,0.30);

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

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

2. 剩余參數(shù)

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

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

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

3. }

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

函數(shù)的最后一個(gè)命名參數(shù) restOfName 以 ... 為前綴，它將成為一個(gè)由剩余參數(shù)組成的數(shù)組，索引值從0（包括）到 restOfName.length（不包括）。

1. function addNumbers(...nums:number[]){

2. var i;

3. var sum:number =0;

4. for(i =0;i<nums.length;i++){

5. sum = sum + nums[i];

6. }

7. console.log("和為：",sum)

8. }

9. addNumbers(1,2,3)

10. addNumbers(10,10,10,10,10)

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

1. function addNumbers(){

2. var nums =[];

3. for(var _i =0; _i < arguments.length; _i++){

4. nums[_i]= arguments[_i];

5. }

6. var i;

7. var sum =0;

8. for(i =0; i < nums.length; i++){

9. sum = sum + nums[i];

10. }

11. console.log("和為：", sum);

12. }

13. addNumbers(1,2,3);

14. addNumbers(10,10,10,10,10);

輸出結(jié)果為： 和為： 6 和為： 50

3. 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ù)的和：

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

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

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

1. var foo =function(x){return10+ x;};

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

輸出結(jié)果為：110

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

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

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

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

3. console.log(x, y)

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

1. var arr =[12,13];

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

3. 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ū)別。

1. classCar{

2. // 字段

3. engine:string;

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

5. constructor(engine:string){

6. this.engine = engine

7. }

8. // 方法

9. disp():void{

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

11. }

12. }

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

1. var object_name =new class_name([ arguments ])

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

1. var obj =newCar("Engine 1")

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

1. // 訪問屬性

2. obj.field_name

3. // 訪問方法

4. obj.function_name()

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

2. TypeScript 接口

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

1. interface interface_name {

2. }

以下實(shí)例中，我們定義了一個(gè)接口 IPerson，接著定義了一個(gè)變量 customer，它的類型是 IPerson。 customer 實(shí)現(xiàn)了接口 IPerson 的屬性和方法。

1. interfaceIPerson{

2. firstName:string,

3. lastName:string,

4. sayHi:()=>string

5. }

6. var customer:IPerson={

7. firstName:"Tom",

8. lastName:"Hanks",

9. sayHi:():string=>{return"Hi there"}

10. }

11. console.log("Customer 對(duì)象 ")

12. console.log(customer.firstName)

13. console.log(customer.lastName)

14. console.log(customer.sayHi())

15. var employee:IPerson={

16. firstName:"Jim",

17. lastName:"Blakes",

18. sayHi:():string=>{return"Hello!!!"}

19. }

20. console.log("Employee 對(duì)象 ")

21. console.log(employee.firstName)

22. console.log(employee.lastName)

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

引言

很多開發(fā)者對(duì)新生事物，會(huì)有畏懼的心情，其實(shí)，靜下心來，大家會(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，編譯出來的 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í)例：

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

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

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

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

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

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

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

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

4. 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è)置的類型來賦值。注意：只能賦值指定的類型，如果賦值其它類型就會(huì)報(bào)錯(cuò)?？梢酝ㄟ^聯(lián)合參數(shù)限定函數(shù)參數(shù)的類型。

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

1. var val:string|number

2. val =12

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

4. val ="Runoob"

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

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)來迭代可迭代的對(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)

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

2. for(let entry of someArray){

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

4. }

forEach、every 和 some 是 JavaScript 的循環(huán)語(yǔ)法，TypeScript 作為 JavaScript 的語(yǔ)法超集，當(dāng)然默認(rèn)也是支持的。 因?yàn)?forEach 在 iteration 中是無(wú)法返回的，所以可以使用 every 和 some 來取代 forEach。?TypeScript forEach 循環(huán)

1. let list =[4,5,6];

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

3. // val: 當(dāng)前值

4. // idx：當(dāng)前index

5. // array: Array

6. });

TypeScript every 循環(huán)

1. let list =[4,5,6];

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

3. // val: 當(dāng)前值

4. // idx：當(dāng)前index

5. // array: Array

6. returntrue;// Continues

7. // Return false will quit the iteration

8. });

當(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ū)別如下：

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

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

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

4. Java中聲明變量：publicvoid update(dt){}

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

三、TypeScript新增特性

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

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

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

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

2. if(lastName)

3. return firstName +" "+ lastName;

4. else

5. return firstName;

6. }

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

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

9. 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 functionname(param1[:type],param2[:type] = defaultvalue) { }?注意：參數(shù)不能同時(shí)設(shè)置為可選和默認(rèn)。

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

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

2. var discount = price * rate;

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

4. }

5. calculate_discount(1000)

6. calculate_discount(1000,0.30)

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

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

2. if(rate ===void0){ rate =0.50;}

3. var discount = price * rate;

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

5. }

6. calculate_discount(1000);

7. calculate_discount(1000,0.30);

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

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

2. 剩余參數(shù)

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

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

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

3. }

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

函數(shù)的最后一個(gè)命名參數(shù) restOfName 以 ... 為前綴，它將成為一個(gè)由剩余參數(shù)組成的數(shù)組，索引值從0（包括）到 restOfName.length（不包括）。

1. function addNumbers(...nums:number[]){

2. var i;

3. var sum:number =0;

4. for(i =0;i<nums.length;i++){

5. sum = sum + nums[i];

6. }

7. console.log("和為：",sum)

8. }

9. addNumbers(1,2,3)

10. addNumbers(10,10,10,10,10)

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

1. function addNumbers(){

2. var nums =[];

3. for(var _i =0; _i < arguments.length; _i++){

4. nums[_i]= arguments[_i];

5. }

6. var i;

7. var sum =0;

8. for(i =0; i < nums.length; i++){

9. sum = sum + nums[i];

10. }

11. console.log("和為：", sum);

12. }

13. addNumbers(1,2,3);

14. addNumbers(10,10,10,10,10);

輸出結(jié)果為： 和為： 6 和為： 50

3. 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ù)的和：

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

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

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

1. var foo =function(x){return10+ x;};

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

輸出結(jié)果為：110

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

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

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

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

3. console.log(x, y)

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

1. var arr =[12,13];

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

3. 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ū)別。

1. classCar{

2. // 字段

3. engine:string;

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

5. constructor(engine:string){

6. this.engine = engine

7. }

8. // 方法

9. disp():void{

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

11. }

12. }

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

1. var object_name =new class_name([ arguments ])

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

1. var obj =newCar("Engine 1")

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

1. // 訪問屬性

2. obj.field_name

3. // 訪問方法

4. obj.function_name()

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

2. TypeScript 接口

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

1. interface interface_name {

2. }

以下實(shí)例中，我們定義了一個(gè)接口 IPerson，接著定義了一個(gè)變量 customer，它的類型是 IPerson。 customer 實(shí)現(xiàn)了接口 IPerson 的屬性和方法。

1. interfaceIPerson{

2. firstName:string,

3. lastName:string,

4. sayHi:()=>string

5. }

6. var customer:IPerson={

7. firstName:"Tom",

8. lastName:"Hanks",

9. sayHi:():string=>{return"Hi there"}

10. }

11. console.log("Customer 對(duì)象 ")

12. console.log(customer.firstName)

13. console.log(customer.lastName)

14. console.log(customer.sayHi())

15. var employee:IPerson={

16. firstName:"Jim",

17. lastName:"Blakes",

18. sayHi:():string=>{return"Hello!!!"}

19. }

20. console.log("Employee 對(duì)象 ")

21. console.log(employee.firstName)

22. console.log(employee.lastName)

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

更多教學(xué)視頻及素材源碼：

https://www.bycwedu.com/promotion_channels/829468798