如何使用TypeScript

這篇文章主要講解了“如何使用TypeScript”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用TypeScript”吧！

一、什么是 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或特定的運行時環境來執行。

感謝各位的閱讀，以上就是“如何使用TypeScript”的內容了，經過本文的學習后，相信大家對如何使用TypeScript這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！