今回はTypeScriptの型をさらに柔軟に使うために、Union TypesとIntersection Typesについて紹介します。
まだTypeScriptの基礎的な型についての知識がないようであれば、前回の記事を先に読むことをオススメします☝️
TypeScriptの基本の型 : https://tyotto-good.com/blog/basic-type-typescript
これまでたくさんの型について紹介してきましたが、これらの型を組み合わせたりしてもっと複雑な型を表現したい場面があると思います。そんな時に便利なのが**合併型(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どちらかであることを示しています。
合併型、交差型を用いてより柔軟に型を使いこなしてくださいね。
それでは🙌
