この記事の目的

配列からユニオン型（共用体型）を生成する方法の一つを紹介します。

そもそもユニオン型の一般的な使い方は、以下のように二つ以上の型が入る可能性がある変数などに用いられます。

const exampleFunction = (id: number | string) => {
    console.log(`ID: ${id}`);
}

この例では、引数idにはnumber型またはstring型のいづれかの値が入り、コンソールに出力されます。
このように複数の型を許容することができるのがユニオン型です。（anyとは違い、列挙したものに限定することができる）

他にも以下のように、値がない（null）ことが想定される場合にはこのように使用することもできます。

const exampleFunc = (id: string | null) => {
    if(!id) {
        console.log("IDはありません")
    } else {
        console.log(`ID: ${id}`)
    }
}

この例では、idはnullである可能性もあるため、その場合には「IDがありません」とコンソールに出力しています。

本題

では本題に入ります。
例えば、アレルギー（allergies）という変数を定義したときに、その変数には以下の五つの値しか入らないようにしたいとします。
["金属", "卵", "ゴム", "乳", "ハウスダスト"]
それなのに、

type UserData = {
    allergies: string;
}

のように定義してしまうと、誤った値でも文字列であれば許容してしまいます。
そのため、以下のようにユニオン型にするのが正しいでしょう。

type UserData = {
    allergies: "金属"| "卵"| "ゴム"| "乳"| "ハウスダスト";
}

しかし、この型を他でも使い回したい場合には、都度定義しなければなりません。それでは変更があった場合に工数が増えてしまうので何とか使いまわせるようにしたい。
そこで今回はこのように解決してみました。

export const allergiesArr = ["金属", "卵", "ゴム", "乳", "ハウスダスト"];
export const Allegies = typeof allergiesArr[number];

type UserData = {
    allegies: Allergies;
}

これで他の場所でも使用可能になり、保守性が高まったのではないでしょうか？
わざわざ配列から変換している理由としては、他の場所で（例えば画面に描画するときなど）使いたい時に便利だからです！

今回は以上です。
最後まで読んでいただきありがとうございました！
何かこの記事についてのご意見やアドバイスなどがあれば是非コメントください！

TypeScriptで配列からユニオン型を生成する

この記事の目的

本題