Try it out

Question

在我的React项目中，我有几个共享相似形状（属性和方法）的组件。为了保持可维护性，我为它们创建了一个通用接口：

interface IControl {
  props: {
    title: string;
  }
}

但每当我在道具是IControl＆s 39的超集的组件上实现此接口时，我都会收到错误：

8:   props: {            ^ property `onClick`. Property not found in 
2:   props: {            ^ object type

Try it out

完整示例源代码：

interface IControl {
  props: {
    title: string;
  }
}

class FooComponent implements IControl {
  props: {
    title: string;
    onClick: () => void;
  }
}

Answer 1

这是因为JS中的对象是可变的，我可以使用IControl的实例并为其分配props，而不需要实现类所需的道具。这是解决方案（这是一个字符更改）：

interface IControl {
  +props: {
    title: string;
  }
}

class FooComponent implements IControl {
  props: {
    title: string;
    onClick: () => void;
  }
}

const x: IControl = new FooComponent();

x.props = {title: 'asdf'};

(x.props.title: string)

（try flow）

这使用了property variance。您可以看到它不允许不正确的分配，但它允许访问x.props.title。

实现接口。如何扩展属性类型？

Try it out

1 个答案: