TypeScript - インターフェースの拡張

こんにちは、将来のプログラミングスーパースターたち！今日は、TypeScriptのインターフェースの世界に飛び込み、インターフェースを拡張する方法を学びます。このレッスンの終わりには、プロ並みの強力で柔軟なインターフェースを作成できるようになるでしょう。お気に入りの飲み物を手に取り、リラックスして、私たちの旅を始めましょう！

文法

本題に入る前に、基本から始めましょう。TypeScriptでは、インターフェースを拡張するのは extends キーワードを使うだけです。以下は一般的な文法です：

interface 子インターフェース extends 親インターフェース {
// 追加のプロパティやメソッド
}

これを王族の継承に例えると、子インターフェースは親インターフェースのすべてのプロパティとメソッドを「継承」し、独自の特徴も追加できます。

単一のインターフェースの拡張

まずは簡単な例から始めましょう。例えば、魔法の生物に関するゲームを作成しています。まずは基本的な Creature インターフェースを作成します：

interface Creature {
name: string;
age: number;
}

次に、特別な種類の生物 - ドラゴン！ - を作成したいとします。Creature インターフェースを拡張して Dragon インターフェースを作成します：

interface Dragon extends Creature {
breatheFire: () => void;
wingspan: number;
}

この例では、Dragon は Creature の name と age プロパティを継承し、独自の breatheFire メソッドと wingspan プロパティを追加しています。

これを使ってみましょう：

const smaug: Dragon = {
name: "Smaug",
age: 1000,
wingspan: 200,
breatheFire: () => console.log("Roar! ?")
};

console.log(smaug.name);  // 出力: Smaug
smaug.breatheFire();  // 出力: Roar! ?

ご覧の通り、smaug は Creature のすべてのプロパティに加えて、ドラゴン特有の機能も持っています。

複数のインターフェースの拡張

では、もし私たちのドラゴンがただの生物だけでなく、宝の守り人でもあったらどうでしょうか？TypeScriptでは、複数のインターフェースを拡張できます！まずは TreasureKeeper インターフェースを作成し、両方を拡張します：

interface TreasureKeeper {
treasureCount: number;
addTreasure: (item: string) => void;
}

interface DragonLord extends Creature, TreasureKeeper {
breatheFire: () => void;
wingspan: number;
}

今では私たちの DragonLord は火を吐き、宝を貯めることができます。すごいでしょう？

const falkor: DragonLord = {
name: "Falkor",
age: 500,
wingspan: 150,
treasureCount: 1000,
breatheFire: () => console.log("Whoosh! ?"),
addTreasure: (item) => console.log(`Added ${item} to the hoard!`)
};

falkor.addTreasure("Golden Crown");  // 出力: Added Golden Crown to the hoard!

既存のインターフェースの強化

時々、既存のインターフェースにさらにプロパティを追加したいと思うかもしれません。TypeScriptでは、インターフェースを再度宣言して新しいプロパティを追加することでこれができます：

interface Creature {
species: string;
}

const unicorn: Creature = {
name: "Sparkles",
age: 100,
species: "Unicorn"
};

今では Creature は name、age、そして species プロパティを持っています。この技術は「宣言マージ」などと呼ばれます。

複合インターフェースの作成

また、既存のインターフェースを結合して新しいインターフェースを作成することもできます。これはインターセクションタイプを使います：

interface Flyer {
fly: () => void;
}

interface Swimmer {
swim: () => void;
}

type FlyingFish = Flyer & Swimmer;

const nemo: FlyingFish = {
fly: () => console.log("I'm flying! ?✈️"),
swim: () => console.log("Just keep swimming! ?‍♂️")
};

nemo.fly();  // 出力: I'm flying! ?✈️
nemo.swim();  // 出力: Just keep swimming! ?‍♂️

プロパティとメソッドのオーバーライド

インターフェースを拡張する際に、親インターフェースからのプロパティやメソッドをオーバーライドすることができます。これは子インターフェースでプロパティやメソッドをより具体的に指定したいときに便利です：

interface Animal {
makeSound: () => void;
}

interface Cat extends Animal {
makeSound: () => string;  // より具体的な戻り値の型
}

const kitty: Cat = {
makeSound: () => "Meow!"
};

console.log(kitty.makeSound());  // 出力: Meow!

この例では、makeSound メソッドを void から string にオーバーライドしています。

以下に、私たちがカバーしたメソッドの表を示します：

メソッド	説明
単一のインターフェースの拡張	extends キーワードを使って一つのインターフェースから継承
複数のインターフェースの拡張	extends にカンマ区切りのインターフェースを指定
既存のインターフェースの強化	インターフェースを再度宣言して新しいプロパティを追加
複合インターフェースの作成	インターセクションタイプ（&）を使ってインターフェースを結合
プロパティとメソッドのオーバーライド	子インターフェースでプロパティやメソッドを再定義

そして、ここまでで、あなたの TypeScript スキルはインターフェースの拡張をマスターしました。インターフェースはレゴブロックのように、無限に組み合わせて複雑で型-safeな構造を作成することができます。

あなたがプログラミングの旅を続ける中で、これらの技術はより柔軟で再利用可能でメンテナンスしやすいコードを作成するのに役立ちます。それでは、自信を持ってインターフェースを使い始めてください！ハッピーコーディング！??‍??‍?

Credits: Image by storyset