TypeScript 配列まとめ

TypeScriptの配列についてざっとまとめました。

基本形

型の後ろに[]をつける書き方とArray<T>を用いる書き方がある。どちらでもOK。

let array1: number[];
array1 = [1, 2, 3];
console.log(array1);
let array2: Array<number>;
array2 = [1, 2, 3];
console.log(array1);
//[ 1, 2, 3 ]
//[ 1, 2, 3 ]
　

 

存在しない要素にアクセスした時の挙動

以下のように特にエラーになることなく「undefined」になる。メソッドを使おうとするとコンパイルエラーになるため、typeofで絞り込むことでコンパイルエラーにはならない。

const array = ["a", "b", "c"];
console.log(array[100]);
// undefined

array[100].toUpperCase(); //コンパイルエラー

if (typeof array[100] === "string") {
  array[100].toUpperCase(); //コンパイルエラーにならない
}
 

 

読み取り専用の配列

配列はconst宣言しても編集できてしまうので、もし編集不可にしたい場合は以下のような書き方をする。

const array1: readonly number[] = [1, 2, 3];
const array2: ReadonlyArray<number> = [1, 2, 3];
array1.push(4); //コンパイルエラー
 

 

配列の分割代入

配列の要素を変数に分割編集する方法。要素数を超えてもエラーにはならずundefinedになる。

const num = [1, 2, 3];
const [num1, num2, num3, num4] = num;
console.log(num1);
console.log(num2);
console.log(num3);
console.log(num4);
//1
//2
//3
//undefined
 

 

配列の繰り返し処理

配列の繰り返し処理は以下の３パターン。

const array = ["a", "b", "c", "d"];
for(let i = 0; i < array.length; i++) {
  console.log(i, array[i]);
}
for(const value of array) {
  console.log(value);
}
array.forEach((value, i) => {
  console.log(i, value);
});
　

 

 - TypeScript