今回は TypeScript の型をさらに柔軟に使うために、Union Types と Intersection Types について紹介します。

合併型(Union Types)と交差型(Intersection Types)

これまでたくさんの型について紹介してきましたが、これらの型を組み合わせたりしてもっと複雑な型を表現したい場面があると思います。そんな時に便利なのが**合併型(Union Types)と交差型(Intersection types)**です。

合併型は型 A, B の和集合を表す型で、交差型は積集合を表す型です。合併型は|、交差型は&演算子を使って表現します。具体例を見ていきましょう。

type Kick = {
  effect: boolean;
  hit: boolean;
};

type Punch = {
  hit: boolean;
  damage: number;
};

type KickOrPunch = Kick | Punch;
type KickAndPunch = Kick & Punch;

型エイリアスKickOrPunchは型 Kick と Punch の合併型であり、KickAndPunchは交差型です。ではそれぞれはどのような型を受け入れるのでしょうか。

// 合併型なので、Kick, Punch型両方のプロパティが使える
const SuperAtack: KickOrPunch = {
  effect: true,
  hit: true,
  damage: 10,
};

// 合併型なため、どちらかの型ということを表せれば良い
const normalAtack: KickOrPunch = {
  hit: true,
  damage: 3,
};

// 交差型なので、合併型同様Kick, Punch型両方のプロパティが使える
const doubleAtack: KickAndPunch = {
  effect: true,
  hit: true,
  damage: 10,
};

// 交差型は集合元の型全てのプロパティを使わなくてはならない
const errorNormalAtack: KickAndPunch = {
  hit: true,
  damage: 3,
};
// エラー: Kick typeのeffectプロパティがないため

合併型であるSurperAtack 、normalAtackは Kick、Punch どちらかの型か両方の型であることを示せればよいので、両方の型か一方の型のプロパティを全て使うことができます。

一方交差型は集合元のプロパティを全て宣言する必要があります。

また、合併型は関数の引数などで、以下のような使い方をよくします。

function atack(power: string | number) {
	...
}

これは関数の引数power がstring、numberどちらかであることを示しています。

合併型、交差型を用いてより柔軟に型を使いこなしてくださいね。

それでは 🙌

TypeScriptの合併型と交差型ついて

合併型(Union Types)と交差型(Intersection Types)