【TypeScript】number[]やstring[],Array<boolean>とは何か？配列の型を実例で解説（Array<>, TS独自の型一覧）

TypeScriptで配列の変数を定義しようとしたとき、「number[] と $Array<number>$ は何が違うの？」「string しか入らない配列はどう書くの？」と疑問に思ったことはありませんか？

この記事では、TypeScriptにおける配列の型注釈の基本ルールを、実例を交えて解説しています。

number[]やstring[]とは何か？

TypeScript（TS）の number[] や string[] は、配列の型注釈です。

具体的には、配列の型を指定するもので、その配列が特定の型の要素のみを含むことを示します。

JavaScriptの配列の型はArray型（配列型）しか存在しません。これをより厳密に定義したものになります。

基本形は２つ

配列の型注釈の基本形は以下の２つがあります。

型名 + 各括弧[] 形式

型名 + 各括弧[] 形式は、最も一般的で推奨される形式です。

配列を表す[ ]の前に型をつけることで、その配列の中身が指定した型しかとらないことを定義します。

要素の型[]

例えば以下のような種類があります。

• number[]：数値の配列
• string[]：文字列の配列
• boolean[]：真偽値の配列
• User[]：カスタム型の配列 (* User は自分で定義した型)

ジェネリック形式：Array<T>

型名 + 各括弧[] 形式をジェネリック形式でも記述することができます。

ジェネリック型 Array を使い、その要素の型を型引数として指定します。

Array<要素の型>

例えば以下のような種類があります。

• Array<number>：数値の配列（number[]と同じ）
• Array<string>：文字列の配列（string[]と同じ）

実例1：変数の型定義

配列の変数の型を定義する場合は以下のように記述します。

let numbers: number[] = [1, 5, 10, 3.14];

let names: string[] = ["Alice", "Bob", "Charlie"];

なお、以下のように指定した型に一致しない要素が含まれる場合はエラーになります。

let numbers: number[] = [1, "five", 10]; //コンパイルエラー

型推論を使う

配列の変数などの型を定義するときに、あえて「型名 + 各括弧形式」のように型を指定せず型推論に任せるのが一般的です。

let numbers = [1, 5, 10, 3.14]; //型推論でnumber[]になる。

let names = ["Alice", "Bob", "Charlie"]; //: //型推論でstring[]になる。

実例２：配列の中に複数の型を含む場合

配列の中に複数の型を含む場合は、ユニオン型を使います。

例えば、以下のように記述すれば、配列の中身は文字列、数値、真偽値のいずれかを許容できます。

(string | number | boolean)[]

▼具体的な使い方

let mixedArray: (string | number | boolean)[] = [
  "Hello", // string
  123,     // number
  true     // boolean
];

TS独自の型一覧

配列の型のように、JavaScriptにはなく、TypeScriptにしか存在しない型は他にもあります。

れらは主にコンパイル時の型チェックのために存在し、JavaScriptの実行時には消滅したり、特定の機能に置き換えられたりする型です。

複雑な構造を表現するための概念

他にも、JavaScriptにはなく、TypeScriptにしか存在しない型の概念もあります。