TypeScript Keyof Type Operator 公式ドキュメント

はじめに

TypeScript の keyof 型演算子は、オブジェクト型のキーからユニオン型を生成する演算子です。

TypeScript 公式ドキュメントの内容に基づき、keyof 型演算子の基本概念から実践的な使用パターンまで、コード例とともに整理しています。

The keyof type operator

基本的な使用方法

keyof 演算子は、オブジェクト型を受け取り、そのキーの文字列または数値リテラルのユニオン型を生成します。

type Point = { x: number; y: number };
type P = keyof Point;
//   ^? type P = "x" | "y"

この例では、型 P は "x" | "y" と同じ型になります。

インデックスシグネチャとの組み合わせ

型が string または number のインデックスシグネチャを持つ場合、keyof はそれらの型を返します：

type Arrayish = { [n: number]: unknown };
type A = keyof Arrayish;
//   ^? type A = number

type Mapish = { [k: string]: boolean };
type M = keyof Mapish;
//   ^? type M = string | number

この例では、M が string | number になることに注意してください。これは、JavaScript のオブジェクトキーが常に文字列に強制されるため、obj[0] は常に obj["0"] と同じだからです。

Mapped Types との組み合わせ

keyof 型は、Mapped Types と組み合わせることで特に有用になります。これについては後で詳しく学習します。

まとめ

TypeScript の keyof 型演算子は、オブジェクト型からキーのユニオン型を生成する基本的な型演算子です。

keyof 型演算子の主要概念

1. 基本的な keyof: オブジェクト型からキーのユニオン型を生成
2. インデックスシグネチャ: string や number インデックスシグネチャとの相互作用
3. JavaScript の制約: オブジェクトキーの文字列強制による string | number の結果

keyof を理解することで、TypeScript の型システムをより効果的に活用できます。特に Mapped Types や他の型演算子と組み合わせることで、強力な型操作が可能になります。

参考リンク

https://www.typescriptlang.org/docs/handbook/2/keyof-types.html