🧩 TypeScriptの型変換テクニック！T[number]記法で配列の要素型をUnion型に変換する方法🔄

# TypeScriptの`T[number]`記法完全解説：配列から要素型のUnionを取得する技術

私はプログラミング歴1年半になるエンジニアで、前回はTypeScriptの型システムについて執筆しました。今回は私が理解に困難した「`T[number]`記法」について詳しく解説していきます。この記法は、配列型から要素の型を抽出してUnion型(「AまたはBまたはC」のように複数の値のうちいずれか一つを表す型)を作成する際に使用される重要なテクニックです。

`T[number]`記法は、一見すると直感的でない構文に見えますが、その仕組みを理解することで、TypeScriptの型システムをより深く活用できるようになります。配列の要素型を効率的に操作する場面や、型安全性を保ちながら動的な型生成を行う際に、この知識は欠かせません。

## 目次

- [はじめに](#はじめに)
- [T[number]記法とは](#tnumber記法とは)
- [基本的な動作原理](#基本的な動作原理)
- [Union型との関係性](#union型との関係性)
- [実用的な応用例](#実用的な応用例)
- [他のインデックス型との比較](#他のインデックス型との比較)
- [組み合わせテクニック](#組み合わせテクニック)
- [パフォーマンスと制約事項](#パフォーマンスと制約事項)
- [実務でのベストプラクティス](#実務でのベストプラクティス)
- [まとめ](#まとめ)

## はじめに

TypeScriptの型システムを深く理解するためには、配列の型操作に関する知識が不可欠です。特に、配列の要素型を抽出してUnion型を生成する`T[number]`記法は、型レベルでの複雑な操作を可能にする重要な機能の一つです。

実務では、定数配列から許可される値の型を生成したり、APIのレスポンス配列から個別要素の型を抽出する必要が生じます。また、設定オブジェクトの配列から特定のプロパティの型だけを取り出したいケースも頻繁に発生します。これらの課題に対して、`T[number]`記法を活用することで、型安全性を保ちながら効率的な型定義が実現できます。

本記事では、TypeScriptの「`T[number]`記法」という特殊な型操作技術に焦点を当て、その仕組みと実践的な活用方法を詳しく説明していきます。

## T[number]記法とは

### 基本概念

`T[number]`記法は、配列型`T`のすべての要素の型を取得し、それらをUnion型として結合するTypeScriptの機能です。この記法により、配列に含まれる可能性のあるすべての型を一つの型として表現できます。

:::note info
### インデックス型アクセスとは

TypeScriptでは、オブジェクト型のプロパティにアクセスする際、`T[K]`という記法を使用できます。これは「インデックス型アクセス」と呼ばれ、型`T`のキー`K`に対応する値の型を取得する機能です。`T[number]`は、この仕組みを配列に適用したものです。
:::

### 基本的な使用例

```typescript
type Colors = ['red', 'green', 'blue'];
type Color = Colors[number]; // 'red' | 'green' | 'blue'
```

この例では、`Colors`という3つの文字列リテラルを含む配列型から、`T[number]`記法を使って要素の型のUnionを取得しています。結果として、`Color`型は`'red' | 'green' | 'blue'`という3つの文字列リテラル型のUnion型になります。

### なぜT[number]記法が必要なのか

従来の方法では、配列の要素型を手動でUnion型として定義する必要がありました。

```typescript
// 手動でUnion型を定義
type ManualColor = 'red' | 'green' | 'blue';

// 対応する配列を別途定義
const colors: ManualColor[] = ['red', 'green', 'blue'];
```

この方法には以下の問題があります。

1. **重複定義**: 配列と型を別々に管理する必要がある
2. **同期の問題**: 配列を変更した際に、対応する型定義を忘れがち
3. **保守性の低下**: 要素の追加・削除時に複数箇所の修正が必要

`T[number]`記法を使用することで、これらの問題を解決し、単一の配列定義から自動的に型を生成できます。

## 基本的な動作原理

### 配列のインデックス型の理解

配列は本質的に、数値インデックスをキーとするオブジェクトとして扱われます。TypeScriptでは、配列型`T[]`は`{ [index: number]: T }`という構造として内部的に表現されています。

```typescript
// これらは同等の意味を持つ
type StringArray1 = string[];
type StringArray2 = { [index: number]: string };
```

### `T[number]`の動作メカニズム

`T[number]`記法が動作する仕組みを段階的に見てみましょう。

1. **配列型の認識**: TypeScriptが配列型`T`を検出
2. **インデックス型の適用**: `number`型のすべての可能な値をインデックスとして使用
3. **要素型の収集**: 配列のすべての位置に存在する可能性のある型を収集
4. **Union型の生成**: 収集された型をUnion型として結合

### 具体的な動作例

```typescript
// 異なる型の要素を含む配列
type MixedArray = [string, number, boolean];
type MixedElements = MixedArray[number]; // string | number | boolean

// 型推論の過程：
// MixedArray[0] → string
// MixedArray[1] → number  
// MixedArray[2] → boolean
// 結合 → string | number | boolean
```

この例では、`MixedArray`という異なる型の要素を含むタプル型（固定長の配列で、各位置の要素の型が決まっている型）から、`T[number]`記法を使ってすべての要素の型のUnionを取得しています。

:::note info
### タプル型と配列型の違い

- **タプル型**: `[string, number, boolean]` のように、各位置の要素の型が固定されている
- **配列型**: `string[]` のように、すべての要素が同じ型を持つ

`T[number]`記法は両方に対して使用できますが、タプル型の場合はより具体的なUnion型が生成されます。
:::

## Union型との関係性

### Union型の基本概念

Union型は、複数の型のうちいずれか一つを表す型です。`A | B | C`という記法で表現され、「A型、B型、C型のいずれか」という意味になります。

```typescript
type Status = 'pending' | 'completed' | 'failed';
// この変数は3つの文字列リテラルのうちいずれかの値を持つ
let currentStatus: Status = 'pending';
```

### T[number]がUnion型を生成する理由

配列の要素にアクセスする際、実行時にはどのインデックスの要素が取得されるかわかりません。TypeScriptは型安全性を保つため、配列のすべての位置に存在する可能性のある型をUnion型として表現します。

```typescript
type Fruits = ['apple', 'banana', 'orange'];
type Fruit = Fruits[number]; // 'apple' | 'banana' | 'orange'

// 実行時の動作例
declare const fruits: Fruits;
declare const randomIndex: number;
const selectedFruit = fruits[randomIndex]; // 型は 'apple' | 'banana' | 'orange'
```

:::note info

#### declare について

`declare` はTypeScriptにて使われるキーワードで、「この変数や定数はどこかで定義されている（実装は別にある）」ことをコンパイラに伝える役割があります。
上のコード例では `fruits` や `randomIndex` の値が実際にはどこにも書かれていませんが、`declare` を使うことで「型はこうだけど、実際の中身はここでは用意しません」と示しています。主に型情報だけを書きたいときや外部から値が提供される場合などで使われます。
:::


### Union型の型ガード

生成されたUnion型は、型ガード（型を絞り込む仕組み）と組み合わせて使用することで、より安全な型操作が可能になります。

```typescript
type ActionType = ['CREATE', 'UPDATE', 'DELETE'];
type Action = ActionType[number]; // 'CREATE' | 'UPDATE' | 'DELETE'

function handleAction(action: Action) {
  switch (action) {
    case 'CREATE':
      // ここでは action は 'CREATE' 型に絞り込まれる
      console.log('Creating new item');
      break;
    case 'UPDATE':
      // ここでは action は 'UPDATE' 型に絞り込まれる
      console.log('Updating existing item');
      break;
    case 'DELETE':
      // ここでは action は 'DELETE' 型に絞り込まれる
      console.log('Deleting item');
      break;
  }
}
```
  
`type ActionType = ['CREATE', 'UPDATE', 'DELETE'];`で3つの文字列の配列型を作り、  
`type Action = ActionType[number];`でその配列の要素をユニオン型（`'CREATE' | 'UPDATE' | 'DELETE'`）として取り出しています。

`handleAction` 関数は、引数 `action` にこれら3つのどれかの文字列しか受け取れないようになっています。

このように、ユニオン型とswitch文（型ガード）を組み合わせることで、予期しない値が使われてしまうことを防ぎ、安全にプログラムを書くことができます。

## 実用的な応用例

### 1. 設定オブジェクトの値の型抽出

アプリケーションの設定値を配列で管理する場合、その設定値の型を抽出して型安全性を確保できます。

```typescript
// 環境設定の定義
const environments = ['development', 'staging', 'production'] as const;
type Environment = typeof environments[number]; // 'development' | 'staging' | 'production'

// 設定関数での使用
function setEnvironment(env: Environment) {
  // env は必ず定義された環境名のいずれかになる
  console.log(`Setting environment to: ${env}`);
}
```

:::note info
#### `as const` アサーション

`as const` は、配列やオブジェクトを「読み取り専用」かつ「リテラル型（その値自体が型として扱われる固定値型）」として扱うためのTypeScript機能です。これにより、`['a', 'b', 'c']` という配列が `string[]` 型ではなく `['a', 'b', 'c']` という具体的なタプル型として推論されます。`T[number]` と組み合わせることで、より厳密な型定義が可能になります。
:::

### 2. APIレスポンスの型抽出

APIから取得したデータの配列から、個別要素の型を抽出して型安全な処理を実現できます。

```typescript
// APIレスポンスの型定義
type UsersResponse = {
  id: number;
  name: string;
  role: 'admin' | 'user' | 'guest';
}[];

// 個別ユーザーの型を抽出
type User = UsersResponse[number]; 
// { id: number; name: string; role: 'admin' | 'user' | 'guest'; }

// 型安全な処理関数
function processUser(user: User) {
  console.log(`Processing user: ${user.name} (${user.role})`);
}
```

### 3. 状態管理での型安全性確保

`Redux` のようなstate（状態）管理ライブラリでアクションタイプを定義する際に、`T[number]`記法が威力を発揮します。

```typescript
// アクションタイプの定義
const actionTypes = [
  'USER_LOGIN',
  'USER_LOGOUT', 
  'USER_UPDATE_PROFILE',
  'USER_DELETE_ACCOUNT'
] as const;

type UserActionType = typeof actionTypes[number];
// 'USER_LOGIN' | 'USER_LOGOUT' | 'USER_UPDATE_PROFILE' | 'USER_DELETE_ACCOUNT'

// アクション作成関数での型安全性
type UserAction = {
  type: UserActionType;    // アクションの種類（定義済みの文字列のみ）
  payload?: any;           // アクションを実行するために必要な追加データ（省略可能、型は何でも可）
};

function createUserAction(type: UserActionType, payload?: any): UserAction {
  return { type, payload };
}
```

このコードは、ユーザー関連のアクションタイプを文字列の配列としてまとめ、それをもとに型（`UserActionType`）を作ることで、コード内で使うアクションタイプが間違いなく定義済みのものだけになるよう保証しています。
`as const` を使うことで配列内の文字列がリテラル型として扱われ、`typeof actionTypes[number]` という書き方でその配列に含まれるすべての文字列をユニオン型として取り出しています。
アクションを作成する関数 `createUserAction` でも、この型を使うことで、コンパイル時に定義外の文字列の使用を検出し防止できるため、安全な状態管理が実現できます。

### 4. 権限システムでの型活用

システムの権限管理において、定義された権限から型を自動生成することで、権限チェック処理の型安全性を高められます。

```typescript
// 権限の定義
const permissions = [
  'read:users',
  'write:users', 
  'delete:users',
  'read:admin',
  'write:admin'
] as const;

type Permission = typeof permissions[number];

// ユーザーの権限一覧（userPermissions）に必要な権限（required）が含まれているかを判定
function hasPermission(userPermissions: Permission[], required: Permission): boolean {
  return userPermissions.includes(required);
}

// 使用例（型安全）
const userPerms: Permission[] = ['read:users', 'write:users'];
const canDelete = hasPermission(userPerms, 'delete:users'); 
// 結果: false（userPermsに'delete:users'が含まれていないため）
```

このコードは、権限チェックのために `hasPermission` という関数を用意しています。この関数は、ユーザーが持つ権限のリスト（`userPermissions`）と要求されている権限（`required`）を引数として受け取り、ユーザーがその権限を持っているかどうかを判定します。

使用例として、`userPerms` という名前でユーザーの権限リストが定義されています。このリストは型安全に定義されており、存在しない権限を含めようとするとコンパイルエラーが発生します。そして、`hasPermission` 関数を使って、ユーザーが `delete:users` 権限を持つかどうかを確認しています。このようにして型による安全性を保証しつつ、システムの動作を確認することができます。

## 他のインデックス型との比較

### `T[K]` との違い

一般的なインデックス型アクセス`T[K]`と`T[number]`の違いを理解することで、より適切な使い分けができます。

```typescript
// オブジェクト型でのインデックスアクセス
type User = {
  id: number;
  name: string;
  email: string;
};

type UserId = User['id'];        // number
type UserName = User['name'];    // string
type UserKeys = keyof User;      // 'id' | 'name' | 'email'

// 配列でのインデックスアクセス
type Numbers = [1, 2, 3];
type FirstNumber = Numbers[0];   // 1（特定の位置の型）
type AllNumbers = Numbers[number]; // 1 | 2 | 3（全要素のUnion）
```

### `keyof T` との関係性

`keyof T`は型`T`のすべてのキーのUnion型を取得しますが、配列の場合は数値インデックスと配列メソッドのキーが含まれます。

```typescript
type StringArray = string[];
type ArrayKeys = keyof StringArray; 
// number | "length" | "toString" | "push" | "pop" | ... (配列のメソッド名も含む)

type ArrayElements = StringArray[number]; // string（要素の型のみ）
```

### `T[keyof T]` との使い分け

オブジェクト型において、すべてのプロパティの値の型のUnionを取得する場合は`T[keyof T]`を使用します。

```typescript
type Colors = {
  primary: 'blue';
  secondary: 'green';
  accent: 'red';
};

type ColorKeys = keyof Colors;        // 'primary' | 'secondary' | 'accent'
type ColorValues = Colors[keyof Colors]; // 'blue' | 'green' | 'red'

// 配列の場合
type ColorArray = ['blue', 'green', 'red'];
type ColorElements = ColorArray[number]; // 'blue' | 'green' | 'red'
```

## 組み合わせテクニック

### Mapped Typesとの組み合わせ

`T[number]`記法とMapped Types（マップ型）を組み合わせることで、より複雑な型変換が可能になります。

```typescript
// 配列の要素からオブジェクトの型を生成
type CreateFlags<T extends readonly string[]> = {
  [K in T[number]]: boolean
};

const features = ['darkMode', 'notifications', 'analytics'] as const;
type FeatureFlags = CreateFlags<typeof features>;
// { darkMode: boolean; notifications: boolean; analytics: boolean; }
```

### Conditional Typesとの組み合わせ

条件付き型（Conditional Types）と組み合わせることで、配列要素の型に基づいた動的な型生成が可能になります。

```typescript
// 配列の要素が文字列の場合のみUnion型を生成
type ExtractStrings<T> = T extends readonly (infer U)[] 
  ? U extends string 
    ? T[number] 
    : never
  : never;

type StringArray = ['hello', 'world'];
type NumberArray = [1, 2, 3];

type ExtractedStrings = ExtractStrings<typeof StringArray>; // 'hello' | 'world'
type ExtractedNumbers = ExtractStrings<typeof NumberArray>; // never
```

:::note info
#### `infer` キーワード

`infer`は条件付き型内で型を推論・抽出するためのキーワードです。`T extends readonly (infer U)[]` という記述は、「型Tが配列であれば、その要素の型をUとして推論する」という意味になります。これにより、配列の要素型を動的に取得できます。
:::

### Template Literal Typesとの組み合わせ

テンプレートリテラル型と組み合わせることで、配列要素から新しい文字列型を生成できます。

```typescript
// 配列要素にプレフィックスを付加した型を生成
type AddPrefix<T extends readonly string[], P extends string> = 
  `${P}${T[number]}`;

const actions = ['create', 'update', 'delete'] as const;
type UserActions = AddPrefix<typeof actions, 'user_'>;
// 'user_create' | 'user_update' | 'user_delete'
```

## パフォーマンスと制約事項

### TypeScriptコンパイラへの影響

`T[number]`記法自体は軽量な操作ですが、大きな配列や複雑な型との組み合わせではコンパイラのパフォーマンスに影響を与える可能性があります。

```typescript
// 問題となる可能性のある例（大量の要素）
type HugeArray = [/* 数百から数千の要素 */];
type HugeUnion = HugeArray[number]; // コンパイル時間の増加
```

### Union型のサイズ制限

TypeScriptのUnion型には実用的な上限があり、極端に大きなUnion型は型チェックのパフォーマンスに悪影響を与えます。

### 型の複雑さの管理

複雑な型操作を避け、必要最小限の型変換に留めることが重要です。

```typescript
// 推奨：シンプルな型変換
type SimpleConfig = ['dev', 'prod'] as const;
type Environment = typeof SimpleConfig[number];

// 非推奨：過度に複雑な型変換
// この型は配列から各要素を取り出し、文字列には'_processed'、数値には'num_'を付加します。
type ComplexType<T extends readonly any[]> = 
  T[number] extends infer U 
    ? U extends string 
      ? `${U}_processed`
      : U extends number
        ? `num_${U}`
        : never
    : never;
```

## 実務でのベストプラクティス

### 1. 適切な`as const`の使用

配列から型を抽出する際は、必ず`as const`アサーションを使用してリテラル型を保持しましょう。

```typescript
// 推奨
const statuses = ['pending', 'approved', 'rejected'] as const;
type Status = typeof statuses[number]; // 'pending' | 'approved' | 'rejected'

// 非推奨
const statusesWrong = ['pending', 'approved', 'rejected'];
type StatusWrong = typeof statusesWrong[number]; // string（具体的な値が失われる）
```

### 2. 型の文書化

複雑な型抽出処理には適切なコメントを付けましょう。

```typescript
/**
 * APIのエンドポイント一覧から有効なエンドポイント名の型を抽出
 * 新しいエンドポイントを追加する際は、この配列に追加するだけで
 * 対応する型も自動的に更新される
 */
const apiEndpoints = [
  '/users',
  '/posts', 
  '/comments',
  '/notifications'
] as const;

type ApiEndpoint = typeof apiEndpoints[number];
```

### 3. 型ガードとの併用

生成されたUnion型は型ガードと組み合わせて使用することで、実行時の型安全性を確保できます。

```typescript
const themes = ['light', 'dark', 'auto'] as const;
type Theme = typeof themes[number];

// 型ガード関数
// 受け取った文字列がthemes配列に含まれていればTheme型と判定
function isValidTheme(value: string): value is Theme {
  return (themes as readonly string[]).includes(value);
}

// 使用例
function setTheme(userInput: string) {
  if (isValidTheme(userInput)) {
    // userInput は Theme 型として扱われる
    document.body.className = `theme-${userInput}`;
  } else {
    console.error('Invalid theme specified');
  }
}
```
:::note info
 
#### `value is Theme` について  
これは、TypeScriptの「型ガード」用の記法です。
このように書くことで、「この関数がtrueを返す場合、valueはTheme型として扱える」とTypeScriptに伝えることができ、関数を使った後はその値をTheme型として安全に扱えるようになります。
:::


### 4. 段階的な型構築

複雑な型は段階的に構築し、中間型に意味のある名前を付けましょう。

```typescript
// 基本的な権限定義
const basePermissions = ['read', 'write', 'delete'] as const;
type BasePermission = typeof basePermissions[number];

// リソース定義
const resources = ['users', 'posts', 'comments'] as const;
type Resource = typeof resources[number];

// 最終的な権限型（組み合わせ）
type Permission = `${BasePermission}:${Resource}`;
// 'read:users' | 'write:users' | 'delete:users' | 'read:posts' | ...
```

:::note info 
#### テンプレートリテラル型による型の組み合わせ  
TypeScriptのテンプレートリテラル型を利用して、2つの型（BasePermissionとResource）を組み合わせることで、`read:users`や`write:posts`のような新しい文字列型を自動的に作成できます。  
:::

## まとめ

TypeScriptの`T[number]`記法は、配列型から要素型のUnion型を効率的に抽出するための重要な機能であり、型安全性を保ちながら柔軟な型定義を実現するために欠かせない知識です。基本的な動作原理から始まり、Union型との関係性、他のインデックス型との比較、そして実用的な応用例まで、様々な側面からこの記法を理解することで、TypeScriptの型システムをより深く活用できるようになります。

実務では、設定値の型抽出、APIレスポンスの型定義、状態管理での型安全性確保、権限システムでの型活用など、多岐にわたる場面で`T[number]`記法の恩恵を受けることができます。また、Mapped TypesやConditional Types、Template Literal Typesとの組み合わせにより、より高度な型操作も可能になります。

適切な`as const`の使用、型の文書化、型ガードとの併用、段階的な型構築といったベストプラクティスを取り入れることで、保守性が高く理解しやすいコードを書くことができるでしょう。型システムの力を最大限に活用し、より安全で効率的なTypeScript開発を実現していきましょう。

もし記事の内容に間違いがあれば、コメントでご指摘いただけますと幸いです。また、より良い方法や代替手段をご存知の方がいらっしゃいましたら、ぜひ共有していただければと存じます。特に、大規模プロジェクトでの効果的な型設計パターンや、パフォーマンスを考慮した型定義のアプローチなど、皆様の実務経験に基づく知見をお聞かせいただければ幸いです。