Typescript:将 2 个接口(interface)合并为 1 个

Question

我有 2 个接口(interface):

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应该在那里。

如何将这 2 个接口(interface)合并为 1 个？

Answer 1

您正在寻找的内容无法通过接口(interface)来完成，但是可以通过类型来完成。它被称为discriminated union types .

让我们为公共(public)字段设置一个单独的类型:

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

现在，UploadAttempt 类型应如下所示:

type UploadAttempt = UploadAttemptCommonFields & (Blocked | Unblocked)

请注意，括号对于确保正确的优先级顺序非常重要，因为我们希望在 Blocked 和 Unblocked 之间建立并集。

最终类型:

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

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