TypeScript ユニオン型

要約: このチュートリアルでは、変数に一種類または複数の型の値を格納するために使用する TypeScript ユニオン型について学習します。

TypeScript ユニオン型の概要

パラメーターとして数値または文字列のいずれかを予期する関数に出くわす場合があります。例えば、

function add(a: any, b: any) {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    }
    if (typeof a === 'string' && typeof b === 'string') {
        return a.concat(b);
    }
    throw new Error('Parameters must be numbers or strings');
}Code language: JavaScript (javascript)

この例の add() 関数は、それらのパラメーターが数値であれば、それらのパラメーターの合計を計算します。

パラメーターが文字列であれば、add() 関数はそれらを単一の文字列に連結します。

パラメーターが数値でも文字列でもない場合、add() 関数はエラーをスローします。

add() 関数のパラメーターの問題は、そのパラメーターが any 型であるということです。これは、文字列でも数値でもない引数で関数を呼び出すことができても、TypeScript では問題ないことを意味します。

このコードは正常にコンパイルされますが、ランタイムでエラーが発生します

add(true, false);Code language: JavaScript (javascript)

これを解決するには、TypeScript ユニオン型を使用できます。ユニオン型では、複数の型を 1 つの型に組み合わせることができます。

例えば、次の変数は number 型または string 型です

let result: number | string;
result = 10; // OK
result = 'Hi'; // also OK
result = false; // a boolean value, not OKCode language: JavaScript (javascript)

ユニオン型は、2 つだけでなく、複数の型のいずれかになれる値を表します。例えば、number | string | boolean は、数値、文字列、またはブール値になれる値の型です。

add() 関数の例に戻りますが、パラメーターの型を any から union に次のように変更できます

function add(a: number | string, b: number | string) {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    }
    if (typeof a === 'string' && typeof b === 'string') {
        return a.concat(b);
    }
    throw new Error('Parameters must be numbers or strings');
}Code language: JavaScript (javascript)

add 関数のユニオン型を指定できます

function add(a: number | string, b: number | string) :  number | string {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    }
    if (typeof a === 'string' && typeof b === 'string') {
        return a.concat(b);
    }
    throw new Error('Parameters must be numbers or strings');
}Code language: JavaScript (javascript)

後ほど、よりエレガントにこれを処理するための ジェネリック型 について学習します。

要約

• TypeScript ユニオン型は、変数に一種類または複数の型の値を格納するために使用する