Angular泛型函数优化：如何避免重复指定属性名？

要实现仅显式指定组件类型、自动推断属性名泛型的效果，你可以通过让TypeScript根据传入的prop参数自动推断K类型来实现，无需给K设置默认值。以下是调整后的代码和说明：

修正后的函数实现 #

import { SimpleChanges } from '@angular/core';

export function ifChanged<ComponentType, K extends keyof ComponentType>(
  changes: SimpleChanges,
  prop: K,
  callback: (value: ComponentType[K]) => void,
): void {
  const change = changes[prop as string];
  // 更严谨的变更检查：确保变更存在、非首次变更且当前值已初始化
  if (change && !change.firstChange && change.currentValue !== undefined) {
    callback(change.currentValue as ComponentType[K]);
  }
}

关键调整点 #

• 移除K的默认值：无需给K设置= keyof ComponentType，TypeScript会通过你传入的prop参数（比如'user'）自动推断出K的具体类型，不用手动指定。
• 修正回调参数类型：将Pick<ComponentType, K>改为ComponentType[K]——因为changes[prop].currentValue是属性的具体值，而非包含该属性的对象，之前的Pick会导致类型不匹配（比如Pick<UserFormComponent, 'user'>是{ user: User }，但实际值是User）。
• 优化变更检查逻辑：增加!change.firstChange可过滤组件初始化时的首次变更，可根据业务需求调整。

理想调用方式 #

现在只需指定组件类型，TypeScript会自动推断属性类型：

ifChanged<UserFormComponent>(changes, 'user', (value) => {
  console.log(value); // value的类型自动推断为UserFormComponent['user']
});

为什么之前的默认值方案无效？ #

当你给K设置默认值keyof ComponentType时，TypeScript会将K解析为组件所有属性的联合类型（比如'user' | 'name' | 'age'），而你传入的prop是单个属性名，这会导致类型不兼容，最终回调的value类型变成所有属性类型的联合，而非你期望的单个属性类型。

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