TypeScriptでタプル/配列の値からユニオン型を導出する方法

as 演算子を使う

最も簡単な方法は、as 演算子を使うことです。例えば、以下のコードでは、tuple の要素の型から MyUnion というユニオン型を導出しています。

const tuple: [string, number, boolean] = ['foo', 1, true];

type MyUnion = typeof tuple[number];

const value: MyUnion = 'foo'; // 型安全
const value2: MyUnion = 1; // 型安全
const value3: MyUnion = true; // 型安全

as 演算子は、タプル型だけでなく、配列型にも使用できます。

const array: string[] = ['foo', 'bar', 'baz'];

type MyUnion = typeof array[number];

const value: MyUnion = 'foo'; // 型安全
const value2: MyUnion = 'bar'; // 型安全
const value3: MyUnion = 'baz'; // 型安全

infer キーワードを使う

TypeScript 4.0以降では、infer キーワードを使って、より安全で柔軟な方法でユニオン型を導出することができます。

type MyUnion = infer T extends typeof tuple[number] ? T : never;

const value: MyUnion = 'foo'; // 型安全
const value2: MyUnion = 1; // 型安全
const value3: MyUnion = true; // 型安全

infer キーワードは、typeof tuple[number] の型パラメータ T に、タプル型の各要素の型を代入します。そして、T extends typeof tuple[number] ? T : never という条件式を使って、T がタプル型の要素の型のいずれかに一致する場合のみ、T をユニオン型の型として返します。

ReadonlyArray 型を使う

ReadonlyArray 型を使う方法もあります。

type MyUnion = ReadonlyArray<typeof tuple[number]>[number];

const value: MyUnion = 'foo'; // 型安全
const value2: MyUnion = 1; // 型安全
const value3: MyUnion = true; // 型安全

ReadonlyArray 型は、読み取り専用の配列型を表します。ReadonlyArray<typeof tuple[number]> は、タプル型の要素の型の読み取り専用配列型になります。そして、ReadonlyArray<typeof tuple[number]>[number] は、その配列型の要素の型になります。

これらの方法を使いこなすことで、タプル/配列の値からユニオン型を安全かつ効率的に導出することができます。状況に応じて適切な方法を選択してください。

• ReadonlyArray 型は、TypeScript 2.1以降で使用できます。
• infer キーワードは、TypeScript 4.0以降で使用できます。
• as 演算子は、TypeScript 2.7以降で使用できます。

const tuple: [string, number, boolean] = ['foo', 1, true];

type MyUnion = typeof tuple[number];

const value: MyUnion = 'foo'; // 型安全
const value2: MyUnion = 1; // 型安全
const value3: MyUnion = true; // 型安全

console.log(value, value2, value3); // 'foo' 1 true

type MyUnion = infer T extends typeof tuple[number] ? T : never;

const value: MyUnion = 'foo'; // 型安全
const value2: MyUnion = 1; // 型安全
const value3: MyUnion = true; // 型安全

console.log(value, value2, value3); // 'foo' 1 true

type MyUnion = ReadonlyArray<typeof tuple[number]>[number];

const value: MyUnion = 'foo'; // 型安全
const value2: MyUnion = 1; // 型安全
const value3: MyUnion = true; // 型安全

console.log(value, value2, value3); // 'foo' 1 true

reduce 関数を使う

const tuple: [string, number, boolean] = ['foo', 1, true];

type MyUnion = typeof tuple.reduce((acc, cur) => {
  acc |= cur;
  return acc;
}, 0);

const value: MyUnion = 'foo'; // 型安全
const value2: MyUnion = 1; // 型安全
const value3: MyUnion = true; // 型安全

console.log(value, value2, value3); // 'foo' 1 true

このコードでは、reduce 関数を使って、タプル/配列の各要素をビット演算子 | で結合しています。ビット演算子 | は、2つのオペランドのいずれか一方でも真であれば真を返します。

concat 関数と spread 演算子を使う

const tuple: [string, number, boolean] = ['foo', 1, true];

type MyUnion = [typeof tuple[number]] extends [infer T] ? T : never;

const value: MyUnion = 'foo'; // 型安全
const value2: MyUnion = 1; // 型安全
const value3: MyUnion = true; // 型安全

console.log(value, value2, value3); // 'foo' 1 true

このコードでは、concat 関数を使って、タプル/配列の各要素を1つの配列に結合しています。そして、spread 演算子を使って、結合された配列の要素をユニオン型に展開しています。

手動でユニオン型を定義する

上記の方法でうまくいかない場合は、手動でユニオン型を定義することができます。

type MyUnion = string | number | boolean;

const value: MyUnion = 'foo'; // 型安全
const value2: MyUnion = 1; // 型安全
const value3: MyUnion = true; // 型安全

console.log(value, value2, value3); // 'foo' 1 true