TypeScript：如何将两个接口合并为一个？

你可以通过两种常用方式合并这两个接口，同时保留blocked字段的条件约束逻辑：

方法一：提取公共部分 + 联合类型 #

先把两个接口的公共字段抽出来复用，再通过联合类型组合不同分支，TypeScript会自动根据blocked的值做类型收窄：

// 公共字段接口
interface UploadAttemptBase {
  type: 'UploadAttempt';
  tab_id: string;
}

// 合并后的联合类型
type UploadAttempt = 
  | (UploadAttemptBase & { blocked: true })
  | (UploadAttemptBase & { blocked: false; filepath: string });

使用时，只要判断blocked的取值，TypeScript就能自动识别当前分支是否包含filepath：

function processUpload(attempt: UploadAttempt) {
  if (attempt.blocked) {
    // 此处类型自动收窄为 blocked: true 的分支，无 filepath 字段
    console.log(`Tab ${attempt.tab_id} 上传被拦截`);
  } else {
    // 此处类型自动收窄为 blocked: false 的分支，必须存在 filepath
    console.log(`Tab ${attempt.tab_id} 允许上传文件：${attempt.filepath}`);
  }
}

方法二：泛型 + 条件类型 #

如果需要用单个接口形式定义，可以借助泛型和条件类型实现动态字段约束：

type UploadAttempt<T extends boolean = boolean> = {
  type: 'UploadAttempt';
  tab_id: string;
  blocked: T;
} & (T extends false ? { filepath: string } : {});

这个写法的逻辑是：

• 泛型T约束blocked的取值为boolean类型（默认值为boolean，支持自动分支）
• 通过条件类型判断：当T为false时，追加filepath字段；为true时不添加额外字段

使用示例：

// 自动推断分支
const blockedAttempt: UploadAttempt = { type: 'UploadAttempt', tab_id: '123', blocked: true };
const allowedAttempt: UploadAttempt = { type: 'UploadAttempt', tab_id: '456', blocked: false, filepath: '/docs/file.pdf' };

// 也可以指定泛型明确类型
const explicitBlocked: UploadAttempt<true> = { type: 'UploadAttempt', tab_id: '789', blocked: true };

内容的提问来源于stack exchange，提问作者nikitakot