Angular中使用输入信号(Input Signal)时如何实现接口？

问题场景 #

在Angular 17之前，我们可以通过让组件实现接口来约束输入属性，确保字段一致性：

export interface IEdit {
  editIcon?: string;
  editLink: string;
}
 
export class EditComponent implements IEdit {
  @Input({ required: true }) editIcon?: string;
  @Input() editLink: string;
}

改用Angular 17的输入信号写法后，组件不再关联原接口，导致接口新增字段时TypeScript无法给出错误提示：

export class EditComponent {
  editIcon = input.required<IEdit['editIcon']>();
  editLink = input<IEdit['editLink']>();
}

最佳解决方案 #

通过映射类型将原接口的字段转换为对应的InputSignal类型，再让组件实现这个转换后的类型，就能既保留原接口，又维持类型约束：

// 定义通用映射类型，将接口字段转为InputSignal类型
type ToSignal<T> = {
  [K in keyof T]: InputSignal<T[K]>;
};

export interface IEdit {
  editIcon?: string;
  editLink: string;
}

// 组件实现映射后的类型，确保与原接口字段同步
export class EditComponent implements ToSignal<IEdit> {
  editIcon = input.required<string>();
  editLink = input<string>();
}

方案说明 #

1. 映射类型ToSignal<T>会遍历原接口T的所有键，将每个键对应的类型包装为InputSignal，完美匹配输入信号的类型结构
2. 组件实现ToSignal<IEdit>后，只要IEdit新增字段，TypeScript就会立即提示组件缺少对应的输入信号定义，完全保留了原有的类型约束能力
3. 相比最初尝试的interface写法，type结合映射类型是TypeScript处理这种结构转换的标准方式，语法更严谨，能正确推断每个字段的具体类型

内容的提问来源于stack exchange，提问作者Леонид Пономарёв