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];
  }
}

手元でやっているとそういう結果になるんですけど、AoTで検出できてます？
*ngFor ofはショートカットで内部的にはAngularがごにょごにょ展開してるから難しいのかなあと勝手に忖度してました！

@studioTeaTwo

ホワっ！？ 確認してみたらホントですね……！！ そしてなぜteatwoさんが「〜添字指定にすると〜」と敢えて言っていたのか理解した…… 関数の引数にitemを渡すことを明示的にしないと〜という話だったんですね。

実装はここかな？ 確かに、ここのTの型でItem型ってのはわかってそうだしなんか型読み取れそうなのでバグっぽいのかも……。 展開コードまでみないとダメな理由わからなさそうだな……。

ありがとうございます。条件・環境の何かの違いでできる場合あるのかな？と気になってたので、スッキリしました！

展開コードまでみないとダメな理由わからなさそうだな……。

ngcの出力結果でわかりそうですが、追うの辛いw

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

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

---

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