TypeScriptのクラス継承完全ガイド!基本からオーバーライドまで詳しく解説

TypeScript

TypeScriptのクラスは、オブジェクト指向プログラミングを支える重要な機能の一つです。

その中でも「継承」は、コードの再利用性を高め、より効率的な設計を可能にします。

本記事では、

「TypeScriptのクラス継承完全ガイド!基本からオーバーライドまで詳しく解説」

と題して、

✅TypeScriptのクラス継承の基本
✅プロパティやメソッドのオーバーライド
✅コンストラクタの拡張

まで、詳しく解説します!

クラスの継承

基本的な継承の仕組み

TypeScriptでは 「extends」を使ってクラスを継承できます。

class ParentClass {
    parentMember: string;
    
    constructor(member: string) {
        this.parentMember = member;
    }

    parentMethod() {
        console.log(`親クラスのメンバ:${this.parentMember}`);
    }
}

// 継承
class ChildClass extends ParentClass {
    childMethod() {
        console.log(`親クラスのメンバ:${this.parentMember}`);
    }
}

// インスタンス化
const child = new ChildClass("メンバ");
child.childMethod(); // 親クラスのメンバを使用可能
child.parentMethod(); // 親クラスのメソッドも継承される
ゆーや
ゆーや

子クラスは親クラスのプロパティやメソッドをそのまま利用できます。

プロパティのオーバーライド

子クラスで親クラスのプロパティを上書き(オーバーライド)できます。

class ParentOverrideProperty {
    property: string = "親プロパティ";
}

class ChildOverrideProperty extends ParentOverrideProperty {
    // 同じプロパティ名で定義すればよい
    property: string = "子プロパティ";
    // 違う型でオーバーライドしようとするとエラー
    // property: number = 30;
}

const pop = new ParentOverrideProperty();
console.log(`親クラスのプロパティ:${pop.property}`);
const cop = new ChildOverrideProperty();
console.log(`子クラスのプロパティ:${cop.property}`);
ゆーや
ゆーや

同じプロパティ名で定義すればよいだけだよ!

メソッドのオーバーライド

親クラスのメソッドを子クラスで上書きすることもできます。

class ParentOverrideMethod {
    parentMethod() {
        console.log("親クラスのメソッドです。");
    }
}

class ChildOverrideMethod extends ParentOverrideMethod {
    parentMethod() {
        console.log("子クラスでオーバーライドされたメソッドです。");
    }
}

const pom = new ParentOverrideMethod();
pom.parentMethod(); // 親クラスのメソッド

const com = new ChildOverrideMethod();
com.parentMethod(); // 子クラスのオーバーライドメソッド
ゆーや
ゆーや

こちらも同じメソッド名で定義すればよいだけ!

コンストラクタのオーバーライド

親クラスにないプロパティを追加したい場合、「super()」を使って親クラスのコンストラクタを明示的に呼び出す必要があります。

class ParentAddProperty {
    parentProperty: string;
    constructor(parentProperty: string) {
        this.parentProperty = parentProperty;
    }
}

class ChildAddProperty extends ParentAddProperty {
    childProperty: number;
    constructor(parentProperty: string, childProperty: number) {
        super(parentProperty); // 親のコンストラクタを呼び出す
        this.childProperty = childProperty;
    }
}
ゆーや
ゆーや

コンストラクタの関係で、デフォルト値のないプロパティの追加は、
コンストラクタをオーバーライドしないとエラーになってしまうので注意!

まとめ

TypeScriptのクラス継承を理解すると、オブジェクト指向の設計がより柔軟になり、コードの再利用性が向上します。基本的な継承の仕組みから、プロパティやメソッドのオーバーライド、コンストラクタの拡張まで押さえておくことで、より効率的な開発が可能になります。ぜひ実際に試してみて、TypeScriptのクラス継承を活用してください!

コメント

タイトルとURLをコピーしました