TypeScriptインターフェース：ジェネリック型、asキーワード、Object.assign を駆使したオブジェクト作成
2024-04-02
TypeScriptでインターフェースファイル定義に基づいてオブジェクトを作成する方法
リテラル構文を使用する
最も簡単な方法は、リテラル構文を使用することです。インターフェースで定義されたプロパティ名と型を一致させ、値を指定します。
interface Person {
name: string;
age: number;
}
const person: Person = {
name: "山田太郎",
age: 30,
};
new キーワードを使用する
インターフェースと一致するコンストラクタを持つクラスを作成することもできます。
interface Person {
name: string;
age: number;
constructor(name: string, age: number);
}
class Person implements Person {
constructor(public name: string, public age: number) {}
}
const person = new Person("山田太郎", 30);
ファクトリー関数を使用する
interface Person {
name: string;
age: number;
}
function createPerson(name: string, age: number): Person {
return {
name,
age,
};
}
const person = createPerson("山田太郎", 30);
オブジェクトマッピングを使用する
lodash などのライブラリを使用して、オブジェクトをインターフェースと一致するオブジェクトにマッピングすることもできます。
interface Person {
name: string;
age: number;
}
const person = {
firstName: "山田",
lastName: "太郎",
age: 30,
};
const mappedPerson = _.mapKeys(person, (value, key) => {
if (key === "firstName") {
return "name";
}
return key;
});
console.log(mappedPerson); // { name: "山田太郎", age: 30 }
これらの方法のいずれを使用しても、インターフェースファイル定義に基づいてオブジェクトを作成することができます。どの方法を使用するかは、状況によって異なります。
リテラル構文を使用する
interface Person {
name: string;
age: number;
}
const person: Person = {
name: "山田太郎",
age: 30,
};
console.log(person.name); // 山田太郎
console.log(person.age); // 30
new キーワードを使用する
interface Person {
name: string;
age: number;
constructor(name: string, age: number);
}
class Person implements Person {
constructor(public name: string, public age: number) {}
}
const person = new Person("山田太郎", 30);
console.log(person.name); // 山田太郎
console.log(person.age); // 30
ファクトリー関数を使用する
interface Person {
name: string;
age: number;
}
function createPerson(name: string, age: number): Person {
return {
name,
age,
};
}
const person = createPerson("山田太郎", 30);
console.log(person.name); // 山田太郎
console.log(person.age); // 30
オブジェクトマッピングを使用する
interface Person {
name: string;
age: number;
}
const person = {
firstName: "山田",
lastName: "太郎",
age: 30,
};
const mappedPerson = _.mapKeys(person, (value, key) => {
if (key === "firstName") {
return "name";
}
return key;
});
console.log(mappedPerson); // { name: "山田太郎", age: 30 }
インターフェースファイル定義に基づいてオブジェクトを作成するその他の方法
interface Person {
name: string;
age: number;
}
function createPerson<T extends Person>(data: T): T {
return data;
}
const person = createPerson({
name: "山田太郎",
age: 30,
});
console.log(person.name); // 山田太郎
console.log(person.age); // 30
as キーワードを使用して、インターフェースと一致する型にオブジェクトをキャストすることができます。
interface Person {
name: string;
age: number;
}
const person = {
firstName: "山田",
lastName: "太郎",
age: 30,
};
const mappedPerson = person as Person;
console.log(mappedPerson.name); // 山田太郎
console.log(mappedPerson.age); // 30
interface Person {
name: string;
age: number;
}
const person = {
firstName: "山田",
lastName: "太郎",
age: 30,
};
const mappedPerson = Object.assign({}, person, {
name: `${person.firstName} ${person.lastName}`,
});
console.log(mappedPerson.name); // 山田太郎
console.log(mappedPerson.age); // 30
typescript
