TypeScriptの型安全を高める魔法 keyof と typeof の使い方

今回はTypeScriptでよく見かける keyof と typeof について分かりやすく具体的なコードを使って解説します。
これらはTypeScriptの強力な型システムの一部でより柔軟で安全なコードを書くときに役立ちます！

keyof とは？ 🤔

keyof は、オブジェクト型のキーを取得するTypeScriptの型演算子です。

オブジェクト型に対して使うことで、その オブジェクトのすべてのキーを文字列リテラル型のUnion型として取得 できます。
実際のコードを見てみましょう。

type Person = {
  name: string;
  age: number;
};

type PersonKeys = keyof Person;

この例では PersonKeys は "name" | "age" という型になります。
このようにオブジェクトからキーの型を取得できるわけですね。

keyof の使い方 🛠️

次は keyof を使ってプロパティアクセスの型安全性を向上させる方法を紹介します。

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

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

const name = getProperty(person, "name"); // OK
const age = getProperty(person, "age"); // OK
const invalid = getProperty(person, "invalid"); // Error: Argument of type '"invalid"' is not assignable to parameter of type 'keyof Person'.

上記のコードの getProperty 関数はオブジェクトとキーを受け取り、そのキーのプロパティ値を返します。

keyof を使っているので無効なキーを渡すとコンパイル時にエラーが発生します。
これによって安全にプロパティを参照できるようになっています。

型ガードで TypeScript コードを強化！わかりやすい解説と実践例

型ガードを使ってTypeScriptのコードを安全・堅牢に！具体例も紹介しています。

gizanbeak.com

typeof とは？ 🧐

次は typeof について解説します。

typeof は値の型を取得するTypeScriptの型演算子です。
これを使うことで既存の値の型を参照して新しい型を定義できます。

const examplePerson = {
  name: "Taro",
  age: 30,
};

type ExamplePersonType = typeof examplePerson;

この例では ExamplePersonType は { name: string; age: number; } という型になります。
typeof はこのように既存の値から型を生成できます。

typeof の使い方 🔧

次は実践的なコードで具体的な使い方を紹介します。

typeof を使って、関数の引数と戻り値の型を簡単に定義してみましょう。

function clonePerson(person: typeof examplePerson): typeof examplePerson {
  return { ...person };
}

const clonedPerson = clonePerson(examplePerson); // OK

このコード内の clonePerson 関数は examplePerson の型を引数と戻り値の型として使っています。
typeof を使うことで examplePerson の型が変更された場合にも、それに対応しやすくなるというメリットがあります。

keyof と typeof を併用する使い方 🤝

最後にこれまで紹介した keyof と typeof を組み合わせてさらに強力な型安全性を実現する方法を紹介します！

function setProperty<T, K extends keyof T>(
  obj: T,
  key: K,
  value: T[K]
): void {
  obj[key] = value;
}

const newPerson: typeof examplePerson = {
  name: "Jiro",
  age: 25,
};

setProperty(newPerson, "name", "Saburo"); // OK
setProperty(newPerson, "age", 35); // OK
setProperty(newPerson, "invalid", "value"); // Error: Argument of type '"invalid"' is not assignable to parameter of type 'keyof ExamplePersonType'.

setProperty 関数はオブジェクトとキー、そしてそのキーの値を受け取ってオブジェクトのプロパティを更新しています。
いわゆるセッターと呼ばれるメソッドですね。

このように keyof と typeof を組み合わせることで無効なキーを渡すとコンパイル時にエラーが発生し、さらに適切な型の値も要求する型安全なコードを書くことができます。

まとめ 🎉

今回の記事では、TypeScriptの keyof と typeof について具体的なコード例を交えて解説しました。

これらの型演算子を使うことで型安全性を向上させることができます。
ぜひ、ご自身のプロジェクトで活用してみてください！

Gizanbeak