Angular多接口共用字段及组件间ID传递的最优实现方案咨询

针对你的场景，最合理的做法是提取公共的ID接口，让模型A和模型B分别继承这个接口，这样既能保证两个模型都拥有相同的id字段，又能各自保留独有的属性，不会造成冗余或污染原有模型。

具体实现代码如下：

// 定义公共的带ID接口，复用id字段的定义
export interface HasId {
  id: number;
}

// 模型A继承公共接口，保留自身原有字段
export interface A extends HasId {
  firstname: string;
  lastname: string;
}

// 模型B继承公共接口，保留自身原有字段
export interface B extends HasId {
  phone: number;
}

为什么不推荐你提到的其他方案？ #

• 直接给模型A添加phone字段：会污染模型A的职责，组件A不需要phone字段，强制添加后创建A类型实例时必须提供phone（否则TS会报错），完全不符合单一职责原则。
• 让模型B单独定义id字段：虽然可行，但如果后续有更多模型需要id，会重复定义，不利于维护，也无法统一约束id的类型。

另外，如果组件B只是需要使用组件A的id来执行方法，也可以直接在组件B的方法中接收id作为参数，不一定非要把id整合到模型B中，但从模型设计的角度，继承公共接口是更规范的做法。

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