TypeScriptインターフェースのキーを配列に変換する：5つの方法のメリットとデメリット

2024-04-02

TypeScriptインターフェースのキーを文字列の配列として取得する方法

keyof 演算子は、インターフェースのすべてのキーを文字列リテラルのユニオン型として取得するために使用できます。

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

const keys: Array<keyof MyInterface> = ['name', 'age', 'address'];

// または
const keys2: (keyof MyInterface)[] = ['name', 'age', 'address'];

この方法の利点は、簡潔で分かりやすいことです。ただし、キーの順序は保証されません。

Object.keys() メソッドは、オブジェクトのすべてのキーを文字列の配列として取得するために使用できます。

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

const myObject: MyInterface = {
  name: 'John Doe',
  age: 30,
  address: '123 Main Street',
};

const keys: string[] = Object.keys(myObject);

// ['name', 'age', 'address']

この方法の利点は、キーの順序が元のオブジェクトと同じになることです。ただし、インターフェースではなくオブジェクトに対して使用する必要があります。

以上、TypeScriptインターフェースのキーを文字列の配列として取得する方法を2つ紹介しました。状況に合わせて適切な方法を選択してください。

上記以外にも、Reflect.ownKeys() メソッドや for...in ループを使う方法などもあります。

キーの型を string ではなく keyof MyInterface とすることで、より安全なコードを書くことができます。

// インターフェースの定義
interface MyInterface {
  name: string;
  age: number;
  address: string;
}

// `keyof` 演算子を使う方法
const keys1: Array<keyof MyInterface> = ['name', 'age', 'address'];

// または
const keys2: (keyof MyInterface)[] = ['name', 'age', 'address'];

// `Object.keys()` メソッドを使う方法
const myObject: MyInterface = {
  name: 'John Doe',
  age: 30,
  address: '123 Main Street',
};

const keys3: string[] = Object.keys(myObject);

// すべてのキーを出力
console.log(keys1); // ['name', 'age', 'address']
console.log(keys2); // ['name', 'age', 'address']
console.log(keys3); // ['name', 'age', 'address']

// 特定のキーの値を取得
console.log(myObject[keys1[0]]); // 'John Doe'
console.log(myObject[keys2[1]]); // 30
console.log(myObject[keys3[2]]); // '123 Main Street'

実行結果

['name', 'age', 'address']
['name', 'age', 'address']
['name', 'age', 'address']
John Doe
30
123 Main Street

説明

1つ目は keyof 演算子を使う方法です。keyof MyInterface とすることで、MyInterface のすべてのキーを文字列リテラルのユニオン型として取得できます。

2つ目は Object.keys() メソッドを使う方法です。Object.keys(myObject) とすることで、myObject オブジェクトのすべてのキーを文字列の配列として取得できます。

TypeScriptインターフェースのキーを文字列の配列として取得するその他の方法

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

const myObject: MyInterface = {
  name: 'John Doe',
  age: 30,
  address: '123 Main Street',
};

const keys: string[] = Object.getOwnPropertyNames(myObject);

// ['name', 'age', 'address']

この方法は、Object.keys() メソッドと似ていますが、以下の点が異なります。

継承されたプロパティは取得されない。
プロパティ名の順序は、オブジェクトの作成順序に基づいている。

for...in ループを使用して、オブジェクトのすべてのプロパティをループ処理し、キーを取得することもできます。

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

const myObject: MyInterface = {
  name: 'John Doe',
  age: 30,
  address: '123 Main Street',
};

const keys: string[] = [];

for (const key in myObject) {
  keys.push(key);
}

// ['name', 'age', 'address']

この方法は、他の方法よりも冗長ですが、すべてのプロパティを取得したい場合に役立ちます。

ライブラリを使う

fp-ts などのライブラリには、インターフェースのキーを取得するためのユーティリティ関数が含まれています。

import { keys } from 'fp-ts/lib/Record';

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

const myObject: MyInterface = {
  name: 'John Doe',
  age: 30,
  address: '123 Main Street',
};

const keys: string[] = keys(myObject);

// ['name', 'age', 'address']