ラボ - TypeScript のインターフェイスを使用する - Training

20 分

このラボでは、インターフェイスを使用して JavaScript コードを厳密に型指定されたコードに変換します。

JavaScript コードに 2 つの関数が含まれています。インタレストオンリーローンの支払いを計算する calculateInterestOnlyLoanPayment と、従来型のローンの支払いを計算する calculateConventionalLoanPayment です。ほとんどのローン計算と同様に、両方の関数で principal および interestRate パラメーターを受け入れます。これらの違いは、calculateConventionalLoanPayment 関数では 3 番目のプロパティである months を受け入れ、calculateInterestOnlyLoanPayment 関数では受け入れないことです。

プロパティ	Description
`principal`	ローンの元本金額。
`interestRate`	ローンの年利。たとえば、5% は 5 と指定します。
`months`	月単位で指定されたローンの期間。インタレストオンリーローンでは、月数は関係ないため、このプロパティは必要ありません (毎月利息のみを支払う場合、ローンを返済することはありません)。

この演習では、以下のことを行います。

principal および interestRate という 2 つのプロパティを定義する、Loan というインターフェイスを宣言します。
Loan を拡張する ConventionalLoan というインターフェイスを宣言し、従来型ローンに必須の追加プロパティ months を定義します。
2 つの関数を更新して新しいインターフェイスを実装し、パラメーターを厳密に型指定します。

演習 1 - インターフェイスを宣言する

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

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

ファイル module03.ts を開きます。
TODO: Declare the Loan interface を特定します。 principal および interestRate という 2 つのプロパティをそれぞれ number として定義する、Loan というインターフェイスを宣言します。
```
interface Loan {
    principal: number,
    interestRate: number    //* Interest rate percentage (eg. 14 is 14%)
}
```
TODO: Declare the ConventionalLoan interface を特定します。 Loan を拡張する ConventionalLoan というインターフェイスを宣言し、従来型ローンに必須の追加プロパティ months を number として定義します。
```
interface ConventionalLoan extends Loan {
    months: number      //* Total number of months
}
```

演習 2 - インターフェイスを実装する

TODO: Update the calculateInterestOnlyLoanPayment function を特定します。 calculateInterestOnlyLoanPayment 関数の 2 つのパラメーターを Loan という型のオブジェクト (たとえば loanTerms: Loan) に置き換え、関数の戻り値を string として入力します。
```
function calculateInterestOnlyLoanPayment(loanTerms: Loan): string {
   // ...
}
```

パラメーター interestRate と principal が TypeScript で認識されないため、いくつかのエラーが発生することに気付くでしょう。関数のパラメーター名を Loan オブジェクトのプロパティに置き換えます (例えば、loanTerms.interestRate)。

function calculateInterestOnlyLoanPayment(loanTerms: Loan): string {
    // Calculates the monthly payment of an interest only loan
    let interest = loanTerms.interestRate / 1200;   // Calculates the Monthly Interest Rate of the loan
    let payment;
    payment = loanTerms.principal * interest;
    return 'The interest only loan payment is ' + payment.toFixed(2);
}

interest 変数と payment 変数を calculateInterestOnlyLoanPayment 関数で numbers として入力します。
calculateInterestOnlyLoanPayment 関数が正常に動作していることを確認するためにテストします。ここで、パラメーターを Loan オブジェクトの形式で関数に渡す必要があることに注意してください。
```
let interestOnlyPayment = calculateInterestOnlyLoanPayment({principal: 30000, interestRate: 5});
console.log(interestOnlyPayment);     //* Returns "The interest only loan payment is 125.00" 
```

TODO: Update the calculateConventionalLoanPayment function を特定します。 calculateConventionalLoanPayment 関数を更新します。今度は 3 つのパラメーターを ConventionalLoan 型のオブジェクトに置き換え、関数の戻り値を string として入力します。 calculateConventionalLoanPayment 関数の実装に対して、残っている更新があれば行います。

function calculateConventionalLoanPayment(loanTerms: ConventionalLoan): string {
   // Calculates the monthly payment of a conventional loan
   let interest: number = loanTerms.interestRate / 1200;   // Calculates the Monthly Interest Rate of the loan
   let payment: number;
   payment = loanTerms.principal * interest / (1 - (Math.pow(1/(1 + interest), loanTerms.months)));
   return 'The conventional loan payment is ' + payment.toFixed(2);
}

calculateConventionalLoanPayment 関数が正常に動作していることを確認するためにテストします。ここで、パラメーターを ConventionalLoan オブジェクトの形式で関数に渡す必要があることに注意してください。
```
let conventionalPayment = calculateConventionalLoanPayment({principal: 30000, interestRate: 5, months: 180});
console.log(conventionalPayment);     //* Returns "The conventional loan payment is 237.24" 
```

ラボのソリューション

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

cd ../m03-end
code .

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

続行

ラボ - TypeScript のインターフェイスを使用する

演習 1 - インターフェイスを宣言する

演習 2 - インターフェイスを実装する

ラボのソリューション

フィードバック