Noh | エンジニア向け情報共有コミュニティ
Signup / Login

TypeScript: 配列型から要素の型を取り出す方法

typescript
javascript

投稿日: 2025/10/08

TypeScriptで配列型A[]から要素の型Aを取り出す方法を解説します。

基本: [number]を使う方法

TypeScriptでは、配列型に[number]というインデックスアクセスを使うことで、配列の要素型を簡単に取得できます。これが最もシンプルで推奨される方法です。

type StringArray = string[];
type StringElement = StringArray[number]; // string

type NumberArray = number[];
type NumberElement = NumberArray[number]; // number

なぜ[number]なのか？

配列のインデックスは数値型（number）なので、[number]と書くことで「任意の数値インデックスでアクセスした時の型」、つまり配列の要素型を取得できます。

実践的な使用例

オブジェクトの配列から要素型を取得

type Users = {
  id: number;
  name: string;
  email: string;
}[];

type User = Users[number];
// { id: number; name: string; email: string; }

// 関数の引数として使用
function printUser(user: Users[number]) {
  console.log(`${user.name} (${user.email})`);
}

const assertionと組み合わせる

const fruits = ['apple', 'banana', 'orange'] as const;
type Fruit = typeof fruits[number]; // 'apple' | 'banana' | 'orange'

function isFruit(value: string): value is Fruit {
  return fruits.includes(value as Fruit);
}

型エイリアスやインターフェースと組み合わせる

interface Product {
  id: number;
  name: string;
  price: number;
}

type ProductArray = Product[];
type ProductItem = ProductArray[number]; // Product

// または直接
type ProductItem2 = Product[][number]; // Product

ネストした配列

type Matrix = number[][];
type Row = Matrix[number]; // number[]
type Element = Matrix[number][number]; // number

その他の方法（おまけ）

基本的には[number]を使えば十分ですが、他の方法も紹介します。

条件型とinferを使う方法

type ElementType<T> = T extends (infer U)[] ? U : never;

type Numbers = number[];
type Num = ElementType<Numbers>; // number

この方法は、より複雑な型操作を行う場合や、配列以外の型も扱うユーティリティ型を作る場合に有用です。

// 配列、Promise、その他の型にも対応
type Unpacked<T> = 
  T extends (infer U)[] ? U :
  T extends Promise<infer U> ? U :
  T;

type A = Unpacked<string[]>; // string
type B = Unpacked<Promise<number>>; // number
type C = Unpacked<boolean>; // boolean

TypeScript標準のユーティリティ型を使う方法

TypeScriptには配列の要素型を直接取得するための標準ユーティリティ型はありませんが、ParametersやReturnTypeのような既存のユーティリティ型を応用することもできます。

// 配列を返す関数の戻り値から要素型を取得
type GetArrayElement<T> = T extends () => (infer U)[] ? U : never;

type Func = () => string[];
type Element = GetArrayElement<Func>; // string

まとめ

  • 推奨: Array[number]を使う方法が最もシンプルで直感的
  • 配列の要素型を取得したい場合は、まず[number]を試す
  • より複雑な型操作が必要な場合のみ、条件型とinferを検討する
// ベストプラクティス
type MyArray = { id: number; name: string }[];
type MyElement = MyArray[number]; // シンプルで明確
yosi

Noh を作ってるエンジニア。