TypeScript: 配列型から要素型情報を取得する方法

2024-04-02

TypeScript: 配列型から要素型情報を取得する

添字を使用する

最も簡単な方法は、配列型に数値型の添字を使用することです。

const numbers: number[] = [1, 2, 3];
const element: number = numbers[0]; // number型

この方法では、配列の要素型がプリミティブ型である場合にのみ使用できます。

typeof 演算子を使用して、配列型の要素型の情報を取得できます。

const numbers: number[] = [1, 2, 3];
const elementType: typeof numbers[0] = number; // number型

interface MyArray<T> {
  elements: T[];
}

const numbers: MyArray<number> = {
  elements: [1, 2, 3],
};

const elementType: number = numbers.elements[0]; // number型

type ElementType<T> = T extends readonly unknown[] ? T[number] : never;

const numbers: number[] = [1, 2, 3];
const elementType: ElementType<numbers> = number; // number型

型ユーティリティを使用する

要素型情報を取得するための型ユーティリティライブラリがいくつか存在します。

import { ElementType } from "type-fest";

const numbers: number[] = [1, 2, 3];
const elementType: ElementType<numbers> = number; // number型

これらのライブラリを使用することで、より簡潔なコードで要素型情報を取得できます。

TypeScriptで配列型から要素型情報を取得するには、いくつかの方法があります。どの方法を使用するかは、状況によって異なります。

const numbers: number[] = [1, 2, 3];
const element: number = numbers[0]; // number型

typeof 演算子を使用する

const numbers: number[] = [1, 2, 3];
const elementType: typeof numbers[0] = number; // number型

ジェネリック型を使用する

interface MyArray<T> {
  elements: T[];
}

const numbers: MyArray<number> = {
  elements: [1, 2, 3],
};

const elementType: number = numbers.elements[0]; // number型

infer キーワードを使用する

type ElementType<T> = T extends readonly unknown[] ? T[number] : never;

const numbers: number[] = [1, 2, 3];
const elementType: ElementType<numbers> = number; // number型

import { ElementType } from "type-fest";

const numbers: number[] = [1, 2, 3];
const elementType: ElementType<numbers> = number; // number型

これらのサンプルコードを実行することで、TypeScriptで配列型から要素型情報を取得する方法を理解することができます。

Array.prototype.map メソッドを使用して、配列の各要素をその要素型に変換できます。

const numbers: number[] = [1, 2, 3];
const elementTypes: number[] = numbers.map((element) => typeof element); // [number, number, number]

reduce メソッドを使用して、配列の要素型を1つの型に結合できます。

const numbers: number[] = [1, 2, 3];
const elementType: string = numbers.reduce((acc, element) => `${acc}, ${typeof element}`); // "number, number, number"

カスタム型ガードを使用して、配列の要素型をチェックできます。

function isNumber(element: unknown): element is number {
  return typeof element === "number";
}

const numbers: number[] = [1, 2, 3];
const element: number | undefined = numbers.find(isNumber); // number型