インターフェースへのメソッドの追加

CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部。レッスン 43/73。

TypeScriptのインターフェースを使うと、プロパティ定義とともにメソッドシグネチャを含めることで、これらの動作を定義できます。

インターフェースのメソッドシグネチャは、実際の実装を提供せずに、メソッドの名前、パラメーター、戻り値の型を指定します。これにより、インターフェースに準拠するオブジェクトが満たさなければならない契約が作成されます：

interface Person {
  name: string;
  age: number;
  greet(): string;  // メソッドシグネチャ
}

let user: Person = {
  name: "Alice",
  age: 30,
  greet() {
    return `Hello, I'm ${this.name}`;
  }
};

メソッドシグネチャ greet(): string は、Person インターフェースを実装する任意のオブジェクトが、パラメーターを取らず、文字列を返す greet メソッドを持たなければならないことを TypeScript に伝えます。実際の実装はオブジェクトごとに異なる場合がありますが、シグネチャは完全に一致していなければなりません。

チャレンジ

簡単

次のプロパティとメソッドを持つ、Calculatorという名前のinterfaceを作成してください：

string型のbrand
string型のmodel
boolean型のisScientific
2つのnumberパラメーターを受け取り、numberを返すaddメソッド
パラメーターを受け取らず、stringを返すgetInfoメソッド

次のプロパティとメソッドを持つ、BankAccountという名前のinterfaceを作成してください：

string型のaccountNumber
number型のbalance
boolean型のisActive
numberパラメーターを1つ受け取り、voidを返すdepositメソッド
パラメーターを受け取らず、numberを返すgetBalanceメソッド

作成したinterfaceを使用して、次の変数を作成してください：

Calculator型で、brandが"Casio"、modelが"FX-991EX"、isScientificがtrueであり、2つのパラメーターの合計を返すaddメソッドと、"[brand] [model]"を返すgetInfoメソッドを持つ、myCalculatorという名前の変数を作成してください
BankAccount型で、accountNumberが"SAV-12345"、balanceが1500、isActiveがtrueであり、パラメーターをbalanceに加算するdepositメソッドと、現在のbalanceを返すgetBalanceメソッドを持つ、savingsAccountという名前の変数を作成してください

次の出力をそれぞれ別の行に表示してください：

myCalculatorに対してgetInfoメソッドを呼び出し、結果を表示する
myCalculatorに対して、引数15と27を指定してaddメソッドを呼び出し、結果を表示する
savingsAccountに対してgetBalanceメソッドを呼び出し、結果を表示する
savingsAccountに対して、引数250を指定してdepositメソッドを呼び出す
savingsAccountに対して再度getBalanceメソッドを呼び出し、結果を表示する
myCalculatorのisScientificプロパティを表示する

自分で試してみよう

// TODO: ここにコードを書いてください
// 必要なプロパティとメソッドを持つ Calculator インターフェースを作成する
// 必要なプロパティとメソッドを持つ BankAccount インターフェースを作成する
// Calculator 型の myCalculator 変数を作成する
// BankAccount 型の savingsAccount 変数を作成する
// 必要なすべての出力を表示する