ラボ - ジェネリックを使用してクラスを宣言する - Training

20 分

このラボでは、ジェネリックを使用して、クラスの機能を拡張します。

演習 1: ジェネリックを使用してクラスを宣言する

DataStore クラスには、配列に最大 10 個の string 項目を格納し、各項目に格納されている値を返すことができるユーティリティ関数が含まれています。この演習では、ジェネリックを使用して、DataStore クラスを書き直し、インスタンス作成時に指定した任意の型の項目を格納できるようにします。

コマンドプロンプトで次のように入力して、開始リポジトリをクローンします。

git clone https://github.com/MicrosoftDocs/mslearn-typescript
cd mslearn-typescript/code/module-06/m06-start
code .

ファイル module06.ts を開きます。
TODO: Add and apply a type variable を特定します。
DataStore クラス宣言で、T という名前の型変数を追加します。
```
class DataStore<T> {
    // existing code...
}
```
型変数 T を _data プロパティ宣言に追加します。
```
private _data: Array<T> = new Array(10);
```

AddOrUpdate 関数で、item パラメーターの型を型変数 T に更新します。

AddOrUpdate(index: number, item: T) {
    if(index >=0 && index <10) {
        this._data[index] = item;
    }
}

TODO Test items as numbers を特定します。
型変数が数値を受け入れることができるかどうかをテストします。 empIDs という名前の新しい変数を宣言し、それに新しい DataStore オブジェクトを割り当てます。 AddOrUpdate 関数を呼び出して、それに number 型の項目を割り当てます。
```
let empIDs = new DataStore<number>();
empIDs.AddOrUpdate(0, 50);
empIDs.AddOrUpdate(1, 65);
empIDs.AddOrUpdate(2, 89);                  
console.log(empIDs.GetData(0));         // returns 50
```
TODO Test items as objects を特定します。
型変数がカスタムオブジェクトを受け入れることができるかどうかをテストします。 3 つのプロパティ (name を string として、breed を string として、age を number として) を含む、Pets という名前の type を宣言します。 pets という名前の新しい変数を宣言し、それに新しい DataStore オブジェクトを割り当てます。 AddOrUpdate 関数を呼び出して、それに Pet オブジェクトを割り当てます。
```
type Pets = {
    name: string;
    breed: string;
    age: number
}
let pets = new DataStore<Pets>();
pets.AddOrUpdate(0, { name: 'Rex', breed: 'Golden Retriever', age: 5});
pets.AddOrUpdate(1, { name: 'Sparky', breed: 'Jack Russell Terrier', age: 3});
console.log(pets.GetData(1));         // returns { name: 'Sparky', breed: 'Jack Russell Terrier', age: 3 }
```

ラボのソリューション

コマンドプロンプトで次のように入力して、コードの最終バージョンを表示します。

cd ../m06-end
code .

ファイル module06.ts を開き、このラボの解答を確認します。ソリューションを実行するための開発環境の設定の詳細については、前のラボの設定セクションを参照してください。

続行

ラボ - ジェネリックを使用してクラスを宣言する

演習 1: ジェネリックを使用してクラスを宣言する

ラボのソリューション

フィードバック