インターフェースとクラスを使いこなして、型安全で堅牢なTypeScriptコードを書こう！
TypeScriptにおけるインターフェースとクラスのコーディングガイドライン：詳細解説
しかし、インターフェースとクラスの使い分けや、それぞれのコーディングガイドラインについて理解が不十分だと、混乱やエラーの原因となる可能性があります。そこで、本記事では、TypeScriptにおけるインターフェースとクラスのコーディングガイドラインを詳細に解説し、それぞれの役割と使い分けを明確にします。
インターフェースとは？
インターフェースは、オブジェクトの構造と機能を定義するための型宣言です。具体的には、オブジェクトが持つべきプロパティとその型、およびメソッドのシグネチャ（名前、引数、戻り値の型）を記述します。
インターフェースは、オブジェクトの具体的な実装を定義するものではありません。あくまでも、オブジェクトが満たすべき契約を定めるものです。オブジェクトがインターフェースを実装するには、そのインターフェースで定義されたすべてのプロパティとメソッドを備え、シグネチャが一致している必要があります。
- コードの保守性を向上させる：インターフェースにより、オブジェクトの構造と機能が明確に定義されるため、コードを読みやすく、理解しやすく、保守しやすくなります。
- コードの再利用性を高める：共通のインターフェースを定義することで、異なるオブジェクト間でコードを共有しやすくなります。
- 型安全性を向上させる：コンパイラは、オブジェクトがインターフェースで定義された型と一致しているかどうかをチェックし、型エラーを防ぎます。
interface Person {
name: string;
age: number;
greet(): void;
}
この例では、Person というインターフェースを定義しています。このインターフェースを実装するオブジェクトは、name プロパティ (型: string) と age プロパティ (型: number) を持ち、greet() メソッドを持つ必要があります。
クラスとは？
クラスは、オブジェクトの具体的な実装を定義するためのテンプレートです。インターフェースで定義された構造と機能を具現化し、さらに具体的な動作やデータを追加することができます。
クラスには、以下の要素が含まれます。
- アクセッサ: プロパティの読み書きを制御する特殊なメソッドです。
- メソッド: オブジェクトの機能を実装する関数です。
- プロパティ: オブジェクトの状態を表す変数です。
- コンストラクタ: オブジェクトを初期化する際に呼び出される特別なメソッドです。
クラスの利点
- コードの保守性を向上させる：クラスにより、コードが構造化され、読みやすく、理解しやすく、保守しやすくなります。
- コードをモジュール化できる：クラスは、コードを論理的なモジュールに分割し、再利用性を高めるのに役立ちます。
- オブジェクト指向プログラミングの原則に基づいたコードを記述できる：クラスは、カプセル化、継承、多態性などのオブジェクト指向プログラミングの原則を実装するための基盤を提供します。
クラスの例
class Person implements Person {
constructor(public name: string, public age: number) {}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
この例では、Person インターフェースを実装する Person クラスを定義しています。このクラスは、コンストラクタ、greet() メソッド、および name と age の 2 つのプロパティを持ちます。
インターフェースとクラスの使い分け
インターフェースとクラスは、それぞれ異なる役割を持ちますが、密接に連携して使用されます。一般的に、以下のガイドラインに従って使い分けることをお勧めします。
- クラス:
- オブジェクトの具体的な実装を定義したい場合
- オブジェクト指向プログラミングの原則に基づいたコードを記述したい場合
- コードをモジュール化したい場合
- オブジェクトの状態と動作をカプセル化したい場合
- インターフェース:
- 共通の構造と機能を定義したい場合
- 型安全性を向上させたい場合
- コードの再利用性を高めたい場合
- 異なるオブジェクト間でやり取りするデータの型を定義したい場合
コーディングガイドライン
- インターフェース名は、通常、PascalCase で
この例では、Person というシンプルなインターフェースを定義します。このインターフェースは、name (型: string) と age (型: number) という 2 つのプロパティを持つオブジェクトを表します。
interface Person {
name: string;
age: number;
}
オプションのプロパティ
この例では、Address というインターフェースを定義します。このインターフェースは、street (型: string)、city (型: string)、state (型: string)、および postalCode (型: string) という 4 つのプロパティを持つオブジェクトを表します。ただし、city、state、および postalCode プロパティはオプションであり、定義する必要はありません。
interface Address {
street: string;
city?: string;
state?: string;
postalCode?: string;
}
メソッドのシグネチャ
この例では、Product というインターフェースを定義します。このインターフェースは、name (型: string)、price (型: number)、および calculateTax() というメソッドを持つオブジェクトを表します。calculateTax() メソッドは、製品の税額を計算して返す数値 (型: number) を受け取ります。
interface Product {
name: string;
price: number;
calculateTax(): number;
}
インターフェースを実装するクラス
この例では、Person インターフェースを実装する Employee クラスを定義します。Employee クラスは、name (型: string)、age (型: number)、および jobTitle (型: string) という 3 つのプロパティを持つオブジェクトを表します。また、greet() メソッドを実装しています。
interface Person {
name: string;
age: number;
}
class Employee implements Person {
constructor(public name: string, public age: number, public jobTitle: string) {}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old. I am a ${this.jobTitle}.`);
}
}
継承
この例では、Vehicle という基底クラスと、Car および Truck という派生クラスを定義します。Vehicle クラスは、color (型: string) および numberOfWheels (型: number) という 2 つのプロパティを持つオブジェクトを表します。Car クラスは、Vehicle クラスを継承し、seats (型: number) というプロパティを追加します。Truck クラスも Vehicle クラスを継承し、bedLength (型: number) というプロパティを追加します。
class Vehicle {
constructor(public color: string, public numberOfWheels: number) {}
}
class Car extends Vehicle {
constructor(color: string, numberOfWheels: number, public seats: number) {
super(color, numberOfWheels);
}
}
class Truck extends Vehicle {
constructor(color: string, numberOfWheels: number, public bedLength: number) {
super(color, numberOfWheels);
}
}
アクセッサ
この例では、Product クラスを定義し、price プロパティの読み書きを制御するアクセッサを実装します。
class Product {
private price: number;
constructor(public name: string, price: number) {
this.price = price;
}
getPrice(): number {
return this.price;
}
setPrice(newPrice: number): void {
this.price = newPrice;
}
}
これらの例は、TypeScriptにおけるインターフェースとクラスの基本的な使用方法を示しています。より複雑なシナリオについては、TypeScript の公式ドキュメント を参照してください。
- [TypeScript インターフェース
TypeScript におけるインターフェースとクラスの高度なコーディング手法
ジェネリックインターフェース
ジェネリックインターフェースを使用すると、インターフェースを定義する際に型パラメータを指定できます。これにより、さまざまな型のデータを処理できる柔軟で再利用可能なインターフェースを作成できます。
interface Container<T> {
items: T[];
add(item: T): void;
remove(item: T): void;
}
この例では、Container というジェネリックインターフェースを定義します。このインターフェースは、items というプロパティ (型: T[]) と、add および remove という 2 つのメソッドを持ちます。T は型パラメータであり、Container インターフェースが使用される際に具体的な型に置き換えられます。
ジェネリックインターフェースは、さまざまな種類のデータコレクションを表すために使用できます。たとえば、次のように NumberContainer と StringContainer という 2 つの具体的なインターフェースを定義できます。
interface NumberContainer extends Container<number> {}
interface StringContainer extends Container<string> {}
インターフェースは、他のインターフェースを継承することができます。これにより、既存のインターフェースの機能を拡張した新しいインターフェースを作成できます。
interface Person {
name: string;
age: number;
}
interface Employee extends Person {
jobTitle: string;
employeeId: number;
}
この例では、Employee というインターフェースを定義します。このインターフェースは、Person インターフェースを継承し、jobTitle (型: string) および employeeId (型: number) という 2 つのプロパティを追加します。
インターフェースの継承は、コードの再利用性を高め、関連するインターフェース間の一貫性を保つのに役立ちます。
型エイリアス
型エイリアスを使用すると、既存の型に新しい名前を定義できます。これにより、コードをより読みやすく、理解しやすくすることができます。
type Person = {
name: string;
age: number;
};
type Employee = Person & {
jobTitle: string;
employeeId: number;
};
次に、Employee という型エイリアスを定義します。この型エイリアスは、Person 型エイリアスと jobTitle (型: string) および employeeId (型: number) という 2 つのプロパティを組み合わせた型を表します。
型エイリアスは、長い複雑な型の定義を簡潔にするのに役立ちます。
TypeScript には、インターフェースとクラスに関連する他にも多くの高度な機能があります。いくつか例を挙げます。
- ユニオン型: オブジェクトが複数の型のいずれか 1 つであることを許可することができます。
- 部分型: インターフェースの一部のみを実装するオブジェクトを許可することができます。
- インターフェースの制約: 特定の条件を満たす必要があるオブジェクトのみがインターフェースを実装できるようにすることができます。
これらの高度な機能を使用すると、より複雑で洗練された TypeScript コードを作成することができます。
coding-style typescript
