Object.keys の代替方法：for...in ループ、Reflect.ownKeys メソッド、オブジェクトの型、ライブラリ

2024-04-02

TypeScript: Object.keys は文字列の配列を返します

例:

const object = {
  name: "John Doe",
  age: 30,
  city: "Tokyo",
};

const keys = Object.keys(object);

console.log(keys); // ["name", "age", "city"]

上記コードでは、Object.keys はオブジェクト object のプロパティ名である "name", "age", "city" を含む文字列の配列を返します。

注意点:

Object.keys はオブジェクトの列挙可能なプロパティのみを返します。シンボルプロパティは返されません。
オブジェクトの型が不明な場合、Object.keys は string[] 型の配列を返しますが、各要素の型は string 型のみとなります。オブジェクトのプロパティの型情報を保持したい場合は、より詳細な型定義が必要となります。

型情報の保持:

オブジェクトのプロパティの型情報を保持したい場合は、以下の方法があります。

オブジェクトリテラルを使用する:

const object: {
  name: string;
  age: number;
  city: string;
} = {
  name: "John Doe",
  age: 30,
  city: "Tokyo",
};

const keys = Object.keys(object);

// keys の型は ("name" | "age" | "city")[] となる

keyof 演算子を使用する:

type ObjectKeys = keyof typeof object;

const keys: ObjectKeys[] = Object.keys(object) as ObjectKeys[];

// keys の型は ("name" | "age" | "city")[] となる

これらの方法により、Object.keys から返される配列の各要素の型をより詳細に定義することができます。

オブジェクトのプロパティ名を取得する:

const object = {
  name: "John Doe",
  age: 30,
  city: "Tokyo",
};

const keys = Object.keys(object);

console.log(keys); // ["name", "age", "city"]

const object = {
  name: "John Doe",
  age: 30,
  city: "Tokyo",
};

const keys = Object.keys(object);

for (const key of keys) {
  console.log(object[key]); // "John Doe", 30, "Tokyo"
}

const object = {
  name: "John Doe",
  age: 30,
  city: "Tokyo",
};

const keys = Object.keys(object);

keys.forEach((key) => {
  console.log(key, object[key]); // "name", "John Doe", "age", 30, "city", "Tokyo"
});

const object: {
  name: string;
  age: number;
  city: string;
} = {
  name: "John Doe",
  age: 30,
  city: "Tokyo",
};

const keys = Object.keys(object);

// keys の型は ("name" | "age" | "city")[] となる

keys.forEach((key) => {
  console.log(key, object[key]); // "name", "John Doe", "age", 30, "city", "Tokyo"
});

type ObjectKeys = keyof typeof object;

const keys: ObjectKeys[] = Object.keys(object) as ObjectKeys[];

// keys の型は ("name" | "age" | "city")[] となる

keys.forEach((key) => {
  console.log(key, object[key]); // "name", "John Doe", "age", 30, "city", "Tokyo"
});

これらのサンプルコードは、Object.keys を使用してオブジェクトの情報を取得する方法を理解するのに役立ちます。

オブジェクトのプロパティ名を取得する他の方法

for...in ループを使用する

const object = {
  name: "John Doe",
  age: 30,
  city: "Tokyo",
};

for (const key in object) {
  console.log(key); // "name", "age", "city"
}

for...in ループは、オブジェクトのすべてのプロパティをループ処理します。これは、列挙可能なプロパティと非列挙可能なプロパティの両方を含むすべてのプロパティを取得したい場合に便利です。

Reflect.ownKeys メソッドを使用する

const object = {
  name: "John Doe",
  age: 30,
  city: "Tokyo",
};

const keys = Reflect.ownKeys(object);

console.log(keys); // ["name", "age", "city"]

Reflect.ownKeys メソッドは、オブジェクトの自身のプロパティのみを取得します。これは、プロトタイプチェーンから継承されたプロパティを取得したくない場合に便利です。

const object: {
  name: string;
  age: number;
  city: string;
} = {
  name: "John Doe",
  age: 30,
  city: "Tokyo",
};

const keys: (keyof typeof object)[] = ["name", "age", "city"];

console.log(keys); // ["name", "age", "city"]

オブジェクトの型がわかっている場合は、その型を利用してプロパティ名の配列を直接定義することができます。これは、最も効率的な方法ですが、オブジェクトの型が変更された場合は、コードも変更する必要があります。

ライブラリを使用する

Lodash などのライブラリには、オブジェクトのプロパティを取得するための便利なヘルパー関数があります。

import _ from "lodash";

const object = {
  name: "John Doe",
  age: 30,
  city: "Tokyo",
};

const keys = _.keys(object);

console.log(keys); // ["name", "age", "city"]