インターフェースと型の拡張

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

コードを重複させる代わりに、TypeScriptは継承を通じて、既存の型に基づいた新しい型を構築するための強力なメカニズムを提供します。

インターフェースでは、extendsキーワードを使用して、ベースとなるインターフェースからすべてのプロパティを継承する新しいインターフェースを作成できます。

interface Vehicle {
  brand: string;
  year: number;
}

interface Car extends Vehicle {
  doors: number;
}

// Carは現在、brand、year、doorsを持っています

型エイリアスの場合、& 演算子を使用したインターセクション型を用いることで、同じ結果を得ることができます：

type Vehicle = {
  brand: string;
  year: number;
};

type Car = Vehicle & {
  doors: number;
};

// Carはインターフェースの例と同じプロパティを持ちます

どちらのアプローチも、基本型のすべてのプロパティと、定義した追加のプロパティを含む新しい型を作成します。これにより、コードの再利用性が向上し、アプリケーション内の関連する型全体で一貫性を維持するのに役立ちます。

チャレンジ

簡単

以下のプロパティを持つ Employee という名前のベースインターフェースを作成してください：

number 型の id
string 型の name
string 型の department

Employee を継承し、以下のプロパティを追加した Manager という名前のインターフェースを作成してください：

number 型の teamSize
number 型の budget

以下のプロパティを持つ Contact という名前の型エイリアスを作成してください：

string 型の email
string 型の phone

交差型（intersection types）を使用して、Employee と Contact を組み合わせ、以下のプロパティを追加した Developer という名前の型エイリアスを作成してください：

string[] 型の programmingLanguages
number 型の yearsExperience

作成したインターフェースと型を使用して、以下の変数を作成してください：

Manager 型の teamLead という名前の変数を作成します。プロパティは、id に 101、name に "Alice Johnson"、department に "Engineering"、teamSize に 8、budget に 250000 を指定してください。
Developer 型の softwareDev という名前の変数を作成します。プロパティは、id に 102、name に "Bob Smith"、department に "Engineering"、email に "bob.smith@company.com"、phone に "555-0123"、programmingLanguages に ["TypeScript", "Python", "Java"]、yearsExperience に 5 を指定してください。

Manager 型のパラメータを受け取り、"[name] manages [teamSize] people with a budget of $[budget]" という形式の string を返す getManagerSummary という名前の関数を作成してください。

Developer 型のパラメータを受け取り、"[name] knows [programmingLanguages joined with ', '] ([yearsExperience] years experience)" という形式の string を返す getDeveloperSkills という名前の関数を作成してください。

以下の出力を別々の行に表示してください：

teamLead を引数にして getManagerSummary を呼び出し、その結果を表示する
softwareDev を引数にして getDeveloperSkills を呼び出し、その結果を表示する
teamLead の department を表示する
softwareDev の email を表示する

自分で試してみよう

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

// Employeeインターフェースを作成します

// Employeeを継承するManagerインターフェースを作成します

// Contact型エイリアスを作成します

// 交差型（Intersection Types）を使用してDeveloper型エイリアスを作成します

// Manager型のteamLead変数を作成します

// Developer型のsoftwareDev変数を作成します

// getManagerSummary関数を作成します

// getDeveloperSkills関数を作成します

// 必要な出力を表示します