継承(extends)とinterfaceの実装(implements)

このレッスンでは、クラスの継承(extends)と、interfaceを実装するimplementsの使い方を学びます。「TypeScript extends implements 違い」で調べている方向けです。

extendsは既存のクラスの機能を引き継いで新しいクラスを作る仕組みです。一方implementsは、interfaceで定義した「形」を守ることをクラスに約束させる仕組みです。

サンプルコードでは、class Animalをclass Dog extends Animalで継承し、さらにinterface Soundableをimplementsすることで「鳴き声を持つこと」を保証しています。

初心者がよくつまずくのが、継承先のクラスでsuper()の呼び出しを忘れることです。親クラスのコンストラクタを実行するsuper()を呼ばないと、コンパイルエラーになります。

実際の開発現場では、「動物」という共通の性質を持つクラスを継承しつつ、「鳴く」「飛ぶ」のような特定の能力をinterfaceで表現する、という組み合わせがよく使われます。

📖 お手本コード

interface Soundable {
  speak(): string;
}

class Animal {
  constructor(public name: string) {}
}

class Dog extends Animal implements Soundable {
  speak(): string {
    return `${this.name}: ワン!`;
  }
}

const dog = new Dog("ポチ");
console.log(dog.speak());

✍️ あなたのコード

コードを書いたら「実行する」を押してください

🧪 このサイトではTypeScriptを直接コンパイル・実行できないため、お手本コードと同じ内容を入力できたかをその場で判定します(採点はブラウザ内だけで行われ、どこにも送信されません)。

🎯

ここまでできればゴール達成!
親クラスの機能を引き継いだ、犬クラスのようなオブジェクトが作れるようになります。