一、什麼是 TypeScript

TypeScript 是近幾年被火爆的應用了，這讓大家產生了一個錯覺：這麼多的擁護者，難道TypeScript是一個新的語言？

TypeScript是微軟公司開發和維護的一種物件導向的程式語言。它是JavaScript的超集，包含其所有元素。

TypeScript完全遵循OOPS的概念，在TSC（TypeScript編譯器）的幫助下，我們可以將TypeScript程式碼（.ts檔案）轉換成JavaScript（.js檔案）

TypeScript是JavaScript的超集

二、TypeScript 簡史

2010年，Anders Hejlsberg（TypeScript的建立者）開始在微軟開發TypeScript，並於2012年向公眾釋出了TypeScript的第一個版本（TypeScript 0.8）。儘管TypeScript的釋出受到了全世界許多人的稱讚，但是由於缺少主要ide的支援，它並沒有被JavaScript社群主要採用。

TypeScript的第一個版本（TypeScript 0.8）於2012年10月釋出。

最新版本的Typescript（Typescript 3.0）於2018年7月釋出，您可以在這裡下載最新版本！

三、為什麼我們要使用TypeScript？

• TypeScript簡化了JavaScript程式碼，使其更易於閱讀和除錯。
• TypeScript是開源的。
• TypeScript為JavaScript ide和實踐（如靜態檢查）提供了高效的開發工具。
• TypeScript使程式碼更易於閱讀和理解。
• 使用TypeScript，我們可以大大改進普通的JavaScript。
• TypeScript為我們提供了ES6（ECMAScript 6）的所有優點，以及更高的生產率。
• TypeScript透過對程式碼進行型別檢查，可以幫助我們避免在編寫JavaScript時經常遇到的令人痛苦的錯誤。
• 強大的型別系統，包括泛型。
• TypeScript只不過是帶有一些附加功能的JavaScript。
• TypeScript程式碼可以按照ES5和ES6標準編譯，以支援最新的瀏覽器。
• 與ECMAScript對齊以實現相容性。
• 以JavaScript開始和結束。
• 支援靜態型別。
• TypeScript將節省開發人員的時間。
• TypeScript是ES3、ES5和ES6的超集。

TypeScript的附加功能

• 具有可選引數的函式。
• 使用REST引數的函式。
• 泛型支援。
• 模組支援。

四、大牛現身說法:

• “我們喜歡TypeScript有很多方面……有了TypeScript，我們的幾個團隊成員說了類似的話， 我現在實際上已經理解了我們自己的大部分程式碼！因為他們可以輕鬆地遍歷它並更好地理解關係。我們已經透過TypeScript的檢查發現了幾個漏洞。“-Brad Green，Angular工程總監“
• Ionic的主要目標之一是 使應用程式開發儘可能快速和簡單，工具支援TypeScript為我們 提供了自動完成、型別檢查和源文件 與之真正一致。”-Tim Lancina，工具開發人員–Ionic“
• 在編寫基於web或JavaScript的現代應用程式時，TypeScript是一個 明智的選擇。TypeScript經過仔細考慮的語言特性和功能，以及它不斷改進的工具，帶來了非常有成效的開發體驗。”-Epic研究員Aaron Cornelius“
• TypeScript幫助我們 重用團隊的知識並 透過提供與C#相同的優秀開發經驗來保持相同的團隊速度……比普通JavaScript有了巨大的改進。”-Valio Stoychev，PM Lead–NativeScript“

五、你可能不知道的TypeScript頂級功能

1、物件導向程式設計

TypeScript包含一組非常好的物件導向程式設計（OOP）特性，這些特性有助於維護健壯和乾淨的程式碼；這提高了程式碼質量和可維護性。這些OOP特性使TypeScript程式碼非常整潔和有組織性。

例如:

class 
CustomerModel {

  customerId: number;

  companyName: 
string;

  contactName: 
string;

  country: 
string;

}



class 
CustomerOperation{

  addCustomer(customerData: CustomerModel) : number {

    
// 新增使用者


    let customerId = 5;// 儲存後返回的ID


    return customerId;


  }


}

2、介面、泛型、繼承和方法訪問修飾符

TypeScript支援介面、泛型、繼承和方法訪問修飾符。介面是指定契約的好方法。泛型有助於提供編譯時檢查，繼承使新物件具有現有物件的屬性，訪問修飾符控制類成員的可訪問性。TypeScript有兩個訪問修飾符-public和private。預設情況下，成員是公共的，但您可以顯式地向其新增公共或私有修飾符。

（1）介面

interface ITax {

  taxpayerId: 
string;

  calculateTax(): 
number;

}




class IncomeTax 
implements ITax {

  taxpayerId: 
string;

  calculateTax(): 
number {

    
return 
10000;

  }

}




class ServiceTax 
implements ITax {

  taxpayerId: 
string;

  calculateTax(): 
number {

    
return 
2000;

  }

}

（2）訪問修飾符

class 
Customers{

  
public companyname:
string;

  
private country:
string;

}

顯示一個公共變數和一個私有變數

（3）繼承

class 
Employee{

  Firstname:
string;

}





class 
Company 
extends 
Employee {

  Department:
string;

  Role:

string


  
private 
AddEmployee
(){

    
this.Department=
"myDept";

    
this.Role=
"Manager";

    
this.FirstName=
"Test";

  }

}

（4）泛型

function 
identity<
T> 
(arg: T): T {

  
return 
arg; 

}

// 顯示泛型實現的示例

let 
output = identity <
string>(
"myString");

let outputl = identity <number> (
23);

