AngularのTrackByFunctionをカンタンに作るパイプ

key-track-by.pipe.ts

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

/**
 * `{ id: number, name: string }[]`のような、ユニークな値を持つオブジェクトの配列に対して、
 * 簡単に{@link https://angular.io/api/core/TrackByFunction TrackByFunction}を設定するためのパイプ。
 *
 * @example
 * <!-- `{ id: number, name: string }[]` -->
 * <div *ngFor="let item of items; trackBy: 'id' | keyTrackBy">{{ item.id }}: {{ item.name }}</div>
 *
 * <!-- `{ id: number | null, name: string | null }[]` -->
 * <input name="name" [(ngModel)]="item.name" *ngFor="let item of items; trackBy: null | keyTrackBy">
 */
@Pipe({ name: 'keyTrackBy' })
export class KeyTrackByPipe implements PipeTransform {
  transform<T>(key: null | keyof T): (_: number, item: T) => T | T[keyof T] {
    return (_: number, item: T) => key == null ? item : item[key];
  }
}

transformの返り値としてTrackByFunctionみたいなものを返すようにしていたけど、どうしてもうまくいかないので関数を返す型をそのまま書いた……。 これによって、存在しないキーを指定したりできないようになったと思う。

型マスターが助言してくれたら嬉しい……。

---

ちなみに、↑のteatwoさんとのやり取りの問題はいつの間にか解消していたようです？ 普通に推論効いてるっぽいです