如何实现Angular自定义Pipe多入参的全类型提示支持？

问题原因 #

你当前的泛型定义中，TypeScript会将泛型参数K自动收窄为第一个传入的字段的字面量类型，所以后续参数仅能从已经传入过的key中选择，无法展示T的所有可选key。

修正方案 #

直接将可变参数的类型声明为Array<keyof T>即可，无需额外声明K泛型，修正后的Pipe代码如下：

@Pipe({
  name: 'alphabetic'
})
export class AlphabeticPipe implements PipeTransform {
  transform<T>(values: Array<T>, ...fieldAccessors: Array<keyof T>): Array<T> {
    // 具体实现逻辑不变
  }
}

如果你的业务逻辑需要用到所有传入字段的联合类型，也可以用如下写法避免TS自动收窄泛型：

@Pipe({
  name: 'alphabetic'
})
export class AlphabeticPipe implements PipeTransform {
  transform<T, K extends keyof T = keyof T>(values: Array<T>, ...fieldAccessors: K[]): Array<T> {
    // 具体实现逻辑不变
  }
}

两种写法都可以让所有入参位置都提示T的完整key列表，符合你预期的效果。

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