TypeScript typeof keyof valueofについて

自分用にTypeScriptでのtypeof,keyof,valueofを整理します。
個別項目のリンクからサバイバルTypeScriptに飛べます。

typeof

変数やオブジェクトの型を取得する。
keyofやその他のユーティリティ型に関しても直接的にオブジェクトに使用することはできない。まずtypeofで型を取得し、取得した型に対して使用できる。

使用例

const person = {
  name: "Alice",
  age: 30,
};

type PersonType = typeof person;
// PersonTypeは { name: string; age: number } 型

keyof

オブジェクトの型のすべてのプロパティ名（キー）をユニオン型として取得する。

使用例

オブジェクトに対し直接使えないので、型を定義し使用。

interface Person {
  name: string;
  age: number;
}

type PersonKeys = keyof Person;
// PersonKeysは 'name' | 'age' 型

ValueOf

オブジェクトの型のすべてのプロパティの値（バリュー）をユニオン型として取得する。
カスタムユーティリティ型(開発者が独自に定義した型)で、定義は下記の通り。

type ValueOf<T> = T[keyof T];

T[K]の形式で、まず[]内の処理としてTの型にアクセスしてプロパティ名（キー）を取得。
次にTに対してK（キー）を用いてインデックスアクセス型を使用。
K（キー）に対応したTのプロパティの値を取得できる。

使用例

オブジェクトに直接使えないのでtypefoで先に型を抽出してから使用。

const CounterActions = {
  DECREMENT: "DECREMENT",
  INCREMENT: "INCREMENT",
  ADD: "ADD",
} as const;

type ActionType = ValueOf<typeof CounterActions>;
// ActionTypeは 'DECREMENT' | 'INCREMENT' | 'ADD' 型