TypeScriptのT[number]記法完全解説：配列から要素型のUnionを取得する技術
私はプログラミング歴1年半になるエンジニアで、前回はTypeScriptの型システムについて執筆しました。今回は私が理解に困難した「T[number]記法」について詳しく解説していきます。この記法は、配列型から要素の型を抽出してUnion型(「AまたはBまたはC」のように複数の値のうちいずれか一つを表す型)を作成する際に使用される重要なテクニックです。
T[number]記法は、一見すると直感的でない構文に見えますが、その仕組みを理解することで、TypeScriptの型システムをより深く活用できるようになります。配列の要素型を効率的に操作する場面や、型安全性を保ちながら動的な型生成を行う際に、この知識は欠かせません。
目次
- はじめに
- T[number]記法とは
- 基本的な動作原理
- Union型との関係性
- 実用的な応用例
- 他のインデックス型との比較
- 組み合わせテクニック
- パフォーマンスと制約事項
- 実務でのベストプラクティス
- まとめ
はじめに
TypeScriptの型システムを深く理解するためには、配列の型操作に関する知識が不可欠です。特に、配列の要素型を抽出してUnion型を生成するT[number]記法は、型レベルでの複雑な操作を可能にする重要な機能の一つです。
実務では、定数配列から許可される値の型を生成したり、APIのレスポンス配列から個別要素の型を抽出する必要が生じます。また、設定オブジェクトの配列から特定のプロパティの型だけを取り出したいケースも頻繁に発生します。これらの課題に対して、T[number]記法を活用することで、型安全性を保ちながら効率的な型定義が実現できます。
本記事では、TypeScriptの「T[number]記法」という特殊な型操作技術に焦点を当て、その仕組みと実践的な活用方法を詳しく説明していきます。
T[number]記法とは
基本概念
T[number]記法は、配列型Tのすべての要素の型を取得し、それらをUnion型として結合する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型として定義する必要がありました。
// 手動でUnion型を定義
type ManualColor = 'red' | 'green' | 'blue';
// 対応する配列を別途定義
const colors: ManualColor[] = ['red', 'green', 'blue'];
この方法には以下の問題があります。
- 重複定義: 配列と型を別々に管理する必要がある
- 同期の問題: 配列を変更した際に、対応する型定義を忘れがち
- 保守性の低下: 要素の追加・削除時に複数箇所の修正が必要
T[number]記法を使用することで、これらの問題を解決し、単一の配列定義から自動的に型を生成できます。
基本的な動作原理
配列のインデックス型の理解
配列は本質的に、数値インデックスをキーとするオブジェクトとして扱われます。TypeScriptでは、配列型T[]は{ [index: number]: T }という構造として内部的に表現されています。
// これらは同等の意味を持つ
type StringArray1 = string[];
type StringArray2 = { [index: number]: string };
T[number]の動作メカニズム
T[number]記法が動作する仕組みを段階的に見てみましょう。
-
配列型の認識: TypeScriptが配列型
Tを検出 -
インデックス型の適用:
number型のすべての可能な値をインデックスとして使用 - 要素型の収集: 配列のすべての位置に存在する可能性のある型を収集
- Union型の生成: 収集された型をUnion型として結合
具体的な動作例
// 異なる型の要素を含む配列
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を取得しています。
Union型との関係性
Union型の基本概念
Union型は、複数の型のうちいずれか一つを表す型です。A | B | Cという記法で表現され、「A型、B型、C型のいずれか」という意味になります。
type Status = 'pending' | 'completed' | 'failed';
// この変数は3つの文字列リテラルのうちいずれかの値を持つ
let currentStatus: Status = 'pending';
T[number]がUnion型を生成する理由
配列の要素にアクセスする際、実行時にはどのインデックスの要素が取得されるかわかりません。TypeScriptは型安全性を保つため、配列のすべての位置に存在する可能性のある型をUnion型として表現します。
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'
Union型の型ガード
生成されたUnion型は、型ガード（型を絞り込む仕組み）と組み合わせて使用することで、より安全な型操作が可能になります。
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. 設定オブジェクトの値の型抽出
アプリケーションの設定値を配列で管理する場合、その設定値の型を抽出して型安全性を確保できます。
// 環境設定の定義
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}`);
}
2. APIレスポンスの型抽出
APIから取得したデータの配列から、個別要素の型を抽出して型安全な処理を実現できます。
// 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]記法が威力を発揮します。
// アクションタイプの定義
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. 権限システムでの型活用
システムの権限管理において、定義された権限から型を自動生成することで、権限チェック処理の型安全性を高められます。
// 権限の定義
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]の違いを理解することで、より適切な使い分けができます。
// オブジェクト型でのインデックスアクセス
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型を取得しますが、配列の場合は数値インデックスと配列メソッドのキーが含まれます。
type StringArray = string[];
type ArrayKeys = keyof StringArray;
// number | "length" | "toString" | "push" | "pop" | ... (配列のメソッド名も含む)
type ArrayElements = StringArray[number]; // string（要素の型のみ）
T[keyof T] との使い分け
オブジェクト型において、すべてのプロパティの値の型のUnionを取得する場合はT[keyof T]を使用します。
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（マップ型）を組み合わせることで、より複雑な型変換が可能になります。
// 配列の要素からオブジェクトの型を生成
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）と組み合わせることで、配列要素の型に基づいた動的な型生成が可能になります。
// 配列の要素が文字列の場合のみ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
Template Literal Typesとの組み合わせ
テンプレートリテラル型と組み合わせることで、配列要素から新しい文字列型を生成できます。
// 配列要素にプレフィックスを付加した型を生成
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]記法自体は軽量な操作ですが、大きな配列や複雑な型との組み合わせではコンパイラのパフォーマンスに影響を与える可能性があります。
// 問題となる可能性のある例（大量の要素）
type HugeArray = [/* 数百から数千の要素 */];
type HugeUnion = HugeArray[number]; // コンパイル時間の増加
Union型のサイズ制限
TypeScriptのUnion型には実用的な上限があり、極端に大きなUnion型は型チェックのパフォーマンスに悪影響を与えます。
型の複雑さの管理
複雑な型操作を避け、必要最小限の型変換に留めることが重要です。
// 推奨：シンプルな型変換
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アサーションを使用してリテラル型を保持しましょう。
// 推奨
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. 型の文書化
複雑な型抽出処理には適切なコメントを付けましょう。
/**
* APIのエンドポイント一覧から有効なエンドポイント名の型を抽出
* 新しいエンドポイントを追加する際は、この配列に追加するだけで
* 対応する型も自動的に更新される
*/
const apiEndpoints = [
'/users',
'/posts',
'/comments',
'/notifications'
] as const;
type ApiEndpoint = typeof apiEndpoints[number];
3. 型ガードとの併用
生成されたUnion型は型ガードと組み合わせて使用することで、実行時の型安全性を確保できます。
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');
}
}
4. 段階的な型構築
複雑な型は段階的に構築し、中間型に意味のある名前を付けましょう。
// 基本的な権限定義
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' | ...
まとめ
TypeScriptのT[number]記法は、配列型から要素型のUnion型を効率的に抽出するための重要な機能であり、型安全性を保ちながら柔軟な型定義を実現するために欠かせない知識です。基本的な動作原理から始まり、Union型との関係性、他のインデックス型との比較、そして実用的な応用例まで、様々な側面からこの記法を理解することで、TypeScriptの型システムをより深く活用できるようになります。
実務では、設定値の型抽出、APIレスポンスの型定義、状態管理での型安全性確保、権限システムでの型活用など、多岐にわたる場面でT[number]記法の恩恵を受けることができます。また、Mapped TypesやConditional Types、Template Literal Typesとの組み合わせにより、より高度な型操作も可能になります。
適切なas constの使用、型の文書化、型ガードとの併用、段階的な型構築といったベストプラクティスを取り入れることで、保守性が高く理解しやすいコードを書くことができるでしょう。型システムの力を最大限に活用し、より安全で効率的なTypeScript開発を実現していきましょう。
もし記事の内容に間違いがあれば、コメントでご指摘いただけますと幸いです。また、より良い方法や代替手段をご存知の方がいらっしゃいましたら、ぜひ共有していただければと存じます。特に、大規模プロジェクトでの効果的な型設計パターンや、パフォーマンスを考慮した型定義のアプローチなど、皆様の実務経験に基づく知見をお聞かせいただければ幸いです。