ラボ - 名前空間を使用してコードを編成する - Training

20 分

このラボでは、TypeScript を使用してコードを編成するためのさまざまな方法を試してみます。

演習 1

プロジェクトの TypeScript コードには、Loan と ConventionalLoan という 2 つのインターフェイスが含まれています。また、3 つの関数も含まれています。

calculateInterestOnlyLoanPayment。インタレストオンリーローンの支払額を計算します。
calculateConventionalLoanPayment。従来型のローンの支払額を計算します。
calculateInterestRate。ローンの月利を計算するワーカー関数。

calculateInterestOnlyLoanPayment および calculateConventionalLoanPayment 関数では、principle および interestRate パラメーターを受け入れます。これらの違いは、calculateConventionalLoanPayment 関数では 3 番目のプロパティである months を受け入れ、calculateInterestOnlyLoanPayment 関数では受け入れないことです。

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

この演習では、単一の TypeScript ファイルで名前空間を使用してコードを編成します。

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

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

開始ワークスペースで、module08_main ファイルを TypeScript エディターで開きます。
TODO Create a the Loans namespace を特定します。
Loans という名前の新しい名前空間を作成します。
Loan インターフェイスと ConventionalLoan インターフェイスを Loans 名前空間に移動します。

Loan インターフェイスと ConventionalLoan インターフェイスを更新して、Loans 名前空間の外側でそれらを使用できるようにします。

namespace Loans {
   export interface Loan {
       principle: number,
       interestRate: number        //* Interest rate percentage (eg. 14 is 14%)
   }
   export interface ConventionalLoan extends Loan {
       numberOfMonths: number      //* Total number of months
   }
}

TODO Create LoanPrograms namespace を特定します。
LoanPrograms という名前の新しい名前空間を作成します。

3 つの関数を LoanPrograms 名前空間に移動します。

namespace LoanPrograms {
   /*  TODO Update the calculateInterestOnlyLoanPayment function. */
   function calculateInterestOnlyLoanPayment(loanTerms: Loan): string {
       let payment: number;
       payment = loanTerms.principle * calculateInterestRate(loanTerms.interestRate);
       return 'The interest only loan payment is ' + payment.toFixed(2);
   }
   /*  TODO Update the calculateConventionalLoanPayment function. */     
   function calculateConventionalLoanPayment(loanTerms: ConventionalLoan): string {
       let interest: number = calculateInterestRate(loanTerms.interestRate);
       let payment: number;
       payment = loanTerms.principle * interest / (1 - (Math.pow(1/(1 + interest), loanTerms.months)));
       return 'The conventional loan payment is ' + payment.toFixed(2);
   }
   function calculateInterestRate (interestRate: number): number {
       let interest: number = interestRate / 1200;
       return interest
   }
}

TODO Update the calculateInterestOnlyLoanPayment function を特定します。

calculateInterestOnlyLoanPayment 関数で:

Loans 名前空間が含まれるように、Loan インターフェイスへの参照を更新します。
LoanPrograms 名前空間の外側で関数を使用できるようにします。

export function calculateInterestOnlyLoanPayment(loanTerms: Loans.Loan): string {
    let payment: number;
    payment = loanTerms.principle * calculateInterestRate(loanTerms.interestRate);
    return 'The interest only loan payment is ' + payment.toFixed(2);
}

TODO Update the calculateConventionalLoanPayment function を特定します。

calculateConventionalLoanPayment 関数で:

Loans 名前空間が含まれるように、ConventionalLoan インターフェイスへの参照を更新します。
LoanPrograms 名前空間の外側で関数を使用できるようにします。

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

TODO Update the function calls を特定します。これを開始コードと終了コードに追加してください。
LoanPrograms 名前空間を関数の名前に追加します。

let interestOnlyPayment = LoanPrograms.calculateInterestOnlyLoanPayment({principle: 30000, interestRate: 5});
let conventionalLoanPayment = LoanPrograms.calculateConventionalLoanPayment({principle: 30000, interestRate: 5, months: 180});

作業を保存、コンパイル、およびテストします。

演習 2

この演習では、名前空間を複数の TypeScript ファイルに再編成します。

演習 1 からプロジェクトを続行します。
ワークスペースに 2 つの新しい TypeScript ファイル (module08_loans.ts と module08_loan-programs.ts) を作成します。
Loans 名前空間を、module08_main.ts から module08_loans.ts に移動します。
LoanPrograms 名前空間を、module08_main.ts から module08_loan-programs.ts に移動します。
module08_loan-programs.ts の先頭に、module08_loans.ts と module08_loan-programs.ts 内のインターフェイス間のリレーションシップを記述する reference ステートメントを追加します。
```
/// <reference path="module08_loans.ts" />
```
module08_main.ts に、TODO Add reference paths を配置します。
module08_loans.ts、module08_loan-programs.ts、および module08_main.ts 間のリレーションシップを記述する reference ステートメントを追加します。
```
/// <reference path="module08_loans.ts" />
/// <reference path="module08_loan-programs.ts" />
```
コマンドプロンプトで、次のコマンドを実行して、すべての依存する .ts ファイルをコンパイルして main.js という名前の単一の JavaScript ファイルを作成します。
```
tsc --outFile main.js module08_main.ts
```
main.js ファイルを実行して、作業をテストします。

ラボのソリューション

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

git clone https://github.com/MicrosoftDocs/mslearn-typescript
cd mslearn-typescript/code/module-08/m08-end
code .

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

続行

ラボ - 名前空間を使用してコードを編成する

演習 1

演習 2

ラボのソリューション

フィードバック