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

推荐答案

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

合并规则

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

示例

// www.javascriptcn.com code example
interface Box {
    height: number;
    width: number;
}

interface Box {
    scale: number;
}

let box: Box = { height: 5, width: 6, scale: 10 };

在这个例子中，两个 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 会将它们视为函数重载。合并后的接口中，后声明的接口中的函数成员会排在前面。

// www.javascriptcn.com code example
interface B {
    f(x: number): number;
}

interface B {
    f(x: string): string;
}

let b: B = {
    f(x: any): any {
        return x;
    }
};

在这个例子中，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 能够有效地合并多个接口声明，确保类型的一致性和兼容性。