TypeScriptのkeyofとtypeofの使い方と違いを徹底解説

TypeScriptは静的型付け言語であり、型の安全性を高めるためのさまざまな機能を提供しています。その中でも、keyof と typeof は、型をより柔軟に扱うための重要なキーワードです。この記事では、これらのキーワードの基本的な使い方や違い、具体的な活用方法について詳しく解説します。

[目次を開く]

1. typeofの基本と使い方 typeofの概要 typeofの使用例 1. 変数の型を取得する 2. 関数の戻り値の型を取得する typeofを使うメリット 2. keyofの基本と使い方 keyofの概要 keyofの使用例 1. オブジェクトのキーを取得する 2. 汎用的な関数の作成 keyofの活用シーン 3. typeofとkeyofの違い 4. typeofとkeyofの組み合わせまとめ

1. `typeof`の基本と使い方

`typeof`の概要

typeofは、JavaScriptのtypeof演算子と同様に、変数やオブジェクトの型を取得するために使用されます。主に以下の2つの場面で役立ちます。

変数の型を取得する
型アノテーションとして使用する

`typeof`の使用例

1. 変数の型を取得する

let user = {
  name: "Alice",
  age: 25
};

type UserType = typeof user;

const newUser: UserType = {
  name: "Bob",
  age: 30
};

上記のコードでは、typeof user によって user オブジェクトの型が取得され、それを UserType として定義しています。これにより、新しいオブジェクトnewUserを型安全に定義できます。

2. 関数の戻り値の型を取得する

function getUser() {
  return {
    id: 1,
    username: "JohnDoe"
  };
}

type ReturnType = typeof getUser;

この場合、typeof getUser は関数そのものの型（() => { id: number; username: string }）を取得します。関数の戻り値の型を得るには、ReturnType<typeof getUser> を使用する必要があります。

`typeof`を使うメリット

型の一貫性を保つ
既存のオブジェクトや関数の型を再利用できるため、型の重複を避けられる。
コードの可読性向上
長い型定義を省略し、簡潔なコードを記述できる。

2. `keyof`の基本と使い方

`keyof`の概要

keyofは、オブジェクトのプロパティ名（キー）の集合を型として取得するために使用されます。オブジェクトの構造に基づいた厳密な型定義を行う際に役立ちます。

`keyof`の使用例

1. オブジェクトのキーを取得する

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

type PersonKeys = keyof Person;

// PersonKeys は "name" | "age" | "address" 型になる
let key: PersonKeys = "name";  // OK
// key = "gender";  // エラー

この例では、keyof Person により、オブジェクトのプロパティ名（name | age | address）が型として得られ、型安全にプロパティを参照できます。

2. 汎用的な関数の作成

keyof を利用することで、オブジェクトのキーに対して型安全な関数を作ることができます。

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

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

let personName = getProperty(person, "name");  // OK
// let invalidKey = getProperty(person, "height");  // エラー

この関数は、指定されたオブジェクト obj から、key プロパティを型安全に取得することができます。

`keyof`の活用シーン

動的なプロパティ参照
keyof を活用することで、型安全に動的プロパティの取得が可能。
ジェネリック関数の制約
関数に対して制約を設け、無効なプロパティ名を防ぐ。

3. `typeof`と`keyof`の違い

比較項目	`typeof`	`keyof`
役割	変数・オブジェクトの型を取得	オブジェクトのキーを取得
使用対象	値（変数・関数など）	型（インターフェース・型エイリアス）
主な用途	型定義の再利用	型安全なプロパティ参照
例	`typeof user` → `{ name: string; age: number; }`	`keyof Person` → `"name"

4. `typeof`と`keyof`の組み合わせ

typeof と keyof を組み合わせることで、オブジェクトのキーを動的に取得し、型安全な処理を行うことが可能です。

const settings = {
  theme: "dark",
  language: "ja",
  debug: true
};

type SettingKeys = keyof typeof settings;
// "theme" | "language" | "debug" 型として取得

function updateSetting(key: SettingKeys, value: string | boolean) {
  settings[key] = value;
}

updateSetting("theme", "light");  // OK
// updateSetting("mode", "light");  // エラー

この例では、オブジェクト settings のキーを型として取得し、安全なプロパティ更新を実現しています。

まとめ

TypeScriptの typeof と keyof を活用することで、より型安全なコードを記述でき、保守性の高いプログラムを構築できます。以下のポイントを押さえておきましょう。

typeof は変数や関数の型を取得するために使用
keyof はオブジェクトのキー（プロパティ名）を型として取得
組み合わせることで柔軟な型定義が可能

これらのキーワードを適切に使い分け、型の厳密性を確保しつつ、効率的なコーディングを目指しましょう！

アルアカ - Arcadia Academia