TypeScript：インデックスシグネチャで動的キーを持つオブジェクトを定義する
TypeScriptで動的キーを持つオブジェクトのインターフェースを定義する方法
Record 型は、キーと値の型を引数として受け取り、その型のオブジェクトを表現する型です。動的キーを持つオブジェクトを定義するには、キーの型に string を使用します。
interface DynamicObject {
[key: string]: any;
}
このインターフェースは、string 型のキーを持つオブジェクトを表現し、値の型は any 型で任意の型を受け付けます。
ジェネリック型を使用すると、動的にキーと値の型を指定することができます。
interface DynamicObject<K extends string, V> {
[key in K]: V;
}
このインターフェースは、K 型のキーと V 型の値を持つオブジェクトを表現します。K 型と V 型は、使用時に具体的な型を指定する必要があります。
const obj1: DynamicObject<string, number> = {
name: "John Doe",
age: 30,
};
const obj2: DynamicObject<string, boolean> = {
isMale: true,
isAdult: true,
};
このように、ジェネリック型を使用することで、さまざまな型の動的キーを持つオブジェクトを定義できます。
インデックスシグネチャは、オブジェクトのキーと値の型を定義する構文です。
interface DynamicObject {
[key: string]: any;
}
Partial 型は、既存のインターフェースから一部のプロパティを省略した新しいインターフェースを作成する型です。
interface Person {
name: string;
age: number;
}
interface PartialPerson = Partial<Person>;
PartialPerson インターフェースは、Person インターフェースのすべてのプロパティが省略可能になっています。
const person: PartialPerson = {
name: "John Doe",
};
このように、Partial 型を使用することで、動的にプロパティが存在するオブジェクトを定義できます。
TypeScriptで動的キーを持つオブジェクトのインターフェースを定義するには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあり、状況によって使い分ける必要があります。
Record 型を使用する
interface DynamicObject {
[key: string]: any;
}
const obj: DynamicObject = {
name: "John Doe",
age: 30,
isMale: true,
};
console.log(obj.name); // "John Doe"
console.log(obj.age); // 30
console.log(obj.isMale); // true
ジェネリック型を使用する
interface DynamicObject<K extends string, V> {
[key in K]: V;
}
const obj1: DynamicObject<string, number> = {
name: "John Doe",
age: 30,
};
const obj2: DynamicObject<string, boolean> = {
isMale: true,
isAdult: true,
};
console.log(obj1.name); // "John Doe"
console.log(obj1.age); // 30
console.log(obj2.isMale); // true
console.log(obj2.isAdult); // true
インデックスシグネチャを使用する
interface DynamicObject {
[key: string]: any;
}
const obj: DynamicObject = {
name: "John Doe",
age: 30,
isMale: true,
};
console.log(obj.name); // "John Doe"
console.log(obj.age); // 30
console.log(obj.isMale); // true
Partial 型を使用する
interface Person {
name: string;
age: number;
}
interface PartialPerson = Partial<Person>;
const person: PartialPerson = {
name: "John Doe",
};
console.log(person.name); // "John Doe"
console.log(person.age); // undefined
動的キーを持つオブジェクトのインターフェースを定義するその他の方法
Map 型を使用する
Map 型は、キーと値のペアを格納するデータ構造です。動的キーを持つオブジェクトを定義するには、string 型をキーの型として使用できます。
const obj: Map<string, any> = new Map();
obj.set("name", "John Doe");
obj.set("age", 30);
obj.set("isMale", true);
console.log(obj.get("name")); // "John Doe"
console.log(obj.get("age")); // 30
console.log(obj.get("isMale")); // true
Record<string, unknown> 型は、string 型のキーと unknown 型の値を持つオブジェクトを表現します。unknown 型は、値の型が不明であることを示します。
const obj: Record<string, unknown> = {
name: "John Doe",
age: 30,
isMale: true,
};
console.log(obj.name); // "John Doe"
console.log(obj.age); // 30
console.log(obj.isMale); // true
any 型を使用する
any 型は、あらゆる型の値を受け付ける型です。動的キーを持つオブジェクトを定義するには、any 型を使用できます。
const obj: any = {
name: "John Doe",
age: 30,
isMale: true,
};
console.log(obj.name); // "John Doe"
console.log(obj.age); // 30
console.log(obj.isMale); // true
ただし、any 型を使用すると、型の安全性
typescript
