TypescriptのUnion typeとintersection typeの解説

on 開発

typescript union type intersection type

Union Typeとは

ユニオンタイプ(Union Type)とはJavascriptのOR演算子||と同じくAまたはBと同じ意味です。

function unionTypeFunc(parameter: string | number) {
  // ...
}

parameterにあるdata typeはstringやnumberのみ許可します。
このように|演算子を利用して複数のタイプを連携する方式をUnion Typeをと言います。

Union Type(literal type)

一般的なdata type以外も文字列を使用してunion typeを使えます。
下記のように小さな単位のタイプの集まりをユニットタイプ（Unit Type）とも呼ばれるりーたらリテラル型です。

 function unionTypeFunc(parameter: "asia" | "europe" ) {
  // ...
}
unionTypeFunc("asia"); // OK
unionTypeFunc("afreeca"); // Error

Union Typeのメリット

特定の関数に二つ以上のパラメータの値が必要な場合にtypescriptがよくわからない人はanyを使用しますが、
Union Typeを利用すると二つ以上のタイプを持っていくのが可能なので、typescriptのType Checker機能が使えます。
data typeをanyにする場合はType Checkerが無効になるのでruntime errorにつながる恐れがあります。

インターセクション型(intersection type)

インターセクション型（intersection type）は全ての型を満足する一つの型を意味します。
&演算子はAND演算子みたいな感じでTruckとRobotのプロパティを持っているfutreTruckを使う際に全てのプロパティを全部作成し冪です。

interface Truck {
  name: string;
  speed: number;
}

interface Robot {
  name: string;
  transformation: string;
}

type futureTruck = Truck & Robot;

let JapanFutreTruck: futureTruck = {
    name: "ichi",
	speed:  141,
    transformation: "test"
};

Union typeを使う時に注意するべきな点

Union typeとintersection typeについての説明をしました。
論理的にUnion TypeはOR、intersection typeはANDだと考える人が多いですが、interfaceと同じtypeを扱う時は
このような論理的な思考を注意すべきです。

interface Truck {
  name: string;
  speed: number;
}

interface Robot {
  name: string;
  transformation: string;
}

function JapanFutreTruck (parameter: Truck | Robot) {
  parameter.name; // OK
  parameter.speed; // Error type error
  parameter.transformation; // Error type error
};

typescriptの観点ではJapanFutreTruck()を使う時にアーギュメントの型がTruckかRobotどちらが来るのかわからないので、
どの型が入ってもエラーにならない方向で型推論するようになります。