ラボ - TypeScript で型を使用する - Training

5 分

このラボでは、以下の各演習の JavaScript を TypeScript で記述し、各変数を厳密に型指定します。

演習 1: 既存の JavaScript コードを変更して、厳密に型指定された変数にする

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

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

module02.ts ファイルを開き、Exercise 1 を見つけます。

コードを変更して、変数の宣言に型を追加します。完了時に、コンパイルされた JavaScript コードは、元の例と同じようになっている必要があります。

/*  EXERCISE 1
    TODO: Modify the code to add types to the variable declarations. 
    The resulting JavaScript should look the same as the original example when you're done. */

let firstName;
let lastName;
let fullName;
let age;
let ukCitizen;

firstName = 'Rebecca';
lastName = 'Smith';
age = 42;
ukCitizen = false;
fullName = firstName + " " + lastName;

if (ukCitizen) {
    console.log("My name is " + fullName + ", I'm " + age + ", and I'm a citizen of the United Kingdom.");
} else {
    console.log("My name is " + fullName + ", I'm " + age + ", and I'm not a citizen of the United Kingdom.");
}

演習 2: 既存の JavaScript コードを変更し、厳密に型指定された変数を使用して演算結果が保証されるようにする

module02.ts で Exercise 2 を見つけます。
型を使用して、演算の結果が保証されるようにすることができます。コードをそのまま実行した後、厳密に型指定された変数を使用するように変更します。

見つかったエラーをすべて解決し、a に対して返される結果が 12 になるようにします。

/* EXERCISE 2
   TODO: Run the code as is and then modify it to have strongly typed variables. 
   Then, address any errors you find so that the result returned to a is 12. */

let x;
let y;
let a;

x = 'five';
y = 7;
a = x + y;

console.log(a);

演習 3: 列挙型を実装する

module02.ts で Exercise 3 を見つけます。
定数 "Fall"、"Winter"、"Spring"、"Summer".を表す Season という名前の enum 型を実装します。

関数を更新し、リテラル文字列 "Fall" ではなく、enum 内の項目を参照すると (Season.Fall など) 季節を渡すことができるようにします。

/* EXERCISE 3
   TODO: In the following code, implement an enum type called Season that represents 
   the constants "Fall", "Winter", "Spring", and "Summer". Then, update the function so 
   you can pass in the season by referencing an item in the enum, for example 
   Season.Fall, instead of the literal string "Fall". */

function whichMonths(season) {
    let monthsInSeason: string;
    switch (season) {
        case "Fall":
            monthsInSeason = "September to November";
            break;
        case "Winter":
            monthsInSeason = "December to February";
            break;
        case "Spring":
            monthsInSeason = "March to May";
            break;
        case "Summer":
            monthsInSeason = "June to August";
    }
    return monthsInSeason;
}

console.log(whichMonths("Fall"));

演習 4: 配列型を宣言する

module02.ts で Exercise 4 を見つけます。

配列内の項目の型と一致するように、配列を型として宣言します。

/* EXERCISE 4
   TODO: Declare the array as the type to match the type of the items in the array. */

let randomNumbers;
let nextNumber;
for (let i = 0; i < 10; i++) {
    nextNumber = Math.floor(Math.random() * (100 - 1)) + 1;
    randomNumbers.push(nextNumber);
}

console.log(randomNumbers);

挑戦してみましょう

追加の課題として、自分で書いた、または Web で見つけた既存の JavaScript を使用し、それを書き直して、TypeScript を使用する基本的な型を追加してください。 JavaScript をコピーしてプレイグラウンドに貼り付けて編集したり、Visual Studio Code などの別のエディターを使用したりすることができます。

ラボのソリューション

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

cd ../m02-end
code .

ファイル module02.ts を開き、このラボの解答を確認します。

続行

ラボ - TypeScript で型を使用する