TypeScript/Angular如何实现类似Java的多模型接口继承与多态匹配

你可以用TypeScript的**可辨识联合类型（Discriminated Union）**实现这个需求，完全可以达到和Java父类多态类似的类型校验效果，具体实现如下：

步骤1：定义不同动作对应的ActionInfo接口 #

// 赋值动作的信息结构
export interface SetObjectValueActionInfoBE {
  field_id: string;
  value: string;
}

// 发邮件动作的信息结构
export interface SendEmailActionInfoBE {
  recipient_email_address: string;
  message: string;
}

步骤2：定义带可辨识字段的联合类型 #

把type字段定义为固定的字面量类型，作为类型识别的标识，再把所有动作类型联合为总ActionBE类型：

// 赋值动作的完整结构
interface SetObjectValueActionBE {
  type: 'set_object_value'; // 固定字面量，和你业务里的实际type取值对应即可
  actionInfo: SetObjectValueActionInfoBE;
}

// 发邮件动作的完整结构
interface SendEmailActionBE {
  type: 'send_email'; // 固定字面量，和你业务里的实际type取值对应即可
  actionInfo: SendEmailActionInfoBE;
}

// 总Action类型，是所有具体动作类型的联合
export type ActionBE = SetObjectValueActionBE | SendEmailActionBE;

使用效果 #

定义完成后TypeScript会自动关联type和actionInfo的类型对应关系：

• 当你判断某个ActionBE类型的变量type为set_object_value时，TS会自动推导它的actionInfo是SetObjectValueActionInfoBE类型，会有对应的field_id和value字段提示
• 当type为send_email时，actionInfo会自动推导为SendEmailActionInfoBE类型，有recipient_email_address和message字段提示
• 序列化JSON的逻辑不需要额外调整，和Java Jackson的序列化逻辑完全一致，TS的类型仅在编译期做校验，运行时就是普通的JS对象，不会影响现有序列化逻辑

使用示例：

function handleAction(action: ActionBE) {
  if (action.type === 'set_object_value') {
    // 这里action.actionInfo自动识别为SetObjectValueActionInfoBE类型
    console.log(action.actionInfo.field_id); // 有类型提示，不会报错
  } else if (action.type === 'send_email') {
    // 这里action.actionInfo自动识别为SendEmailActionInfoBE类型
    console.log(action.actionInfo.recipient_email_address); // 有类型提示，不会报错
  }
}

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