【TypeScript】ユニオン型の使い方と活用法

現在、TypeScriptを用いた開発を行っています。
そこで初めてユニオン型というものを知りました。

TypeScriptの知見はまだまだ浅いため、
今回知ったこのユニオン型について学び、使い方を調べてみました。

ユニオン型とは？

まず、ユニオン型とは一体なんなのでしょうか。
サバイバルTypeScriptには以下のように書かれています。

TypeScriptのユニオン型(union type)は「いずれかの型」を表現するものです。

サバイバルTypeScript ユニオン型（union type）

これだけではいまいちピンとこないので具体例を見てみましょう。

ユニオン型の型注釈は、2つ以上の型を|で繋げて記載します。
下記の例では、変数favoriteFoodがstring型またはundefined型であることを表しています。

let favoriteFood: string | undefined;

また、下記のように記載することもできます。

type FavoriteFoods = string | undefined;

let favoriteFood: FavoriteFoods; //favoriteFood: string | undefined
favoriteFood = 'sushi'; // OK
favoriteFood = 343;     // NG

この場合、変数favoriteFoodの型はstring型またはundefined型であるため、数値である343を代入するとエラーが発生します。

つまりユニオン型は、変数が持つことのできる型を指定することができるのです。

使い方の例

ユニオン型がどういったものかは理解することができました。
では実際どのように使用できるか考えてみましょう。

①代入する値の指定

変数に特定の値のみ代入可能にしたい場合、
ユニオン型を使用することで実現することが可能です。

const JapaneseCars = ['TOYOTA', 'HONDA', 'NISSAN', 'MAZDA', 'SUZUKI'] as const;
type JapaneseCar = typeof JapaneseCars[number];
// 'TOYOTA'|'HONDA'|'NISSAN'|'MAZDA'|'SUZUKI'

let myCar: JapaneseCar;
myCar = 'HONDA';   //OK
myCar = 'Mercedes' //NG

1行目のように、配列の後ろにas constをつけることで
要素をread-onlyな配列であると定義することができます。

2行目のtypeof JapaneseCars[number]で、なぜ配列の要素をメンバーとするユニオン型を生成できるのかについてはこちらの記事が参考になるのでぜひご覧ください。

②型ガード

ユニオン型を使用することで、実行時に型をチェックし、誤った操作を防ぐことができます。
下記の例では引数idがnumber型だった場合にstring型へ変更する処理を実装しています。

function numberToString(id: number | string) {
    if(typeof id === 'number') {
        return id.toString();
    }
    return id;
}

③レスポンスの処理

下記のようにレスポンスのハンドリングにも使用できそうです。

type SuccessResponse = {success: true; data: any;}
type ErrorResponse = {success: false; error: string;}

function handleResponse(res: SuccessResponse | ErrorResponse) {
    if(res.success) {
        console.log('Data: ', res.data);
    } else {
        console.log('Error: ', res.error)
    }
}

最後に

ユニオン型は柔軟性があり、様々な条件や処理に応じて使うことができそうです。
こんな風に使っているよなど意見等あればぜひコメントしてください。

それでは。

参考文献