TypeScript 作为 JavaScript 的超集，在增强了 JavaScript 的类型约束之后，带来了更好的开发体验和更小的维护成本。其中类型兼容 (Type Compatibility) 是 TypeScript 中十分关键的一个概念，在进行类型检查和类型推断时都扮演了重要的角色。
类型兼容的定义
类型兼容是指在 TypeScript 代码中，一种类型被认为是另一种类型的子类型或兼容类型。这也意味着一个对象的类型可以被赋值给另一个对象的类型，如果它们的结构是兼容的。
TypeScript 中的类型兼容规则
TypeScript 中的类型兼容遵循以下规则：
- 如果两个类型的内部结构完全相同，则这两个类型是兼容的。
- 如果两个类型有相同的属性名称和类型，且目标类型中的属性都存在于源类型中，那么源类型被认为是目标类型的子类型，也就是兼容的。
- 如果一个源类型可以通过索引访问赋值给目标类型，则源类型被认为是目标类型的子类型，也就是兼容的。
- 函数类型的兼容性需要特殊处理，详见下文。
下面分别对以上规则进行详细说明。
内部结构相同
如果两个类型的内部结构完全相同，则它们是兼容的。例如：
-- -------------------- ---- ------- --------- ------ - ----- ------- ---- ------- - --------- ------- - ---- ------- ----- ------- - ----- ------- ------ - - ----- ------ ---- -- -- ----- -------- ------- - ------- -- ------ - ------- ----
属性完全匹配
如果两个类型有相同的属性名称和类型，且目标类型中的属性都存在于源类型中，那么源类型被认为是目标类型的子类型，也就是兼容的。例如：
-- -------------------- ---- ------- --------- ------ - ----- ------- - --------- ------- ------- ------ - ---- ------- - ----- ------- ------ - - ----- ----- -- ----- -------- ------- - - ----- ------ ---- -- -- ------ - -------- -- ------- - ------ ------- ------- ----- ------
注意，如果目标类型中的属性在源类型中不存在，则会报错。
索引签名兼容
如果一个源类型可以通过索引访问赋值给目标类型，则源类型被认为是目标类型的子类型，也就是兼容的。例如：
interface StringArray {
[index: number]: string;
}
const arr: StringArray = ["Tom", "Bob"];
const str: string = arr[0];在上面的例子中，StringArray 接口中定义了一个索引签名，可以通过数字索引访问该接口的实例对象。因此，arr[0] 可以正确返回字符串类型的数据。
函数兼容性规则
函数类型的兼容性在 TypeScript 中需要特殊处理。主要包括以下三个方面：
- 只要源函数的参数列表类型能够赋值给目标函数的参数列表类型，那么这两个函数就是兼容的。这意味着如果源函数的参数类型是目标函数参数类型的子类型，那么它们是兼容的。
- 只要源函数的返回值类型能够赋值给目标函数的返回值类型，那么这两个函数就是兼容的。这意味着如果源函数的返回值类型是目标函数返回值类型的超类型（即父类型），那么它们是兼容的。
- 函数的可选参数和剩余参数在兼容性检查中是可互换的。也就是说，如果目标函数的参数列表中有可选参数或剩余参数，那么源函数可以缺少这些参数而仍然是兼容的。
下面是几个函数类型兼容性的示例：
-- -------------------- ---- ------- --- ----- - --- ------- -- ------- -- ---- -- --- ----- - --- ------- -- ---- -- --- ----- - --------- --------- -- ---- -- ----- - ------ -- -- ----- - ------ -- -- ----- - ------ -- ------ ------- --- ---------- --- - ----- - ------ -- -- ----- - ------ -- ------ ------- -- ----- - --------- --- - ----- - ------ -- ------ ------- -- ----- - --------- --- -
在上面的例子中，我们可以发现，func1 和 func2 是兼容的，但 func3 却不能赋值给 func1（因为 func3 接受任意数量的参数，在这种情况下它可以接受两个参数，但不能正确处理它们）。同样的，也可以看到 func2 可以赋值给 func3，因为 func3 可以少传参数。
总结
类型兼容是 TypeScript 中极其重要的一个概念，它涉及到很多细节，但如果理解了其中的规则，将会大大提升代码的可读性和稳定性。我们总结一下：
- 在 TypeScript 中，如果一个类型可以被安全地赋值给另一个类型，它们就是兼容的。
- 兼容性依赖于目标类型的内部结构。
- 对于函数类型，它们必须有相同的参数列表和相同的返回值类型，或者满足函数类型兼容性规则。
- 如果类型不兼容，则在尝试将其赋值或传递给不兼容类型的变量或参数时会报错。
希望这篇文章可以帮助大家更好地理解 TypeScript 中的类型兼容性，从而写出更健壮、更可靠的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664c31add3423812e4b035a4