Ribbit works
TwitterZennGitHub
記事のトップ画像

Object.entries()で厳格に型定義された結果を受け取りたい【typescript】

TypeScriptJavaScript

last modified date2021-12-22

publish date2021-12-20

typescriptの標準設定では、Object.entries()の型は以下のように定義されています。

interface ObjectConstructor {
  entries<T>(o: { [s: string]: T } | ArrayLike<T>): [string, T][];
  entries(o: {}): [string, any][];
}

つまり、型をRecord<string, number | string>として定義した値を引数に渡した場合、返り値の型は[string, number | string][]になります。

const object: Record<string, number | string> = {
  one: 100,
  two: "test",
};

const entries = Object.entries(object); // 型は[string, string | number][]

ただ、Record<"one" | "two", number | string>と定義していた場合はどうでしょうか。

通常の方法では、返ってくる型は先ほど同様[string, number | string][]です。

const object: Record<"one" | "two", number | string> = {
  one: 100,
  two: "test",
};

const entries = Object.entries(object); // 型は[string, string | number][]

この時、より厳格に["one" | "two", number | string][]といった状態で受け取りたいことはありませんか？

今回はこれを実現するコードを紹介します。

この記事の目次

ソースコード

export const strictEntries = <T extends Record<string, any>>(
  object: T
): [keyof T, T[keyof T]][] => {
  return Object.entries(object);
};

型推論も問題なく動作します。

const object = {
  one: 100,
  two: "test",
};

const entries = strictEntries(object); // 型は["one" | "two", string | number][]