请解释接口的声明合并规则

推荐答案

在 TypeScript 中，接口的声明合并是指当多个同名的接口声明出现在同一个作用域时，TypeScript 会自动将它们合并为一个单一的接口。合并后的接口将包含所有声明的成员，且成员的类型必须兼容。

合并规则

1. 非函数成员：如果多个接口中声明了同名的非函数成员，它们的类型必须相同，否则会报错。
2. 函数成员：如果多个接口中声明了同名的函数成员，它们会被视为函数重载。合并后的接口中，函数成员的顺序与接口声明的顺序一致，后声明的接口中的函数成员会排在前面。
3. 字符串索引签名：如果多个接口中声明了字符串索引签名，它们的类型必须相同。
4. 数字索引签名：如果多个接口中声明了数字索引签名，它们的类型必须相同。

示例

-- -------------------- ---- -------
--------- --- -
    ------- -------
    ------ -------
-

--------- --- -
    ------ -------
-

--- ---- --- - - ------- -- ------ -- ------ -- --

在这个例子中，两个 Box 接口被合并为一个，最终的 Box 接口包含 height、width 和 scale 三个属性。

本题详细解读

1. 非函数成员的合并

当多个接口中声明了同名的非函数成员时，TypeScript 会检查它们的类型是否相同。如果类型不同，编译器会报错。

interface A {
    x: number;
}

interface A {
    x: string; // Error: Subsequent property declarations must have the same type.
}

2. 函数成员的合并

对于同名的函数成员，TypeScript 会将它们视为函数重载。合并后的接口中，后声明的接口中的函数成员会排在前面。

-- -------------------- ---- -------
--------- - -
    ---- -------- -------
-

--------- - -
    ---- -------- -------
-

--- -- - - -
    ---- ----- --- -
        ------ --
    -
--

在这个例子中，f 函数被重载，可以接受 number 或 string 类型的参数。

3. 字符串索引签名的合并

如果多个接口中声明了字符串索引签名，它们的类型必须相同。

interface C {
    [key: string]: number;
}

interface C {
    [key: string]: number; // 必须与之前的索引签名类型相同
}

4. 数字索引签名的合并

类似地，如果多个接口中声明了数字索引签名，它们的类型也必须相同。

interface D {
    [key: number]: string;
}

interface D {
    [key: number]: string; // 必须与之前的索引签名类型相同
}

通过这些规则，TypeScript 能够有效地合并多个接口声明，确保类型的一致性和兼容性。