TypeScriptのクラス完全ガイド!初心者でもすぐに理解できる基本

TypeScript

TypeScriptのクラスは、オブジェクト指向プログラミングの概念を活用する上で欠かせない機能です。

本記事では、

「TypeScriptのクラス完全ガイド!初心者でもすぐに理解できる基本」

と題し、TypeScriptのクラスの基本的な使い方を整理し、

✅メンバの定義
✅メソッドの追加
✅オプショナルプロパティ
✅読み取り専用プロパティ
✅クラスを型として使う方法

について解説します!

クラスの基本

クラスメンバの追加

TypeScriptでは、クラスのメンバ(プロパティ)は明示的に宣言する必要があります。コンストラクタのみでプロパティを定義しようとするとエラーになります。

class PersonClass {
    // クラスのメンバ
    name: string;
    age: number | undefined;

    // コンストラクタ
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

インスタンスを作成する際、正しい型の値を渡す必要があります。

const person = new PersonClass("田中", 20);
// const person_ng = new PersonClass("田中", "20"); // これはエラー

クラスメソッドの追加

クラスにはメソッドを定義することもできます。

class PersonMethod {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    
    hello(word: string): void {
        console.log(`${this.name}さん、${word}`);
    }
}

インスタンスを作成し、メソッドを実行できます。

const person_method = new PersonMethod("田中", 20);
person_method.hello("おはようございます");

オプショナルプロパティ

プロパティに ? をつけることで、オプショナル(任意)にできます。

class PersonOptionalProperty {
    name: string;
    age: number;
    from?: string;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

from プロパティは省略可能なので、インスタンス作成時に指定しなくてもOKです。

const personOptionalProperty = new PersonOptionalProperty("田中", 20);

読み取り専用プロパティ

readonly をつけると、プロパティを変更不可にできます。

class PersonReadOnly {
    readonly name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

name はコンストラクタでのみ設定可能で、その後は変更できません。

const personReadOnly = new PersonReadOnly("田中", 20);
// personReadOnly.name = "佐藤"; // エラー!

クラスを型として使う

クラス自体を型として扱うことも可能です。

class PersonType {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

クラスを型として宣言し、インスタンスを格納できます。

let personType: PersonType;

// インスタンスを格納
personType = new PersonType("田中", 20);

// リテラルで直接代入も可能
personType = {
    name: "田中",
    age: 20,
};

まとめ

今回は「TypeScriptのクラス完全ガイド!初心者でもすぐに理解できる基本」と題し、

クラスの基本となる

✅メンバの定義
✅メソッドの追加
✅オプショナルプロパティ
✅読み取り専用プロパティ
✅クラスを型として使う方法

について整理しました!

TypeScriptのクラスは、オブジェクト指向の概念を活かしたプログラミングを可能にします。

クラスのメンバやメソッドの追加、オプショナルプロパティ、読み取り専用プロパティ、そしてクラスを型として扱う方法を押さえておくことで、より柔軟で堅牢なコードを記述できます。

ぜひ実際にコードを書いて試してみてください!

コメント

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