今回はTypeScriptの型をさらに柔軟に使うために、Union TypesとIntersection Typesについて紹介します。
まだTypeScriptの基礎的な型についての知識がないようであれば、前回の記事を先に読むことをオススメします☝️
TypeScriptの基本の型 : https://tyotto-good.com/blog/basic-type-typescript
合併型(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
は交差型です。ではそれぞれはどのような型を受け入れるのでしょうか。
const SuperAtack: KickOrPunch = {
effect: true,
hit: true,
damage: 10,
};
const normalAtack: KickOrPunch = {
hit: true,
damage: 3,
};
const doubleAtack: KickAndPunch = {
effect: true,
hit: true,
damage: 10,
};
const errorNormalAtack: KickAndPunch = {
hit: true,
damage: 3,
};
合併型であるSurperAtack
、normalAtack
はKick、Punchどちらかの型か両方の型であることを示せればよいので、両方の型か一方の型のプロパティを全て使うことができます。
一方交差型は集合元のプロパティを全て宣言する必要があります。
また、合併型は関数の引数などで、以下のような使い方をよくします。
function atack(power: string | number) {
...
}
これは関数の引数power
がstring
、number
どちらかであることを示しています。
合併型、交差型を用いてより柔軟に型を使いこなしてくださいね。
それでは🙌