Web應用開發TypeScript使用詳解

2022-05-17 13:01:19

一、什麼是 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"; }}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;
})();