TypeScript開発の効率化！オブジェクトのキーと値の型を取得する4つの方法

2024-04-10

TypeScriptでオブジェクトのキーと値の型を取得

keyof 演算子を使うと、オブジェクトのキーの型を取得できます。

const obj = {
  name: "John Doe",
  age: 30,
};

type Keys = keyof typeof obj; // "name" | "age"

const name: Keys = "name"; // 型チェック OK
const age: Keys = 30; // 型エラー

この方法のメリットは、シンプルで分かりやすいコードを書けることです。デメリットは、オブジェクトの値の型を取得できないことです。

const obj = {
  name: "John Doe",
  age: 30,
};

type Obj = typeof obj; // { name: string; age: number; }

const person: Obj = {
  name: "Jane Doe",
  age: 25,
}; // 型チェック OK

const invalidPerson: Obj = {
  name: "John Doe",
  age: "30",
}; // 型エラー

この方法のメリットは、オブジェクトのキーと値の型を同時に取得できることです。デメリットは、コードが冗長になりやすいことです。

ユーティリティ型

keyof 演算子と typeof 演算子を組み合わせて、独自のユーティリティ型を作成することもできます。

type KeyValue<T> = {
  [K in keyof T]: T[K];
};

const obj = {
  name: "John Doe",
  age: 30,
};

type Person = KeyValue<typeof obj>; // { name: string; age: number; }

const person: Person = {
  name: "Jane Doe",
  age: 25,
}; // 型チェック OK

const invalidPerson: Person = {
  name: "John Doe",
  age: "30",
}; // 型エラー

この方法のメリットは、コードをより簡潔に書けることです。デメリットは、コードの理解度が下がる可能性があることです。

オブジェクトのキーと値の型を取得するには、さまざまな方法があります。それぞれの方法のメリット・デメリットを理解して、状況に応じて使い分けることが重要です。

keyof 演算子

const obj = {
  name: "John Doe",
  age: 30,
};

type Keys = keyof typeof obj; // "name" | "age"

const name: Keys = "name"; // 型チェック OK
const age: Keys = 30; // 型エラー

console.log(name); // "name"
console.log(age); // 型エラーが発生するため、この行は実行されない

typeof 演算子

const obj = {
  name: "John Doe",
  age: 30,
};

type Obj = typeof obj; // { name: string; age: number; }

const person: Obj = {
  name: "Jane Doe",
  age: 25,
}; // 型チェック OK

const invalidPerson: Obj = {
  name: "John Doe",
  age: "30",
}; // 型エラー

console.log(person); // { name: "Jane Doe", age: 25 }
console.log(invalidPerson); // 型エラーが発生するため、この行は実行されない

ユーティリティ型

type KeyValue<T> = {
  [K in keyof T]: T[K];
};

const obj = {
  name: "John Doe",
  age: 30,
};

type Person = KeyValue<typeof obj>; // { name: string; age: number; }

const person: Person = {
  name: "Jane Doe",
  age: 25,
}; // 型チェック OK

const invalidPerson: Person = {
  name: "John Doe",
  age: "30",
}; // 型エラー

console.log(person); // { name: "Jane Doe", age: 25 }
console.log(invalidPerson); // 型エラーが発生するため、この行は実行されない

これらのサンプルコードを実行することで、オブジェクトのキーと値の型を取得する方法をより深く理解することができます。

オブジェクトのキーと値の型を取得するその他の方法

Object.keys() と Object.values() を使って、オブジェクトのキーと値の配列を取得できます。

const obj = {
  name: "John Doe",
  age: 30,
};

const keys = Object.keys(obj); // ["name", "age"]
const values = Object.values(obj); // ["John Doe", 30]

const name = keys[0]; // "name"
const age = values[1]; // 30

console.log(name); // "name"
console.log(age); // 30

この方法は、オブジェクトのキーと値の配列を取得したい場合に便利です。ただし、配列の要素の型は string または any になるため、型安全性は低くなります。

for...in ループを使って、オブジェクトのキーと値を個別に取得できます。

const obj = {
  name: "John Doe",
  age: 30,
};

for (const key in obj) {
  const value = obj[key];

  console.log(key, value);
}

ライブラリ

typescript-library や reflect-metadata などのライブラリを使うと、オブジェクトのキーと値の型を取得する便利な機能が提供されます。

import { getKeys, getValues } from "typescript-library";

const obj = {
  name: "John Doe",
  age: 30,
};

const keys = getKeys(obj); // ["name", "age"]
const values = getValues(obj); // ["John Doe", 30]

const name = keys[0]; // "name"
const age = values[1]; // 30

console.log(name); // "name"
console.log(age); // 30