TypeScript 合并两个接口

在本文中，我们将介绍如何在 TypeScript 中合并两个接口。接口是 TypeScript 中用来定义对象的结构的一种方式。通过合并两个接口，我们可以扩展现有接口的功能，以及将多个接口的定义融合在一起。

接口的基本概念

在开始讲解如何合并两个接口之前，我们先来复习一下接口的基本概念。接口是一种抽象的数据类型，用于定义对象的结构和行为。它可以包含属性、方法和索引签名等成员。通过接口，我们可以明确指定对象应该包含哪些属性和方法。

下面是一个示例：

interface Person {
    name: string;
    age: number;
}

const person: Person = {
    name: "Alice",
    age: 25
};

在上面的示例中，我们定义了一个名为 Person 的接口，它有两个属性 name 和 age。然后我们定义了一个 person 对象，它符合 Person 接口的定义。

合并接口

在 TypeScript 中，我们可以使用 extends 关键字来合并两个接口。当我们合并两个接口时，最终生成的接口将包含两个接口的所有成员，并且具有相同的名称。如果两个接口中有同名的成员，那么它们的类型将被合并成一个联合类型。

下面是一个示例：

interface Animal {
    type: string;
}

interface Dog {
    type: "dog";
    bark(): void;
}

interface Cat {
    type: "cat";
    meow(): void;
}

type AnimalType = Dog & Cat;

const animal: AnimalType = {
    type: "dog",
    bark() {
        console.log("Woof!");
    },
    meow() {
        console.log("Meow?");
    }
};

在上面的示例中，我们定义了三个接口：Animal、Dog 和 Cat。然后我们使用 & 运算符将 Dog 和 Cat 接口合并成了一个新的接口 AnimalType。最后，我们定义了一个符合 AnimalType 接口的 animal 对象，它可以同时进行狗和猫的行为。

合并接口的继承方式

在 TypeScript 中，除了使用 extends 关键字来合并接口外，还可以使用交叉类型和交叉类型的联合类型来实现合并接口的功能。

下面是一个示例：

interface Person {
    name: string;
}

interface Employee {
    id: number;
}

type EmployeePerson = Person & Employee;

const employeePerson: EmployeePerson = {
    name: "Alice",
    id: 123
};

在上面的示例中，我们定义了两个接口：Person 和 Employee。然后使用交叉类型 & 将这两个接口合并成了一个新的类型 EmployeePerson。最后，我们定义了一个 employeePerson 对象，它符合 EmployeePerson 类型的定义。

合并接口的注意事项

在合并接口时，有一些需要注意的地方。首先，合并后的接口会继承原接口的成员，并保留原接口的顺序。其次，重名的成员会合并成联合类型。最后，如果合并的两个接口有相同的属性名但类型不一致，那么会报错。

下面是一个示例：

interface Person {
    name: string;
    age: number;
}

interface Person {
    age: string; // 类型不一致，会报错
    email: string;
}

const person: Person = {
    name: "Alice",
    age: "25", // 报错：类型不兼容
    email: "alice@example.com"
};

在上面的示例中，我们定义了两个接口 Person，它们有相同的属性名 age。但是在第二个接口中，我们将 age 的类型定义为了 string，与第一个接口的 number 类型不兼容，因此会报错。