TypeScript Webアプリケーションの構築コンポーネント

💡 主題：このTypeScriptシリーズブログを続けます。今度は、どうやってTypeScriptを使って、コンポーネントは開発を紹介します。このブログで、TypeScriptの「クラス」と「インターフェース」について学び、そして、簡単な商品リストのコンポーネントを作成します。

• 1 クラス
  • 1.1 クラスの定義とインスタンス化
  • 1.2 コンストラクタ
  • 1.3 属性とメソッド
• 2 クラスの特性
  • 2.1 abstractキーワード
  • 2.2 インターフェイス
  • 2.3 継承

クラス

クラスの定義とインスタンス化

TypeScriptでのクラスは、classキーワードを使って定義されます。例えば、以下の通り、Productを定義します。

class Product {
}

コンストラクタ

コンストラクタは、インスタンスが作成されるときに自動的に呼び出される特別な関数です。constructorキーワードを使用して定義され、クラスの属性を初期化するために使用されます。

class Product {
        constructor(public id: number, public name: string, public price: number) {}

}

属性とメソッド

属性とメソッドは、クラス内で直接定義されます。属性には、クラスのインスタンス変数や定数を定義し、メソッドには、クラスの振る舞いや機能を定義します。

class Product {
    constructor(public id: number, public name: string, public price: number) {}

    display(): string {
        return `${this.name}: $${this.price}`;
    }
}

クラスの特性

abstractキーワード

抽象クラス：

インスタンス化できないクラスで、通常は他のクラスの基底クラスとして機能します。abstractキーワードを使用してマークされます。

抽象メソッド：

クラス内で宣言されるが実装されないメソッドです。抽象クラス内の抽象メソッドは、派生クラスで実装されなければなりません。

abstract class AbstractDataSource {
    constructor(public name: string) {}

    getProducts(): Products[] {
        return Promise.resolve([
            { "id": 1, name: "P1", category: "Watersports",
                description: "P1 (Watersports)", price: 3 },
            { "id": 2, name: "P2", category: "Watersports",
                description: "P2 (Watersports)", price: 4 }
        ])
    }

    abstract storeOrder(): Promise<number>;
}

インターフェイス

インターフェイスは、実装を提供せずにオブジェクトの構造や型シグネチャを定義するために主に使用されます。それはオブジェクトが従うべき規格を定義し、そのインターフェースを実装するクラスが同じ構造に従うことを保証します。

interface Movable {
    move(): void;
}

class Car implements Movable {
    move() {
        console.log("Car is moving");
    }
}

継承

継承は、あるクラスが別のクラスの属性やメソッドを継承することを可能にします。継承を実現するためにはextendsキーワードを使用します。

先に定義した抽象クラスDataSource、現在はファイルに保存しているデータを使うLoadDataSourceを作成します。そして、抽象クラスを継承し、抽象メソッドを実装されます。

import { AbstractDataSource } from "./abstractDataSource";
import { Product } from "./entities";

export class LoadDataSource extends AbstractDataSource {

    storeOrder(): Promise<number> {
        console.log("Store Order");
        console.log(JSON.stringify(this.order));
        return Promise.resolve(1);
    }
    
}