TypeScript中extends的正確打開方式詳解

Posted on by

前言

最近完整地看瞭一遍TypeScript的官方文檔，發現文檔中有一些知識點沒有專門講解到，或者是講解瞭但卻十分難以理解，因此就有瞭這一系列的文章，我將對沒有講解到的或者是我認為難以理解的知識點進行補充講解，希望能給您帶來一點幫助。

tips：配合官方文檔食用更佳

這是本系列的第二篇TypeScript中extends的正確打開方式,在TypeScript中我們經常見到extends這一關鍵字，我們可能第一時間想到的就是繼承，但除瞭繼承它其實還有其他的用法，接下來讓我們來一一獲得extends的正確打開方式。

extends第一式：繼承

作為眾人皆知的extends關鍵字，其最出名的使用方式便是繼承。

類繼承類

首先讓我們來用extends實現一下類的繼承。

class Animal {
  public name;
  constructor(name: string) {
    this.name = name;
  }
  eat(food: string) {
    console.log(`${this.name}正在吃${food}`);
  }
}
class Sheep extends Animal {
  constructor(name: string) {
    super(name);
  }
  miemie() {
    console.log("別看我隻是一隻羊，羊兒的聰明難以想象～");
  }
}
let lanyangyang = new Sheep("懶羊羊");
lanyangyang.eat("青草蛋糕");
// 懶羊羊正在吃青草蛋糕
lanyangyang.miemie();
//別看我隻是一隻羊，羊兒的聰明難以想象～

首先我們定義瞭一個Animal類，該類有name屬性以及eat方法。然後又定義瞭一個繼承Animal類的Sheep類，該類在父類name屬性以及eat方法基礎上又新增瞭一個miemie方法。

接口繼承接口

extends不僅能夠用於類與類之間的繼承上，還能夠用於接口與接口之間的繼承。接下來我們來實現一下接口之間的繼承。

interface IAnimal{
  name:string;
  eat:(food:string)=>void;
}
interface ISheep extends IAnimal{
  miemie:()=>void;
}
let lanyangyang:ISheep={
  name:'懶羊羊',
  eat(food:string){
    console.log(`${this.name}正在吃${food}`);
  },
  miemie() {
    console.log("別看我隻是一隻羊，羊兒的聰明難以想象～");
  }   
}
lanyangyang.eat("青草蛋糕");
// 懶羊羊正在吃青草蛋糕
lanyangyang.miemie();
//別看我隻是一隻羊，羊兒的聰明難以想象～

我們定義瞭一個IAnimal接口，然後用通過extends繼承IAnimal定義瞭ISheep接口，則實現ISheep接口的變量lanyangyang必須要有父接口的name屬性以及實現eat方法，並且還要實現本身的miemie方法。

現在我們通過extends實現瞭類與類之間的繼承、接口與接口之間的繼承，那麼類與接口之間是否能互相繼承呢？答案是可以。

接口繼承類

首先我們使用extends來實現接口繼承類。

class Animal {
  public name;
  constructor(name: string) {
    this.name = name;
  }
  eat(food: string) {
    console.log(`${this.name}正在吃${food}`);
  }
  static run(){
    console.log(`${this.name} is running`)
  }
}
interface ISheep extends Animal{
  miemie:()=>void;
}
let lanyangyang:ISheep={
  name:'懶羊羊',
  eat(food:string){
    console.log(`${this.name}正在吃${food}`);
  },
  miemie() {
    console.log("別看我隻是一隻羊，羊兒的聰明難以想象～");
  }   
}
lanyangyang.eat("青草蛋糕");
// 懶羊羊正在吃青草蛋糕
lanyangyang.miemie();
//別看我隻是一隻羊，羊兒的聰明難以想象～

在接口繼承類時，可以把類看作一個接口，但是類中的靜態方法是不會繼承過來的。我們在實現ISheep接口的變量lanyangyang必須要有類Animal的name屬性以及實現eat方法，並且還要實現本身的miemie方法。但是我們不必實現類Animal的靜態方法run。

