インターセクション型 ('&')

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

ユニオン型を使うと、複数の型のいずれかになれる変数を作成できますが、インターセクション型は反対の方向に機能します。複数の型を1つの型に結合し、結合された型のすべてのプロパティを持たせます。

交差型はアンパサンド（&）演算子を使用して、型同士を結合します。2つのオブジェクト型を交差させると、結果には両方の型のすべてのプロパティが含まれます。

type HasName = { name: string };
type HasAge = { age: number };

type Person = HasName & HasAge;

// Person は name と age の両方のプロパティを持つようになりました
let user: Person = {
  name: "Alice",
  age: 30
};

これは、より小さく再利用可能な要素から複雑な型を構築したい場合に特に役立ちます。1つの大きなオブジェクト型を定義する代わりに、特定の関心事に焦点を当てた型を作成し、必要に応じてそれらを組み合わせることができます。

交差型は、結果の型が交差させたすべての型の要件を満たすことを保証します。変数は交差に含まれるすべての型のすべてのプロパティを持っていなければなりません。共用体型のように、必要なものを選んだり組み合わせたりすることはできません。

チャレンジ

簡単

2つの型エイリアスを作成します。string型のnameプロパティを持つオブジェクトのためのHasNameと、number型のageプロパティを持つオブジェクトのためのHasAgeです。

&演算子を使用してHasNameとHasAgeを交差させ、Personという3つ目の型エイリアスを作成します。

string型のemailプロパティを持つオブジェクトのための、別の型エイリアスHasEmailを作成します。

3つすべての型、つまりHasName、HasAge、HasEmailを交差させて、4つ目の型エイリアスEmployeeを作成します。

次に、以下の変数を作成します。

名前が"Alice"、年齢が25で、型がPersonのuserという名前の変数を作成します
名前が"Bob"、年齢が30、メールアドレスが"bob@company.com"で、型がEmployeeのworkerという名前の変数を作成します

Person型のパラメーターを受け取り、"Name: [name], Age: [age]"という形式の文字列を返すdisplayPersonという名前の関数を作成します。

Employee型のパラメーターを受け取り、"Name: [name], Age: [age], Email: [email]"という形式の文字列を返す、別の関数displayEmployeeを作成します。

適切な変数を使って両方の関数を呼び出し、結果をそれぞれ別の行に出力します。

自分で試してみよう

// TODO: ここにコードを書いてください
// HasName、HasAge、HasEmail の型エイリアスを作成する
// 交差型を使って Person と Employee 型を作成する
// 変数 user と worker を作成する
// displayPerson と displayEmployee 関数を作成する
// 関数を呼び出して結果を出力する