Typescript：将 2 个接口合并为 1 个

发布于08月03日

我有两个接口:

export interface UploadAttemptBlocked {
  type: 'UploadAttempt';
  tab_id: string;
  blocked: true;
}

export interface UploadAttemptAllowed {
  type: 'UploadAttempt';
  tab_id: string;
  blocked: false;
  filepath: string;
}

当为blocked: true时，界面中不需要filepath.当blocked: false时，filepath应该在那里.

如何将这两个接口合并为%1？

推荐答案

您正在寻找的东西不能用接口来完成，但是可以用类型来完成.它被称为discriminated union types.

让我们为公共字段使用单独的类型:

type UploadAttemptCommonFields = {
  type: 'UploadAttempt';
  tab_id: string;
};

现在，UploadAttempt型应该是这样的:

type UploadAttempt = UploadAttemptCommonFields & (Blocked | Unblocked)

请注意，括号对于确保正确的优先级顺序很重要，因为我们希望union介于Blocked和Unblocked之间.

最后一种类型:

type UploadAttemptCommonFields = {
  type: 'UploadAttempt';
  tab_id: string;
};

type UploadAttempt = UploadAttemptCommonFields &
  (
    | {
        blocked: true;
      }
    | {
        blocked: false;
        filepath: string;
      }
  );