TypeScriptの組み込み型関数Recordの覚書

よくあるパターンだとは思うけどいざ書いているとなかなか出てこないので残す時間を作って書いている

typeやinterfaceを定義せず変数定義時に型も定義する場合などよくやりがちなのが次のような書き方

const summary: {[key:string]: string} = .....

を書き換えると次のように書き換えられる

const summary: Record<string, string> = .....

集計ロジックの中の中間の変数などでよくやりがち

少し要素を追加してサンプルコードを書いてみる

サンプルコード

type Row = {
  name: string;
  value: number;
}
const rows: Row[] = [
  {name: 'foo', value: 1},
  {name: 'bar', value: 2},
  {name: 'baz', value: 3},
  {name: 'bar', value: 2},
];
const summary = rows.reduce<Record<string, Row>>((acc,current) => {
  const key = current.name;
  return {...acc, [key]: {...acc[key], value: (acc[key]?.value ?? 0) + current.value}}
}, {} );

console.log(summary); // { foo: { value: 1 }, bar: { value: 4 }, baz: { value: 3 } }

reduceの型定義

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;

reduce<T>というようにデフォルトだとpreviousValueとcurrentValueの型が一緒だが型引数に独自の型を与えてあげることでinitialValueの型を定義できる

この辺の使い方など普段から使っていないと忘れてしまうので意識して使えるようにしたい

参考

TypeScriptの組み込み型関数 Recordの使いどころ - Qiita

関連記事

Profile

Account

RSS