是不是覺得還會有下一個標題類繼承接口，對不起，這個真沒有！類繼承接口使用的關鍵字變成瞭implements。

extends第二式：三元表達式條件判斷

extends還有一個比較常見的用法就是在三元表達式中進行條件判斷，即判斷一個類型是否可以分配給另一個類型。這裡根據三元表達式中是否存在泛型判斷結果還不一致，首先我們介紹普通的三元表達式條件判斷。

普通的三元表達式條件判斷

帶有extends的三元表達式如下：

type TypeRes=Type1 extends Type2? Type3: Type4;

這裡表達的意思就是如果類型Type1可被分配給類型Type2,則類型TypeRes取Type3，否則取Type4。那怎麼理解類型Type1可被分配給類型Type2呢？？

我們可以這樣理解：類型為Type1的值可被賦值給類型為Type2的變量。可以具體分為一下幾種情況：

  • Type1和Type2為同一種類型。
  • Type1是Type2的子類型。
  • Type2類型兼容類型Type1。 接下來我們分情況進行驗證。

情況一：Type1和Type2為同一種類型。

type Type1=string;
type Type2=Type1;
type Type3=true;
type Type4=false;
type TypeRes=Type1 extends Type2? Type3: Type4;
// true

這裡Type1和Type2為同一種類型。因此Type1可被分配給Type2。因此TypeRes類型最後取為true。

情況二：Type1是Type2的子類型。

class Animal {
  public name;
  constructor(name: string) {
    this.name = name;
  }
  eat(food: string) {
    console.log(`${this.name}正在吃${food}`);
  }
}
class Sheep extends Animal {
  constructor(name: string) {
    super(name);
  }
  miemie() {
    console.log("別看我隻是一隻羊，羊兒的聰明難以想象～");
  }
}
type Type1=Sheep;
type Type2=Animal;
type Type3=true;
type Type4=false;
type TypeRes=Type1 extends Type2? Type3: Type4;
// true

這裡Sheep類繼承自Animal,即Type1是Type2的子類型。因此Type1可被分配給Type2。因此TypeRes類型最後取為true。

情況三： Type2類型兼容類型Type1。

首先還是拋出一個問題，什麼是類型兼容？？這個問題可以從官方文檔中得到答案，大傢可以戳類型兼容性詳細瞭解！

所謂 Type2類型兼容類型Type1，指得就是Type1類型的值可被賦值給類型為Type2的變量。 舉個栗子：

type Type1={
  name:string;
  age:number;
  gender:string;
}
type Type2={
  name:string;
  age:number;
}
type Type3=true;
type Type4=false;
type TypeRes=Type1 extends Type2? Type3: Type4;
// true

由於類型Type1擁有至少與Type2相同的屬性，因此Type2是兼容Type1的。也就是說Type1類型的值可被賦值給類型為Type2的變量。

let kenny1:Type1={
  name:'kenny',
  age:26,
  gender:'male'
}
let kenny2:Type2=kenny;
// no Error

因此TypeRes類型最後取為true。

再舉個栗子，以函數的兼容性為例，

type Type1=(a:number)=>void;
type Type2=(a:number,b:string)=>void;
type Type3=true;
type Type4=false;
type TypeRes=Type1 extends Type2? Type3: Type4;
// true

當函數參數不同時，看Type2是否兼容Type1，就要看Type1的每個參數必須能在Type2裡找到對應類型的參數。 註意的是參數的名字相同與否無所謂，隻看它們的類型。

這裡Type1第一個number類型的參數是可以在Type2中找到，即Type1類型的函數可被賦值給類型為Type2的變量。

let fn1:Type1=（a:number)=>{}
let kenny2:Type2=fn1;
// no Error

因此TypeRes類型最後取為true。

帶有泛型的三元表達式條件判斷

我們先來一個舉一個不帶泛型的栗子，大傢可以想想結果是什麼。

