keyof型演算子

keyofはオブジェクト型からプロパティ名を型として返す型演算子です。たとえば、nameプロパティを持つ型に対して、keyofを使うと文字列リテラル型の"name"が得られます。

typescript
type Person = {
  name: string;
};
type PersonKey = keyof Person;
// 上は次と同じ意味です
type PersonKey = "name";

typescript
type Person = {
  name: string;
};
type PersonKey = keyof Person;
// 上は次と同じ意味です
type PersonKey = "name";

2つ以上のプロパティがあるオブジェクト型にkeyofを使った場合は、すべてのプロパティ名がユニオン型で返されます。

typescript
type Book = {
  title: string;
  price: number;
  rating: number;
};
type BookKey = keyof Book;
// 上は次と同じ意味になる
type BookKey = "title" | "price" | "rating";

typescript
type Book = {
  title: string;
  price: number;
  rating: number;
};
type BookKey = keyof Book;
// 上は次と同じ意味になる
type BookKey = "title" | "price" | "rating";

インデックス型にkeyofを用いると、インデックスキーの型が返ります。

typescript
type MapLike = { [K: string]: any };
type MapKeys = keyof MapLike;
//=> string | number

typescript
type MapLike = { [K: string]: any };
type MapKeys = keyof MapLike;
//=> string | number

キーがstringのインデックス型は、stringではなくstring | numberが返ります。number型のキーアクセスのobj[0]はobj["0"]と同じになるからです。

mapped typeにkeyofを用いると、そのキーの型が返ります。

typescript
type MapLike = { [K in "x" | "y" | "z"]: any };
type MapKeys = keyof MapLike;
//=> "x" | "y" | "z"

typescript
type MapLike = { [K in "x" | "y" | "z"]: any };
type MapKeys = keyof MapLike;
//=> "x" | "y" | "z"

プロパティを持たないオブジェクト型にkeyofを使うとnever型が返ります。

typescript
type What = keyof {};
//=> never

typescript
type What = keyof {};
//=> never

any型にkeyofを使うとstring | number | symbol型が返ります。

typescript
type AnyKeys = keyof any;
//=> string | number | symbol

typescript
type AnyKeys = keyof any;
//=> string | number | symbol

keyofのメリット

keyofのメリットは、保守性が上がる点です。オブジェクト型とは別にプロパティ名のユニオン型を定義していると、オブジェクト型のプロパティを変更したときに、そのユニオン型のほうも修正が必要になります。keyofを使って、オブジェクト型からキーを導出するようにしておけば、変更箇所はオブジェクト型のところだけになります。

加えて、プロパティが何十個もあるようなオブジェクトを想像してみてください。そのプロパティ名のユニオン型を定義する必要が出てきたとします。その際に、プロパティ名をすべて転記するとなると、転記漏れや書き間違いもあるでしょう。そういう場合はkeyofを使うとそもそも書き写す必要がないため、便利な上に安全なコーディングができます。

keyofはmapped typeと一緒に使われる

keyofは単体で使うことよりmapped typeと組み合わせて使われることが多いです。