ラボ - TypeScript で関数を使用する - Training

20 分

このラボでは、JavaScript のいくつかの関数を TypeScript に変換します。

演習 1: JavaScript の関数を、厳密に型指定されたパラメーターと戻り値の型を持つ TypeScript に変換する

次の JavaScript コードには、3 つの関数が含まれています。

BuildArray により、一意の乱数の配列が作成されます。配列内の項目数を決定する items パラメーターと、配列を昇順または降順のどちらで並べ替えるかを決定する sortOrder パラメーターを受け取ります。
sortDescending と sortAscending は、数値を昇順または降順で並べ替える方法を sort() メソッドに指示する比較関数です。

この関数を、厳密に型指定されたパラメーターと戻り値の型を持つ TypeScript に変換します。

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

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

ファイル module04.ts を開きます。
TODO: Update the BuildArray function を特定します。

BuildArray 関数で、パラメーターリスト、戻り値、変数に型を追加します。

function buildArray(items: number, sortOrder: 'ascending' | 'descending'): number[] {
   let randomNumbers: number[] = [];
   let nextNumber: number;

   for (let counter = 0; counter < items; counter++) {
       nextNumber = Math.ceil(Math.random() * (100 - 1));
       if (randomNumbers.indexOf(nextNumber) === -1) {
         randomNumbers.push(nextNumber);
       } else {
         counter--;
       }
   }

   if (sortOrder === 'ascending') {
     return randomNumbers.sort(sortAscending);
   } else {
     return randomNumbers.sort(sortDescending);
   }
}

TODO: Convert the sortDescending and sortAscending functions to arrow functions を特定します。

sortDescending 関数と sortAscending 関数を匿名関数に変換し、同じ名前の変数に割り当てます。

let sortDescending = (a, b) => {
   if (a > b) {
       return -1;
   } else if (b > a) {
       return 1;
   } else {
       return 0;
   }
}

let sortAscending = (a, b) => {
    if (a > b) {
      return 1;
    } else if (b > a) {
      return -1;
    } else {
      return 0;
    }
  }

TODO: Declare a new function type for the sortDescending and sortAscending functions を特定します。
型のエイリアスまたはインターフェイスを使用して、sortDescending 関数と sortAscending 関数に対する新しい関数型を宣言します。
```
type compareFunctionType = (a: number, b:number) => number;
```

sortDescending および sortAscending の変数宣言で、変数の型として新しい関数型を適用します。

let sortDescending: compareFunctionType = (a, b) => {
   if (a > b) {
       return -1;
   } else if (b > a) {
       return 1;
   } else {
       return 0;
   }
}

let sortAscending: compareFunctionType = (a, b) => {
    if (a > b) {
      return 1;
    } else if (b > a) {
      return -1;
    } else {
      return 0;
    }
  }

buildArray 関数を呼び出して、作業をテストします。

let myArray1 = buildArray(12, 'ascending');
let myArray2 = buildArray(8, 'descending');
console.log(myArray1);
console.log(myArray2);

演習 2: 省略可能パラメーターを使用して JavaScript の関数を TypeScript に変換する

この JavaScript の関数からは、ローンの支払い額が返されます。

TODO: Update the LoanCalculator function を特定します。
loanCalculator 関数を、厳密に型指定されたパラメーター、変数、戻り値の型を持つ TypeScript に変換します。

months パラメーターを省略可能にしますが、省略された場合の既定値として 12 か月を割り当てます。

function loanCalculator (principle: number, interestRate: number, months = 12): string {
    let interest: number = interestRate / 1200;   // Calculates the monthly interest rate 
    let payment: number;
    payment = principle * interest / (1 - (Math.pow(1/(1 + interest), months)));
    return payment.toFixed(2);
}

必要パラメーターのみを使用して loanCalculator 関数を呼び出すことにより、作業の結果をテストします。
```
let myLoan = loanCalculator(1000, 5);
console.log(myLoan);
```

挑戦してみましょう

追加の課題として、自分で作成した、または Web で見つけた既存の JavaScript をいくつか選び、関数について学んだ内容を使って TypeScript で書き直してください。 JavaScript をコピーしてプレイグラウンドに貼り付けて編集したり、Visual Studio Code などの別のエディターを使用したりすることができます。

ラボのソリューション

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

cd ../m04-end
code .

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

続行

ラボ - TypeScript で関数を使用する

演習 1: JavaScript の関数を、厳密に型指定されたパラメーターと戻り値の型を持つ TypeScript に変換する

演習 2: 省略可能パラメーターを使用して JavaScript の関数を TypeScript に変換する

挑戦してみましょう

ラボのソリューション

フィードバック