typescript 如何合并共享相同属性的接口?

mgdq6dx1  于 2023-02-17  发布在  TypeScript
关注(0)|答案(1)|浏览(140)
  • -问题-
    我想扩展IAction接口,但是ISetContextActionIClearContextAction接口共享相同的属性type
interface ISetContextAction {
  type: 'SET_CONTEXT';
  payload: string;
}

interface IClearContextAction {
  type: 'CLEAR_CONTEXT';
}

interface IAction extends ISetContextAction, IClearContextAction {}

但是,这会导致错误,说明:

Interface 'IAction' cannot simultaneously extend types 'ISetContextAction' and 'IClearContextAction'.
  Named property 'type' of types 'ISetContextAction' and 'IClearContextAction' are not identical.
  • -我所做的--
    (1)将payload设置为可选并创建单个接口,而不是扩展它(但我很好奇是否有其他方法)
interface IAction {
  type: 'SET_CONTEXT' | 'CLEAR_CONTEXT';
  payload?: string;
}

(2)将interface更改为type
我看过很多使用type而不是interface的教程:

type Actiontype = 
  | { type: 'SET_CONTEXT', payload: string }
  | { type: 'CLEAR_CONTEXT' };
  • -问题**-
    是否有变通方法可以合并共享相同属性的接口?(在本例中为type
    先谢了
xa9qqrwz

xa9qqrwz1#

您可以忽略冲突的属性,尽管当您需要在现有接口的基础上实际创建一个新接口,并进行一些更改/添加时,这样做是有意义的。
例如:

interface IAction extends Omit<ISetContextAction, 'type'>, Omit<IClearContextAction, 'type'> {
  type: 'SET_CONTEXT' | 'CLEAR_CONTEXT';
}

但在您的情况下,联合类型可能是正确的方法,否则上面的示例将强制您定义payload,而不管操作类型如何。

相关问题