深入理解 TypeScript 接口繼承

一、TS 接口繼承寫法

在 TypeScript 中，接口是一種非常重要的概念，可以用來描述對象的形狀或類的結構。接口繼承是指一個接口可以繼承另一個接口或多個接口的成員。

接口繼承語法如下：

interface ChildInterface extends ParentInterface {
  // 子接口 extends 父接口的成員
  ...
}

舉個例子：

interface Animal {
  age: number;
  eat(): void;
}

interface Person extends Animal {
  name: string;
  sayHi(): void;
}

上述代碼中，Person 接口繼承了 Animal 接口。

二、TS type 繼承

除了接口繼承，TypeScript 中還支持通過 type 關鍵字進行類型的繼承。

type 關鍵字定義的類型別名可以繼承其他類型、聯合類型或交叉類型。

type A = { a: number };
type B = A & { b: number };

上述代碼中，B 類型繼承了 A 類型，是 A 類型與帶有 b 屬性的對象的交叉類型。

三、TS 接口繼承類

在 TypeScript 中，接口還可以繼承類，這個類可以是一個普通類，也可以是一個抽象類。

class Animal {
  age: number;
  eat(): void {}
}

interface Person extends Animal {
  name: string;
  sayHi(): void;
}

上述代碼中，Person 接口繼承了 Animal 類，可以理解為實現了 Animal 類的所有成員。

四、TS 定義接口

在 TypeScript 中，接口的定義可以為對象和函數定義。下面給出對象的定義：

interface Foo {
  propA: number;
  propB: string;
}

上述代碼中，Foo 接口定義了對象的形狀，對象必須包含 propA 屬性和 propB 屬性。

五、TS 接口繼承多個接口

接口之間也可以多重繼承，即一個接口可以同時繼承多個接口，語法如下：

interface ChildInterface extends ParentInterface1, ParentInterface2 {
  // 子接口同時 extends 多個父接口的成員
  ...
}

舉個例子：

interface Person {
  name: string;
  sayHi(): void;
}

interface WorkMan {
  company: string;
  work(): void;
}

interface Employee extends Person, WorkMan {
  dept: string;
  work(): void;
}

上述代碼中，Employee 接口同時繼承了 Person 和 WorkMan 接口，實現了所有繼承接口的成員。

六、TS 類型繼承

TypeScript 還支持類型的繼承，類型繼承可以實現對多個類型的複合。語法如下：

type ChildType = ParentType1 & ParentType2 & ...

舉個例子：

type PersonType = {
  name: string;
  age: number;
}

type InfoType = {
  sex: string;
  address: string;
}

type EmployeeType = PersonType & InfoType;

上述代碼中，EmployeeType 類型繼承了 PersonType 和 InfoType 的成員，是 PersonType 和 InfoType 的交叉類型。

七、接口繼承了 object 類嗎

在 TypeScript 中，如果一個接口不顯式繼承自其它接口，那麼它默認會繼承自 object 類型，object 是 TypeScript 中表示非特定類型的類型，即表示所有對象類型的基礎。

interface Foo {
  propA: number;
  propB: string;
}

const foo: Foo = {}; // TypeScript 報錯：缺少屬性 propA 和 propB。

上述代碼中，Foo 接口沒有繼承其它接口，因此默認繼承自 object 類型。

八、TS 繼承抽象類

除了可以繼承類和接口，TypeScript 還支持繼承抽象類。

抽象類是用來定義標準的類，它不能被實例化，只能用來被子類繼承。抽象類可以包含抽象方法，這些方法只有定義，沒有實現。

abstract class Animal {
  abstract eat(): void;
}

interface Person extends Animal {
  name: string;
}

上述代碼中，Person 接口繼承了 Animal 抽象類，實現了 eat 方法。

九、TS 接口是什麼

TypeScript 中的接口是用來定義對象和函數的規範，接口定義了對象和函數應該擁有的屬性和方法。一個對象或函數如果符合接口的規範，就可以被認為是實現了這個接口。

十、TS 繼承多個接口

在 TypeScript 中，接口允許繼承多個接口，通過這種方式可以實現接口的復用和拓展。當一個接口繼承了多個接口時，它就會包含父接口的所有成員。

舉個例子：

interface Person {
  name: string;
  sayHi(): void;
}

interface WorkMan {
  company: string;
  work(): void;
}

interface Employee extends Person, WorkMan {
  dept: string;
  work(): void;
}

上述代碼中，Employee 接口繼承了 Person 和 WorkMan 接口，實現了所有繼承接口的成員。