Question

给出以下接口：

True

此接口试图同时扩展两者

interface A {
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

interface B {
    onClick?: (event: React.MouseEvent<HTMLButtonElement>, pressed: boolean) => void;
}

要在本课程中使用：

interface C extends A, B {
    name: string;
}

我收到此编译器错误

接口“ C”不能同时扩展类型“ A”和“ B”。类型“ A”和“ B”的命名属性“ onClick”不同。

阅读docs section about declaration merging后，我觉得应该可以进行这样的组合：

class MyComponent extends React.Component<C> {
    ...
}

我需要手动定义C接口吗？还是可以通过某种扩展合并来生成像这样的组合接口，就像我在上面尝试做的那样？

Answer 1

如果您可以为A中的B兼容的onClick方法提供单个签名，则可以拥有同时扩展onClick和A的接口}和B。在您的示例中，带有可选pressed参数的签名就足够了：

interface AB extends A, B {
    onClick?: (event: React.MouseEvent<HTMLButtonElement>, pressed?: boolean) => void;
}

interface C extends AB {
    name: string;
}

声明合并可能无济于事-为了进行合并，合并的实体（类，名称空间，接口）必须具有相同的名称。

扩展Typescript中冲突接口的组合

1 个答案: