Angular KeyValuePipe丢失类型问题：寻求合规替代解决方案

问题重现 #

使用Angular的KeyValuePipe时，组件中定义了带字面量联合类型键的对象，但管道返回的键被推断为string，导致模板调用方法时出现类型不兼容错误。

app.component.ts

export class AppComponent {
  someObject: Record<`${'key1' | 'key2'}`, {myCustomValue: string}> = 
              {key1: {myCustomValue: 'value1'}, key2:{myCustomValue:'value2'}}

  getKeyValueElement(key: 'key1' | 'key2', value: {myCustomValue: string}){
    console.log(key, value)
  }
}

app.component.html

<div *ngFor="let keyValueElement of someObject | keyvalue"
  (click)="getKeyValueElement(keyValueElement.key, keyValueElement.value)">
</div>

编译报错：getKeyValueElement的key参数类型为'key1' | 'key2'，但KeyValuePipe返回的key类型为string，类型不兼容。已知的$any()跳过检查、传冗余compareFn的方案均不适用，需要更优解。

最优解决方案 #

方案1：组件内预处理为类型安全的键值数组

直接在组件中将对象转换为带精确类型的键值对数组，模板中无需使用KeyValuePipe：

修改app.component.ts，添加预处理后的数组：

export class AppComponent {
  someObject: Record<`${'key1' | 'key2'}`, {myCustomValue: string}> = 
              {key1: {myCustomValue: 'value1'}, key2:{myCustomValue:'value2'}}
  
  // 预处理为类型安全的键值数组
  someObjectEntries: Array<[key: 'key1' | 'key2', value: {myCustomValue: string}]> = 
    Object.entries(this.someObject) as Array<[key: 'key1' | 'key2', value: {myCustomValue: string}]>;

  getKeyValueElement(key: 'key1' | 'key2', value: {myCustomValue: string}){
    console.log(key, value)
  }
}

模板中直接循环这个数组：

<div *ngFor="let [key, value] of someObjectEntries"
  (click)="getKeyValueElement(key, value)">
</div>

这种方式无需额外依赖，仅在组件内做类型断言，保持模板的类型安全，也不用引入多余的排序逻辑。

方案2：自定义类型安全的键值管道

如果多个组件都需要这个功能，可以自定义一个保留键类型的管道，替代原生KeyValuePipe：

创建typed-keyvalue.pipe.ts：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'typedKeyvalue'})
export class TypedKeyvaluePipe implements PipeTransform {
  transform<K extends string | number | symbol, V>(value: Record<K, V>): Array<{key: K, value: V}> {
    // 将Object.entries的结果转换为带精确类型的键值对象数组
    return Object.entries(value).map(([key, value]) => ({
      key: key as K,
      value
    }));
  }
}

在你的NgModule中声明这个管道：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TypedKeyvaluePipe } from './typed-keyvalue.pipe';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, TypedKeyvaluePipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

模板中使用自定义管道：

<div *ngFor="let keyValueElement of someObject | typedKeyvalue"
  (click)="getKeyValueElement(keyValueElement.key, keyValueElement.value)">
</div>

这个管道会严格保留原对象的键类型，同时避免了原生管道的类型丢失问题，适合复用场景。

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