TypeScript Object.entries 型の詳細
2024-10-30
TypeScript の Object.entries() 関数は、オブジェクトのキーと値のペアを配列の形式で返します。しかし、デフォルトの型定義では、キーの型は常に string となり、値の型はオブジェクト全体の型となります。これにより、キーと値の具体的な関係が失われてしまいます。
この問題を解決するために、ジェネリック型を用いて、キーと値のペアの正確な型を保持する Object.entries 型を定義することができます。
具体的な例
interface Person {
name: string;
age: number;
}
const person: Person = {
name: 'Alice',
age: 30,
};
// デフォルトの Object.entries 型
const entries1 = Object.entries(person);
// entries1 の型: [string, Person][]
// キーと値の関係を保持する Object.entries 型
type Entries<T> = {
[K in keyof T]: [K, T[K]];
}[keyof T][];
const entries2: Entries<Person> = Object.entries(person);
// entries2 の型: [[keyof Person, Person[keyof Person]]][]
// 具体的には: [['name', string], ['age', number]][]
解説
-
Object.entriesの利用entries2にObject.entries(person)を代入すると、TypeScript はEntries<Person>型を推論します。- これにより、
entries2の各要素は[keyof Person, Person[keyof Person]]型を持ちます。つまり、キーの型と値の型が正確に保持されます。
利点
- より強力な型チェック
TypeScript の型システムを活用して、より厳密な型チェックが可能になります。 - コードの可読性
型情報が明確になることで、コードの理解が容易になります。 - 型安全性の向上
キーと値の型が正確に保持されるため、誤った操作や型エラーを防止できます。
注意
- 動的なオブジェクトや複雑な型の場合、適切な型定義が必要となります。
- この手法は、オブジェクトの構造が静的に知られている場合に有効です。
interface Person {
name: string;
age: number;
}
const person: Person = {
name: 'Alice',
age: 30,
};
const entries: [keyof Person, Person[keyof Person]][] = Object.entries(person);
// entries の型: [['name', string], ['age', number]][]
解説
- この例では、
entriesの型は[['name', string], ['age', number]][]となります。 entries変数の型は[keyof Person, Person[keyof Person]][]と指定されています。これは、各要素が[キーの型, 値の型]のペアであることを意味します。Object.entries(person)はpersonオブジェクトのキーと値のペアを配列の形式で返します。Personインターフェースはnameプロパティとageプロパティを持つオブジェクトの型を定義します。
例 2: ネストされたオブジェクト
interface Address {
street: string;
city: string;
}
interface User {
name: string;
age: number;
address: Address;
}
const user: User = {
name: 'Bob',
age: 25,
address: {
street: '123 Main St',
city: 'Anytown',
},
};
const entries: [keyof User, User[keyof User]][] = Object.entries(user);
// entries の型: [['name', string], ['age', number], ['address', Address]][]
entries変数の型は[keyof User, User[keyof User]][]と指定されています。
インデックスシグネチャを用いて、オブジェクトのキーと値のペアをより柔軟に表現することができます。
type KeyValuePairs<T> = {
[K in keyof T]: [K, T[K]];
}[keyof T][];
// 使用例
const person: Person = {
name: 'Alice',
age: 30,
};
const entries: KeyValuePairs<Person> = Object.entries(person);
型ガードと条件付き型
型ガードと条件付き型を用いて、キーと値のペアの型をより詳細に指定することができます。
type KeyValuePairs<T> = {
[K in keyof T]: K extends 'name' ? [K, string] : K extends 'age' ? [K, number] : never;
}[keyof T][];
マッピング型
マッピング型を用いて、オブジェクトの各プロパティに対してカスタムの変換を行うことができます。
type KeyValuePairs<T> = {
[K in keyof T]: [K, T[K]];
}[keyof T][];
// 使用例
const person: Person = {
name: 'Alice',
age: 30,
};
const entries: KeyValuePairs<Person> = Object.entries(person).map(([key, value]) => [key, value.toString()]);
選択のポイント
- 柔軟性
マッピング型は柔軟な変換が可能ですが、複雑なロジックが必要な場合、コードが読みにくくなることがあります。 - 正確性
型ガードと条件付き型は正確な型情報を提供できますが、複雑なオブジェクトの場合、冗長な定義が必要になることがあります。 - シンプルさ
インデックスシグネチャはシンプルで使いやすいですが、柔軟性に欠ける場合があります。
typescript typescript-generics
