TypeScriptのUnion型について

by

Union型の基本

TypeScriptのUnion型は、複数の型のいずれかを表すことができる特殊な型です。Union型を使用すると、変数が取りうる値の範囲を広げることができます。

Union型は | 演算子を使用して定義します。例えば、number | string という型は、数値または文字列のどちらかを表します。

let value: number | string;

value = 10; // OK
value = 'hello'; // OK
value = true; // エラー: boolean型は 'number | string' 型に割り当てることはできません

このように、Union型はTypeScriptの型システムの柔軟性を高め、より豊かな表現力を提供します。次のセクションでは、Union型の型注釈について詳しく説明します。

Union型の型注釈

TypeScriptのUnion型は、特定の変数が複数の型のいずれかを取りうることを示すために使用されます。これは、その変数が複数の形を取りうる場合に非常に便利です。

Union型の型注釈は、| 演算子を使用して複数の型を列挙することで行います。以下に具体的な例を示します。

let value: number | string | boolean; // valueは、number型、string型、boolean型のいずれかを取りうる

この例では、valueはnumber、string、またはbooleanのいずれかの型を取りうることを示しています。したがって、以下のような代入はすべて有効です。

value = 10; // OK
value = 'hello'; // OK
value = true; // OK

しかし、これらの型のいずれでもない値を代入しようとすると、TypeScriptはエラーをスローします。

value = {}; // エラー: '{}' 型は 'number | string | boolean' 型に割り当てることはできません

このように、Union型の型注釈は、変数が取りうる値の範囲を明確に示す強力なツールです。次のセクションでは、配列要素にユニオン型を使う際の書き方について詳しく説明します。

配列要素にユニオン型を使う際の書き方

TypeScriptでは、配列の各要素が複数の異なる型を取りうる場合に、Union型を使用することができます。これは、配列の要素が一定の型の集合から選ばれるべきである場合に非常に便利です。

配列要素にUnion型を使用するための基本的な構文は以下の通りです：

let array: (number | string)[]; // arrayは、number型またはstring型の要素からなる配列

この例では、arrayはnumberまたはstring型の要素を持つ配列として定義されています。したがって、以下のような代入はすべて有効です。

array = [1, 'two', 3, 'four']; // OK

しかし、これらの型のいずれでもない要素を含む配列を代入しようとすると、TypeScriptはエラーをスローします。

array = [1, 'two', 3, 'four', true]; // エラー: boolean型の要素は 'number | string' 型の配列に割り当てることはできません

このように、配列要素にUnion型を使用することで、配列の要素が取りうる値の範囲を明確に示すことができます。次のセクションでは、ユニオン型と絞り込みについて詳しく説明します。

ユニオン型と絞り込み

TypeScriptのUnion型は、複数の型のいずれかを取りうることを示すために使用されます。しかし、Union型を使用すると、その変数がどの型を持っているのかを正確に知ることが難しくなる場合があります。これを解決するために、TypeScriptでは「絞り込み」（Type Narrowing）という概念が導入されています。

絞り込みとは、特定の条件に基づいて変数の型をより具体的な型に「絞り込む」ことを指します。これにより、Union型の変数がどの型を持っているのかを確定することができます。

絞り込みは主に制御フロー分析（Control Flow Analysis）を通じて行われます。これは、プログラムの制御フロー（if文、switch文、ループなど）を追跡し、それに基づいて変数の型を絞り込む方法です。

以下に具体的な例を示します。

let value: number | string;

if (typeof value === 'number') {
  // このブロック内では、valueはnumber型として扱われます
  console.log(value.toFixed(2)); // OK
} else {
  // このブロック内では、valueはstring型として扱われます
  console.log(value.toUpperCase()); // OK
}

この例では、typeof演算子を使用してvalueの型をチェックし、それに基づいてvalueの型を絞り込んでいます。このように、絞り込みはUnion型の変数を扱う際の強力なツールとなります。次のセクションでは、Union型の具体例について詳しく説明します。

Union型の具体例

TypeScriptのUnion型を使用すると、変数が複数の型のいずれかを取りうることを示すことができます。以下に、Union型の具体的な使用例を示します。

type StringOrNumber = string | number;

let value: StringOrNumber;

value = 'hello'; // OK
value = 123; // OK
value = true; // エラー: boolean型は 'string | number' 型に割り当てることはできません

この例では、StringOrNumberという新しい型を定義し、それをstringまたはnumberのUnion型としています。そのため、value変数はstringまたはnumber型の値を取りうることができます。

また、Union型は関数の引数や戻り値にも使用することができます。以下に、関数の引数と戻り値にUnion型を使用した例を示します。

function formatInput(input: string | number): string {
  if (typeof input === 'number') {
    return input.toFixed(2);
  } else {
    return input.trim();
  }
}

let result: string;

result = formatInput(10); // "10.00"
result = formatInput(' hello '); // "hello"

この例では、formatInput関数はstringまたはnumber型の引数を受け取り、string型の値を返します。関数内部では、引数の型をチェックして適切な処理を行っています。

以上が、TypeScriptのUnion型の具体的な使用例です。これらの例から、Union型がTypeScriptの型システムにどのように統合され、どのように使用されるかを理解できるでしょう。この記事が、TypeScriptのUnion型についての理解を深めるのに役立つことを願っています。次の章では、さらに詳細な例とともに、Union型の使用方法を探求していきます。お楽しみに！

コメントする