型エイリアスの組み合わせ

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

型エイリアスの最も強力な側面の1つは、それらを組み合わせたり再利用したりして、より高度な型定義を作成できることです。毎回複雑な型を一から定義する代わりに、小さく、特定の目的に特化した型エイリアスを組み合わせることで、それらを構築できます。

このアプローチはコードの再利用性を高め、型定義のメンテナンスを容易にします。基本型を更新する必要がある場合、それを使用するすべての合成型は自動的にその変更を継承します：

type Email = string;
type Phone = number;

type Contact = {
  name: string;
  email: Email;
  phone: Phone;
};

型エイリアスをユニオン型の中で組み合わせて、柔軟なデータ構造を作成することもできます。これは、オブジェクトのプロパティが異なる形式を受け入れる可能性がある場合に特に便利です。

type ContactMethod = Email | Phone;

type User = {
  id: number;
  preferredContact: ContactMethod;
};

この構成的なアプローチにより、コードはより表現力豊かで理解しやすくなります。string や number のような汎用的な型を見る代わりに、他の開発者は Email や Phone といった意味のある型名を通じて、意図された目的を即座に理解できます。

チャレンジ

簡単

string 型の型エイリアス Username を作成してください。

number 型の型エイリアス UserAge を作成してください。

ユニオン型を使用して、Username と UserAge を組み合わせた型エイリアス ContactMethod を作成してください。

以下のプロパティを持つオブジェクトの型エイリアス UserProfile を作成してください。

型が number の id
型が Username の displayName
型が ContactMethod の preferredContact

交差型（intersection types）を使用して、UserProfile と、型が string の permissions プロパティを持つ追加のオブジェクト型を組み合わせた型エイリアス AdminProfile を作成してください。

次に、以下の変数を作成してください。

id が 1、displayName が "john_doe"、preferredContact が "john_doe" である、UserProfile 型の変数 regularUser を作成します。
id が 2、displayName が "admin"、preferredContact が 25、permissions が "full_access" である、AdminProfile 型の変数 systemAdmin を作成します。

ContactMethod 型の contact というパラメータを受け取り、string を返す関数 getContactInfo を作成してください。型ガードを使用して型をチェックし、以下を返します。

文字列の場合: "Contact: [contact]"
数値の場合: "Age: [contact]"

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

regularUser.preferredContact を引数にして getContactInfo を呼び出し、その結果を表示します。
systemAdmin.preferredContact を引数にして getContactInfo を呼び出し、その結果を表示します。
systemAdmin.permissions を表示します。

自分で試してみよう

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

// Username、UserAge、ContactMethod、UserProfile、AdminProfileの型エイリアスを作成します

// 変数 regularUser と systemAdmin を作成します

// getContactInfo 関数を作成します

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