reactjs - 向现有 Prop 添加新类型

Question

您好，有一种方法可以向现有 Prop 添加新类型吗？

export interface ICustomState extends INonIdealStateProps {
  icon: 'load';
}

export const CustomState: React.FunctionComponent<ICustomState> = (
  props: ICustomState
) => {
//My code
};

我有我的自定义接口(interface) ICustomState 扩展了 INonIdealStateProps 并且我正在尝试向 icon prop 添加一个新类型INonIdealStateProps 中已经存在，但我收到此错误:

Interface 'ICustomState' incorrectly extends interface 'INonIdealStateProps'.

原始类型为:

icon?: IconName | Element

Answer 1

当您创建派生接口(interface)时，您的属性可以更加具体。例如，如果 IconName 只是 string 的别名，这将是有效的:

type IconName = string
export interface INonIdealStateProps {
  icon: IconName | Element
}
export interface ICustomState extends INonIdealStateProps {
  icon: 'load' | Element;
}

Play

如果 IconName 不是 string 的别名，那么您就不能真正以当前形式扩展接口(interface)(这会打破子接口(interface)是可分配给基本接口(interface))。但是，您可以从接口(interface)中省略有问题的成员并使用新类型添加它(尽管生成的接口(interface)将无法分配给 INonIdealStateProps 接口(interface))

type IconName = "a" | "b"
export interface INonIdealStateProps {
  icon: IconName | Element
}
export interface ICustomState extends Omit<INonIdealStateProps, 'icon'> {
  icon: 'load' | INonIdealStateProps['icon']; // | INonIdealStateProps['icon'] adds back the type in the base interface, this is not strictly needed
}

Play