インターフェース入門

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

インターフェースはオブジェクトの型エイリアスと同じ基本的な目的を果たしますが、異なる構文を使用し、独自の機能もいくつか備えています。

インターフェースは、interfaceキーワードの後にインターフェース名と、中かっこで囲まれたオブジェクト構造を記述して宣言します。

interface Animal {
  name: string;
  sound: string;
}

let dog: Animal = {
  name: "Buddy",
  sound: "Woof"
};

構文はすっきりしていて分かりやすく、interface 本体の中にプロパティとその型を列挙するだけです。いったん定義すれば、型エイリアスの場合と同じように、コード内のどこでも interface 名を型注釈として使用できます。

チャレンジ

簡単

次のプロパティを持つ Pet という名前の interface を作成してください。

型が string の name
型が string の species
型が number の age
型が boolean の isVaccinated

次のプロパティを持つ Vehicle という名前の interface を作成してください。

型が string の make
型が string の model
型が number の year

作成した interfaces を使用して、次の variables を作成してください。

名前が "Buddy"、species が "Golden Retriever"、age が 3、isVaccinated が true で、型が Pet の myDog という variable を作成してください
名前が "Whiskers"、species が "Persian"、age が 2、isVaccinated が false で、型が Pet の myCat という variable を作成してください
make が "Toyota"、model が "Camry"、year が 2022 で、型が Vehicle の myCar という variable を作成してください

型が Pet のパラメーターを受け取り、"[name] is a [age]-year-old [species]" 形式の string を返す、describePet という名前の function を作成してください。

型が Vehicle のパラメーターを受け取り、"[year] [make] [model]" 形式の string を返す、getVehicleInfo という名前の function を作成してください。

次の outputs をそれぞれ別の行に出力してください。

myDog を使って describePet を呼び出し、結果を出力する
myCat を使って describePet を呼び出し、結果を出力する
myCar を使って getVehicleInfo を呼び出し、結果を出力する
myDog のワクチン接種状況（isVaccinated プロパティ）を出力する

自分で試してみよう

// TODO: ここにコードを書いてください

// Petインターフェースを作成する

// Vehicleインターフェースを作成する

// インターフェースを使用して変数を作成する

// describePet関数を作成する

// getVehicleInfo関数を作成する

// 必要な出力を表示する