type Type1=string|number;
type Type2=string;
type Type3=true;
type Type4=false;
type TypeRes=Type1 extends Type2? Type3: Type4;

沒錯，由於Type1是Type2的父類型，因此Type1是不可分配給Type2的，因此TypeRes類型最後取為false。

但當我們加上泛型之後呢，再來看一個栗子。

type Type1=string|number;
type Type2=string;
type Type3=true;
type Type4=false;
type Type5<T>=T extends Type2? Type3: Type4;
type TypeRes<Type1>
// boolean

這裡TypeRes類型最後就不是false瞭，而變成boolean。這是為什麼呢？

原來再使用泛型時，若extends左側的泛型具體取為一個聯合類型時，就會把聯合類型中的類型拆開，分別帶入到條件判斷式中進行判斷，最後把結果再進行聯合。上述的栗子中結果可以這麼來看，

(string extends string?true:false)|(number extends string?true:false)
true | false
boolean

在高級類型中有很多類型實現便用到瞭這一特性。

比如Exclude<T, U> — 從T中剔除可以賦值給U的類型。

type T1 = "a" | "b" | "c" | "d";
type T2 = "a" | "c" | "f"
type ExcludeT1T2=Exclude<T1,T2> //"b"|"d"

該類型的類型實現為

type Exclude<T, U> = T extends U ? never : T;

當T為聯合類型時，會自動分發條件，對T中的所有類型進行遍歷，判斷其是否可以分配給類型U，如果是的話便返回never類型，否則返回其原來的類型。最後再將其進行聯合得到一個結果聯合類型。

由於never類型與其他類型聯合最終得到的還是其他類型，因此便可以從類型T中剔除掉可以賦給U的類型。

那有沒有辦法讓泛型三元表達式中extends和普通的extends作用相同？有！隻需要給泛型加一個[]。栗子如下：

type Type1=string|number;
type Type2=string;
type Type3=true;
type Type4=false;
type Type5<T>=[T] extends Type2? Type3: Type4;
type TypeRes<Type1>
// false

extends第三式：泛型約束

首先我們來回答一下什麼是泛型？簡單來說，泛型就是一種類型變量，普通的變量代表一個任意的值，而不是一個特定的值，我們可以把任何值賦給變量，而類型變量代表一個任意的類型，而不是一個特定的類型，我們可以把任何類型賦給類型變量。它是一種特殊的變量，隻用於表示類型而不是值。

那如果我們不想讓泛型表示任意類型時，該怎麼辦？這時我們就可以使用extends對泛型進行約束，讓泛型表示滿足一定條件的類型。接下來，我們使用extends進行泛型的約束。

interface ISheep{
  name:string;
  eat:(food:string)=>void;
  miemie:()=>void;
}
function eatAndMiemie<T extends ISheep>(sheep:T):void{
    sheep.eat("青草蛋糕");
    sheep.miemie();
}
eatAndMiemie(
{
  name: "懶羊羊",
  eat(food:string){
    console.log(`${this.name}正在吃${food}`);
  },
  miemie() {
    console.log("別看我隻是一隻羊，羊兒的聰明難以想象～");
  }   
  run() {console.log(`${this.name}正在奔跑`)};
  }
)
// 懶羊羊正在吃青草蛋糕
//別看我隻是一隻羊，羊兒的聰明難以想象～

這裡我們便對泛型T進行瞭約束，其必須至少要擁有ISheep的name屬性及eat、miemie方法，另外T中若有其他的屬性及方法，則不作限制。這裡我們便通過extends對泛型T進行瞭約束。

其實泛型約束中的extends也是起到瞭三元表達式中類型分配的作用，其中T extends ISheep表示泛型T必須可以分配給類型Isheep。

以上就是TypeScript中extends的正確打開方式詳解的詳細內容，更多關於TypeScript extends打開方式的資料請關註WalkonNet其它相關文章！

推薦閱讀：