TypeScriptのArray（配列）型をしっかり学ぼう！

TypeScriptの配列型とは

配列とは、順序が付いているデータのリストです。

TypeScriptにおいて特定の型の値を保持する配列を宣言するには、以下の構文を使用します。

let 変数名: データ型[]

例えば、number(数値)型の配列を宣言する場合、以下のように書きます。

let sampleNumbers: number[];

要素を追加する場合、以下のようにインデックス番号を指定することで追加できます。

let sampleNumbers: number[];

sampleNumbers[0] = 100;
sampleNumbers[1] = 700;

もしくはpush()メソッドを使用することでも追加できます。

sampleNumbers.push(300)

また、TypeScriptの型推論を使うと、配列型の変数を宣言すると同時に配列を代入することも可能です。

// 型推論で配列型を定義
let sampleNumbers = [100, 700, 300];

// 型推論を使わない場合は以下のようになる
let sampleNumbers: number[];
sampleNumbers = [100, 700, 300];

TypeScriptでは、特定の型の配列を定義したら、その後は互換性のない値を配列に追加することができません。

そのため、数値型の配列に文字列の値などを追加するとエラーが発生します。

sampleNumbers.push('Hello') // Argument of type 'string' is not assignable to parameter of type 'number'.

配列に対してインデックス番号を指定すると、対象のインデックス番号に当てはまる要素が取得できます。

let sampleNumbers = [100, 700, 300];

let sample = sampleNumbers[0]

console.log(sample); // 100

また、要素を取得する時、TypeScriptは型推論を行うことができます。

console.log(typeof(sample)); // number

number型の配列の要素はnumber(数値)なので、TypeScriptは変数sampleの型をnumberと推論します。

TypeScriptの配列は、JavaScriptのプロパティやメソッドにアクセスすることができます。

例えば、以下ではJavaScriptのlengthプロパティを使って配列の要素数を取得しています。

let numbers = [100, 200, 300];
console.log(numbers.length); // 3

また他にも、

などの便利な配列メソッドをすべて使用することができます。

let numbers = [100, 200, 300];
let doubleNumbers = numbers.map(num => num * 2);

console.log(doubleNumbers); // [200, 400, 600]

以下は、文字列と数値の両方が格納されている配列の宣言方法です。

let sampleArray = [100, 'teacher', 20, 'dog'];

上記の場合、TypeScriptはsampleArray配列に格納される値の型を、number｜stringとして推論します。

つまり、以下の書き方と同じ意味になります。

let sampleArray: (number | string)[];
sampleArray = [100, 'teacher', 20, 'dog'];