【初心者向け】TypeScript インターフェースとコンストラクトシグネチャの基礎
インターフェースとコンストラクトシグネチャ
コンストラクトシグネチャは、クラスのコンストラクタの型を定義するものです。コンストラクタは、クラスの新しいインスタンスを作成するときに呼び出される関数です。
インターフェースとコンストラクトシグネチャを組み合わせることで、オブジェクトの構造と、そのオブジェクトを作成するための方法を同時に定義することができます。
インターフェースにコンストラクトシグネチャを定義するには、new キーワードを使って、コンストラクタの引数と戻り値の型を記述します。
interface Person {
name: string;
age: number;
// コンストラクトシグネチャ
new (name: string, age: number): Person;
}
この例では、Person インターフェースは、name と age という2つのプロパティを持つオブジェクトを表します。また、new キーワードを使って、name と age という2つの引数を受け取り、Person 型のオブジェクトを返すコンストラクトシグネチャも定義しています。
インターフェースとコンストラクトシグネチャを組み合わせることで、以下のようなことができます。
- オブジェクトの構造を厳密に定義し、型安全性を向上させる
- オブジェクトを作成するためのコードを簡潔に記述する
- 異なるクラス間で共通のインターフェースを実装することで、コードの再利用性を高める
以下は、インターフェースとコンストラクトシグネチャの使い例です。
// Person インターフェース
interface Person {
name: string;
age: number;
// コンストラクトシグネチャ
new (name: string, age: number): Person;
}
// Person インターフェースを実装するクラス
class Employee implements Person {
constructor(public name: string, public age: number, public jobTitle: string) {}
}
// Person インターフェース型の変数
let person: Person;
// コンストラクトシグネチャを使って、Employee クラスの新しいインスタンスを作成
person = new Employee("John Doe", 30, "Software Engineer");
console.log(person.name); // "John Doe"
console.log(person.age); // 30
console.log(person.jobTitle); // "Software Engineer"
この例では、Person インターフェースと Employee クラスを定義しています。Person インターフェースは、name と age という2つのプロパティと、new キーワードを使ったコンストラクトシグネチャを定義しています。Employee クラスは、Person インターフェースを実装し、jobTitle という追加プロパティを持つクラスです。
person 変数は Person 型なので、Employee クラスの新しいインスタンスを代入することができます。コンストラクトシグネチャを使うことで、name と age という2つの引数を渡して、Employee クラスの新しいインスタンスを作成することができます。
// Person インターフェース
interface Person {
name: string;
age: number;
// コンストラクトシグネチャ
new (name: string, age: number): Person;
}
// Person インターフェースを実装するクラス
class Employee implements Person {
constructor(public name: string, public age: number, public jobTitle: string) {}
}
// Person インターフェース型の変数
let person: Person;
// コンストラクトシグネチャを使って、Employee クラスの新しいインスタンスを作成
person = new Employee("John Doe", 30, "Software Engineer");
console.log(person.name); // "John Doe"
console.log(person.age); // 30
console.log(person.jobTitle); // "Software Engineer"
// インターフェースを使って、オブジェクトの構造を検証
function validatePerson(person: Person): boolean {
return person.name && person.age >= 0;
}
// 検証結果を出力
console.log(validatePerson(person)); // true
// インターフェースを使って、異なるクラス間で共通のインターフェースを実装
interface Animal {
name: string;
makeSound(): string;
}
class Dog implements Animal {
constructor(public name: string) {}
makeSound(): string {
return "Woof!";
}
}
class Cat implements Animal {
constructor(public name: string) {}
makeSound(): string {
return "Meow!";
}
}
// Animal インターフェース型の変数
let animal: Animal;
// 異なるクラスのオブジェクトを代入
animal = new Dog("Rex");
console.log(animal.name); // "Rex"
console.log(animal.makeSound()); // "Woof!"
animal = new Cat("Whiskers");
console.log(animal.name); // "Whiskers"
console.log(animal.makeSound()); // "Meow!"
このサンプルコードでは、以下のようなことを行っています。
PersonインターフェースとEmployeeクラスを定義し、Personインターフェースを実装するPersonインターフェース型の変数を使って、Employeeクラスの新しいインスタンスを作成- インターフェースを使って、オブジェクトの構造を検証
- インターフェースを使って、異なるクラス間で共通のインターフェースを実装
- サンプルコードは、あくまで参考です。必要に応じて変更してください。
- TypeScript のバージョンによって、インターフェースとコンストラクトシグネチャの機能が異なる場合があります。詳細は、TypeScript の公式ドキュメントを参照してください。
クラスは、オブジェクトの構造と作成方法を定義するための最も一般的な方法です。クラスには、プロパティ、メソッド、コンストラクタなど、オブジェクトの構成要素を定義することができます。
class Person {
constructor(public name: string, public age: number) {}
getName(): string {
return this.name;
}
getAge(): number {
return this.age;
}
}
// Person クラスの新しいインスタンスを作成
const person = new Person("John Doe", 30);
console.log(person.getName()); // "John Doe"
console.log(person.getAge()); // 30
ファクトリー関数は、オブジェクトを作成するための関数です。ファクトリー関数は、オブジェクトの構造を定義するインターフェースを受け取り、そのインターフェースに基づいて新しいオブジェクトを作成します。
interface Person {
name: string;
age: number;
}
function createPerson(name: string, age: number): Person {
return {
name,
age,
};
}
// ファクトリー関数を使って、新しいオブジェクトを作成
const person = createPerson("John Doe", 30);
console.log(person.name); // "John Doe"
console.log(person.age); // 30
オブジェクトリテラルは、オブジェクトを直接記述する方法です。オブジェクトリテラルは、プロパティと値のペアのリストで構成されます。
const person = {
name: "John Doe",
age: 30,
};
console.log(person.name); // "John Doe"
console.log(person.age); // 30
- オブジェクトの構造が複雑で、多くのプロパティやメソッドを持つ場合は、クラスを使用するのが適切です。
- オブジェクトの構造が単純で、いくつかのプロパティのみを持つ場合は、ファクトリー関数やオブジェクトリテラルを使用するのが適切です。
インターフェースとコンストラクトシグネチャは、オブジェクトの構造と作成方法を定義する強力な方法です。しかし、状況によっては、クラス、ファクトリー関数、オブジェクトリテラルなどの他の方法を使用する方が適切な場合があります。
typescript constructor interface
