Union型の基本的な使い方【TypeScript】

TypeScriptのUnion型についてアウトプットします。

Union型とは
関数の引数でUnion型を使用する

Union型とは

Union(ユニオン)型とは２つ以上の型を指定することができる型です。

書き方はパイプ(｜)を使用し以下のように記載します。

let a: number | string;

上記の場合、変数a はnumber型かstring型のどちらかの型を持っているということになります。

例えば以下の変数a は number | null の型を持っています。変数a に文字列またはundefined型を指定とするとエラーが表示されます。これは、変数a に number または null 型を指定する必要があるからです。

let a: number | null;
a = 4;
a = null;
a = '4'; //エラー：型 'string' を型 'number' に割り当てることはできません。
a = undefined; //エラー：型 'undefined' を型 'number | null' に割り当てることはできません。

関数の引数でUnion型を使用する

以下のjoin関数の引数をUnion型を指定しています。変数a、bは number | string 型を持っています。if文の条件式に変数a、bがnumber型の場合、足し算を実行する処理を記載し、string型の場合、文字列を結合させる処理を記載しています。

function join(a: number | string, b: number | string) {
  let result;
  if (typeof a === 'number' && typeof b === 'number') {
    result = a + b;
  } else {
    result = a.toString() + b.toString();
  }
  return result;
}

console.log(join(7, 2)); // 9
console.log(join('7', '2')); // 72
console.log(join('7', 2)); // 72
console.log(join(7, '2')); // 72

数値は足し算され、文字列は結合される結果となりました。

Union型を使用すれば型を柔軟に指定することができるので上手に使っていきたいいですね。