一份不可多得的 TypeScript 學習筆記#yyds幹貨盤點#

Hi，我是前端人，今日與君共勉！本篇文章主要介紹 typeScript 中類的定義、類的繼承、類中成員修飾符等内容。

typeScript 中的類與 ES6 中的類非常相似，如果不知道 ES6 中的類，建議先學習下 ES6 中的 class 。本篇文章重點介紹 typeScript 中的類定義、繼承以及修飾符。

1、類的定義

類描述了所建立的對象共同的屬性和方法。typeScript 支援面向對象的所有特性，比如類、接口等。

在 typeScript 中定義類的時候，使用 class 關鍵字，類名首字母使用大寫，類可以包含以下三個子產品：

• ​字段​ - 字段是類裡面聲明的變量，表示與對象有關的屬性。
• ​構造函數​ - 類執行個體化時自動調用，可以為執行個體化的對象配置設定記憶體。
• ​方法​ - 方法為對象要執行的某種操作。

定義屬性的時候，需要添加屬性類型，構造函數中的參數也需要加類型，引用任何一個類的成員的時候都用 this ，this 關鍵字表示目前類執行個體化的對象。使用 new 關鍵字來執行個體化對象，并初始化它。如示例：

class Web{
 workTime: string
 constructor(n:string) {
  this.workTime = n
 }
 showWork(){
  return "搬磚的前端"
 }
}
let qq = new Web("五年")
console.log(qq.showWork());
console.log(qq.workTime);      

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

"use strict";
class Web {
 constructor(n) {
  this.workTime = n;
 }
 showWork() {
  return "搬磚的前端";
 }
}
let qq = new Web("五年");
console.log(qq.showWork());
console.log(qq.workTime);      

2、類的繼承

typeScript 支援繼承類，即可以在建立類的時候繼承一個已存在的類，類繼承的時候使用 extends 關鍵字，基于類的程式設計中一種最基本的模式是允許使用繼承來擴充現有的類。比如：

class Dirnks{
 name: string
 constructor(n: string) {
  this.name = n
 }
 save(m: string) {
  console.log(`${this.name}飲料應該${m}`);
 }
}
class Soda extends Dirnks{
 constructor(n: string) {
  super(n)
 }
}
let kele = new Soda("可樂")
kele.save("冷藏")      

上述示例是一個最基本的類繼承，其中 Soda 繼承了 Dirnks 的屬性和方法，其中 Soda 是一個派生類，也叫做子類，Dirnks 是一個基類，也叫超類或父類。

派生類包含了一個構造函數，構造函數必須調用 super() ，會執行基類的構造函數。需要注意的是：在子類構造函數裡通路 this 的屬性之前，一定要先調用 super ，這是 typeScript 強制執行的一條重要規則。

如果父類和子類都包含某一方法時，方法名相同，但是具體執行内容不同的時候，該執行哪一個方法呢？

修改上述執行個體，給子類也添加一個方法，代碼如下：

class Dirnks{
 name: string
 constructor(n: string) {
  this.name = n
 }
 save(m: string) {
  console.log(`${this.name}飲料應該${m}`);
 }
}
class Soda extends Dirnks{
 constructor(n: string) {
  super(n)
 }
 save() {
  return "存儲方法"
 }
}
let kele = new Soda("可樂")
console.log(kele.save());      

編譯以上代碼啊，得到的 js 代碼如下：

"use strict";
class Dirnks {
 constructor(n) {
  this.name = n;
 }
 save(m) {
  console.log(`${this.name}飲料應該${m}`);
 }
}
class Soda extends Dirnks {
 constructor(n) {
  super(n);
 }
 save() {
  return "存儲方法";
 }
}
let kele = new Soda("可樂");
console.log(kele.save());      

此時會執行子類中的方法。其原理是，類繼承後，子類可以對父類的方法進行重新定義，這個過程稱之為方法的重寫。

typeScript 中子類隻能繼承一個父類，雖然不支援繼承多個類，但是支援多重繼承。如下：

class One{
 name: string
 constructor(n: string) {
  this.name = n
 }
 show() {
  return "展示"
 }
}
class Two extends One{
 constructor(n:string) {
  super(n)
 }
}
class Three extends Two{
 constructor(n: string) {
  super(n)
 }
}
let three = new Three("剁成")
console.log(three.show());      

3、修飾符

在 typeScript 中，可以使用通路控制符來保護對類、變量、方法和構造函數的通路。typeScript 支援 3 種不同的通路權限，分别為：

• ​public（預設）​ - 公有，表示共享的屬性和方法。可以在任何地方被通路。
• ​protected​ - 受保護，表示屬性和方法被保護，可以被自身以及子類通路，不能在類外面使用。
• ​private​ - 私有，隻能被其定義所在的類通路。
• ​readonly​ - 隻讀，隻讀屬性必須在聲明時或構造函數裡初始化。

​了解 public​

在上邊類中的成員定義的時候，沒有明确使用任何修飾符，預設的就是 public ，是以可以将上面的類改寫為：

class HH{
 public name: string
 public constructor(n: string) {
  this.name = n
 }
}
let h = new HH("HH")
console.log(h.name);      

使用 public 之後，對上面的應用并沒有任何影響。

它的特點：被它标記的成員在類的裡面、子類裡面、類外面都可以通路到。

​了解 protected​

類中添加 protected 修飾符來修飾成員時，将上述執行個體的 public 修飾符修改為 protected 如下：

class HH{
 protected name: string
 constructor(n: string) {
  this.name = n
 }
}
let h = new HH("HH")
console.log(h.name); // 此處報錯，提示 屬性"name"受保護，隻能在類 HH 及子類中通路      

它的特點：被它标記的成員在類的裡面、子類裡面能使用，但是在類的外面不能使用。

class HH{
 private name: string
 constructor(n: string) {
  this.name = n
 }
}
class H extends HH{
 constructor(n: string) {
  super(n)
 }
 show() {
  console.log(this.name); // 報錯
 }
}
let h = new H("HH")
console.log(h.name);  // 報錯
h.show()