在 TypeScript 中，合并类型（merged types）是一种利用交叉类型（intersection types）和联合类型（union types）来创建新类型的方式。它可以让我们更方便地组合多个类型，并且避免代码中出现大量冗余的接口和类型定义。
在本篇文章中，我们将介绍 TypeScript 中如何使用合并类型，并提供一些实用的示例代码。
什么是合并类型？
合并类型允许我们将多个类型组合成一个类型。例如，我们可以将一个接口和一个类型合并为一个新的类型：
interface User {
name: string;
age: number;
}
type VerifiedUser = User & { verified: boolean };在上面的代码中，我们定义了一个 User 接口，它有 name 和 age 两个属性。接着，我们使用交叉类型 & 将 User 接口和一个拥有 verified 属性的类型合并为一个新类型 VerifiedUser。
同时，我们还可以使用联合类型来创建一个新类型。例如，下面的代码演示了如何将两个类型合并为一个类型：
-- -------------------- ---- ------- ---- ------ - --------- - ---------- - ----------- ---- ------- - - --- ------- ------- ------- -- ---- -------- - - ---------- ------- ------- ------- --------- ------- -- ---- --------------- - ------- - ---------
在上面的代码中，我们定义了两个类型 Request 和 Response，它们都拥有 status 属性。接着，我们使用联合类型 | 将它们合并为一个新类型 RequestResponse，它可以表示请求和响应两种状态。
合并接口
在 TypeScript 中，使用合并类型最常见的场景是合并接口。通过合并接口，我们可以将多个接口合并为一个新的接口，并且可以继承和扩展已有的接口定义。
基本用法
下面是一个简单的示例，演示了如何使用合并接口：
-- -------------------- ---- -------
--------- ------ -
----- -------
---- -------
-
--------- ------ -
----- ---------
---- -- -- -----
-
--------- ---- -
----- -------
----- -- -- -----
-
---- ------- - ------ - -------
---- ----- - ------ - -----
----- -------- ------- - -
----- ----------
---- --
----- ---------
----- -
------------------- -------
-
--
----- ----- ----- - -
----- -------
---- --
----- -------
------ -
--------------------- -------
-
--在上面的代码中，我们定义了三个接口：Animal、Mammal 和 Fish。其中，Mammal 和 Fish 都拥有一个 type 属性，分别表示哺乳动物和鱼类。
接着，我们使用交叉类型 & 将 Animal 接口和 Mammal 接口合并为一个新接口 Dolphin。同样地，我们使用交叉类型将 Animal 接口和 Fish 接口合并为一个新接口 Shark。
最后，我们创建了两个对象 flipper 和 jaws，它们分别属于 Dolphin 和 Shark 类型。
需要注意的是，合并类型会对重复属性进行合并。在上面的示例中， Animal 接口定义了 name 和 age 两个属性，而 Mammal 和 Fish 接口也分别定义了一个名为 type 的属性。当我们将它们合并为一个新接口时，type 属性只会保留一个。
继承已有接口
除了合并现有的接口，我们还可以在合并时同时继承已有的接口。例如，下面的代码演示了如何通过继承接口来创建一个新接口：
-- -------------------- ---- ------- --------- ------ - ----- ------- ---- ------- - --------- ---- ------- ------ - ------ ------- - --------- ----- ------- ------ - -------- -------- - ---- --------- - ---- - ------ ----- ---------- --------- - - ----- ------- ---- --- ------ ------------------- -------- ---- --
在上面的代码中，我们定义了一个 Person 接口，它表示一个普通人的信息。接着，我们使用 extends 关键字在 User 接口和 Admin 接口中分别继承了 Person 接口的属性。
最后，我们使用交叉类型 & 合并了 User 接口和 Admin 接口，创建了一个新接口 SuperUser。这个接口包含了 User 和 Admin 接口的所有属性，并且都继承了 Person 接口的属性。
扩展接口
除了继承已有接口之外，还可以通过合并接口来扩展接口的定义。例如，下面的代码演示了如何通过合并接口来为类添加新的方法：
-- -------------------- ---- -------
----- ------ -
------------------ ----- ------- ------ ---- ------- --
---------- -
------------------- -- ---- -- ---------------
-
-
--------- ------ -
-------- -----
-
---------------------- - ---------- -
----------------- -- ---- -------
--
----- ---- - --- -------------- ----
---------------- -- ------ -- ---- -- ----
------------- -- ---- -- ---- ----在上面的代码中，我们定义了一个 Person 类，它有两个属性 name 和 age，还有一个原型方法 sayHello()。接着，我们使用合并接口的方式在 Person 类型中添加了一个 greet() 方法。
需要注意的是，在给类添加新方法时，我们需要通过原型来添加，而不能直接在类定义中添加。因为接口的合并只会影响类型检查，不会对实际代码产生任何影响。
合并类型的限制
虽然合并类型可以为我们带来很多便利，但是在使用时也需要注意一些限制：
- 接口的成员名和类型不能重复，否则会报错。
- 非接口类型不能使用
extends关键字继承。 - 在合并类型时，使用
|和&时需要注意类型的顺序和结合性。
同时，我们也需要注意在使用合并类型时，可能会出现类型错误的情况。例如，下面的代码：
-- -------------------- ---- ------- --------- - - -- ------- - --------- - - -- ------- - --------- - - -- ------- - ---- -- - - - -- ---- -- - - - -- ---- --- - -- - --- ----- ---- --- - - -- -- -- -- -- - --
在上面的示例中，我们定义了三个接口 A、B 和 C，并使用交叉类型将它们合并为不同的类型。最后，我们将 AB 类型和 BC 类型合并为一个新类型 ABC，并创建了一个对象 abc，它包含了 AB 类型和 BC 类型的所有属性。
虽然 TypeScript 没有报错，但是实际上这个 abc 对象是无法正确使用的，因为合并后的类型会包含多个同名属性，而这种属性会产生冲突。因此，在使用合并类型时需要特别小心，避免出现这种错误。
总结
合并类型是 TypeScript 中一种非常方便和强大的类型定义方式。它可以让我们更精简地定义多个接口或类型，并且可以在合并时继承和扩展已有的定义。但是，我们也需要注意在使用时遵循 TypeScript 定义的规范，并且小心处理合并后的类型，避免出现错误。
希望本文对你了解 TypeScript 合并类型有所帮助，如果有任何疑问或意见，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64746381968c7c53b01c4752