（5）強/靜態型別

TypeScript不允許將值與不同的資料型別混合。如果違反了這些限制，就會丟擲錯誤。因此，在宣告變數時必須定義型別，並且除了在JavaScript中非常可能定義的型別之外，不能分配其他值。

例如:

let testnumber: 
number = 
6;

testnumber = 
"myNumber"; 
// 這將引發錯誤


testnumber = 5; // 這樣就可以了

3、編譯時/靜態型別檢查

如果我們不遵循任何程式語言的正確語法和語義，那麼編譯器就會丟擲編譯時錯誤。在刪除所有語法錯誤或除錯編譯時錯誤之前，它們不會讓程式執行一行程式碼。TypeScript也是如此。

例如:

let 
isDone: boolean = 
false;

isDone = 
"345";  
// 這將引發錯誤

isDone = 
true; 
// 這樣就可以了

4、比JavaScript程式碼更少

TypeScript是JavaScript的包裝器，因此可以使用幫助類來減少程式碼。Typescript中的程式碼更容易理解。

5、可讀性

介面、類等為程式碼提供可讀性。由於程式碼是用類和介面編寫的，因此更有意義，也更易於閱讀和理解。

舉例:

class 
Greeter {

  
private greeting: string;

  
constructor (
private message: string) {

    
this.greeting = message;

  }

  greet() {

    
return 
"Hello, " + 
this.greeting;

  }

}

JavaScript 程式碼:

var Greeter = (

function (
) {

  

function 
Greeter(
message) {

    
this.greeting = message;

  }

  Greeter.prototype.greet = 

function (
) {

    
return 
"Hello, " + 
this.greeting;

  };

  
return Greeter;

})();

6、相容性

Typescript與JavaScript庫相容，比如 underscore.js，Lodash等。它們有許多內建且易於使用的功能，使開發更快。

7、提供可以將程式碼轉換為JavaScript等效程式碼的“編譯器”

TypeScript程式碼由純JavaScript程式碼以及特定於TypeScript的某些關鍵字和構造組成。但是，編譯TypeScript程式碼時，它會轉換為普通的JavaScript。這意味著生成的JavaScript可以與任何支援JavaScript的瀏覽器一起使用。

8、支援模組

隨著TypeScript程式碼基的增長，組織類和介面以獲得更好的可維護性變得非常重要。TypeScript模組允許您這樣做。模組是程式碼的容器，可以幫助您以整潔的方式組織程式碼。從概念上講，您可能會發現它們類似於.NET名稱空間。

例如:

module Company {

  

class 
Employee {

  }

  

  

class 
EmployeeHelper {

    targetEmployee: Employee;

  }

  

  
export 

class 
Customer {

  }

}


var obj = 
new Company.Customer();

9、ES6 功能支援

Typescript是ES6的一個超集，所以ES6的所有特性它都有。另外還有一些特性，比如它支援通常稱為lambda函式的箭頭函式。ES6引入了一種稍微不同的語法來定義匿名函式，稱為胖箭頭(fat arrow)語法。

舉例:

setTimeout(

() => {

   
console.log(
"setTimeout called!")

}, 
1000);

10、在流行的框架中使用

TypeScript在過去幾年裡越來越流行。也許TypeScript流行的決定性時刻是Angular2正式轉換到TS的時候，這是一個雙贏的局面。

11、減少錯誤

它減少了諸如空處理、未定義等錯誤。強型別特性，透過適當的型別檢查限制開發人員，來編寫特定型別的程式碼。

12、函式過載

TypeScript允許您定義過載函式。這樣，您可以根據引數呼叫函式的不同實現。但是，請記住，TypeScript函式過載有點奇怪，需要在實現期間進行型別檢查。這種限制是由於TypeScript程式碼最終被編譯成純JavaScript，而JavaScript不支援真正意義上的函式過載概念。

例如:

class 
functionOverloading{

  addCustomer(custId: number);

  addCustomer(company: 
string);

  addCustomer(
value: any) {

    
if (
value && 
typeof 
value == 
"number") {

      alert(
"First overload - " + 
value);

    }

    
if (
value && 
typeof 
value == 
"string") {

      alert(
"Second overload - " + 
value);

    }

  }

}

13、構造器

在TypeScript中定義的類可以有建構函式。建構函式通常透過將預設值設定為其屬性來完成初始化物件的工作。建構函式也可以像函式一樣過載。

例如:

export 
class SampleClass{

  
private title: 
string; 

  
constructor(

public constructorexample: 
string){

    
this.title = constructorexample; 

  }

}

14、除錯

用TypeScript編寫的程式碼很容易除錯。

15、TypeScript只是JavaScript

TypeScript始於JavaScript，止於JavaScript。Typescript採用JavaScript中程式的基本構建塊。為了執行的目的，所有型別指令碼程式碼都轉換為其JavaScript等效程式碼。

例如:

class 
Greeter {

  greeting: string;

  
constructor (message: string) {

    
this.greeting = message;

  }

  greet() {

    
return 
"Hello, " + 
this.greeting;

  }

}

JavaScript 程式碼:

var Greeter = (

function (
) {

  

function 
Greeter(
message) {

    
this.greeting = message;

  }

  Greeter.prototype.greet = 

function (
) {

    
return 
"Hello, " + 
this.greeting;

  };

  
return Greeter;

})();

16、可移植性

TypeScript可以跨瀏覽器、裝置和作業系統移植。它可以在JavaScript執行的任何環境中執行。與對應的指令碼不同，TypeScript不需要專用的VM或特定的執行時環境來執行。