TypeScript: Array.from メソッドで型付き配列の配列を作成する

2024-04-09

TypeScriptで型付き配列の配列を作成する

ジェネリック型を使用すると、配列の要素の型と、内側の配列の要素の型を指定することができます。

type MyArrayType<T> = Array<Array<T>>;

const numbers: MyArrayType<number> = [
  [1, 2, 3],
  [4, 5, 6],
];

const strings: MyArrayType<string> = [
  ["a", "b", "c"],
  ["d", "e", "f"],
];

readonly 修飾子を使用すると、配列を一度作成したら変更できないようにすることができます。

const numbers: readonly Array<readonly number[]> = [
  [1, 2, 3],
  [4, 5, 6],
];

// エラー: 配列を変更しようとしている
numbers[0][0] = 10;

Tuple 型を使用すると、固定長の配列を作成することができます。

const tuple: [number, string, boolean] = [1, "a", true];

// エラー: 配列の長さが合わない
tuple.push(4);

Array.from メソッドを使用すると、既存の配列から新しい型付き配列を作成することができます。

const numbers = [1, 2, 3];

const newNumbers: Array<number> = Array.from(numbers);

// エラー: 配列の要素の型が合わない
newNumbers.push("a");

const numbers = [1, 2, 3];

const newNumbers: Array<string> = numbers.map(n => n.toString());

TypeScriptで型付き配列の配列を作成するには、いくつかの方法があります。どの方法を使用するかは、要件によって異なります。

補足

ジェネリック型を使用すると、コードをより汎用的にすることができます。

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

type MyArrayType<T> = Array<Array<T>>;

const numbers: MyArrayType<number> = [
  [1, 2, 3],
  [4, 5, 6],
];

const strings: MyArrayType<string> = [
  ["a", "b", "c"],
  ["d", "e", "f"],
];

// 配列の要素にアクセスする
console.log(numbers[0][0]); // 1
console.log(strings[1][2]); // "f"

// 配列をループ処理する
for (const row of numbers) {
  for (const num of row) {
    console.log(num);
  }
}

readonly 修飾子を使用する

const numbers: readonly Array<readonly number[]> = [
  [1, 2, 3],
  [4, 5, 6],
];

// エラー: 配列を変更しようとしている
// numbers[0][0] = 10;

// 配列の要素にアクセスする
console.log(numbers[0][0]); // 1

// 配列をループ処理する
for (const row of numbers) {
  for (const num of row) {
    console.log(num);
  }
}

Tuple 型を使用する

const tuple: [number, string, boolean] = [1, "a", true];

// エラー: 配列の長さが合わない
// tuple.push(4);

// 配列の要素にアクセスする
console.log(tuple[0]); // 1
console.log(tuple[1]); // "a"
console.log(tuple[2]); // true

// 配列をループ処理する
for (const element of tuple) {
  console.log(element);
}

Array.from メソッドを使用する

const numbers = [1, 2, 3];

const newNumbers: Array<number> = Array.from(numbers);

// エラー: 配列の要素の型が合わない
// newNumbers.push("a");

// 配列の要素にアクセスする
console.log(newNumbers[0]); // 1

// 配列をループ処理する
for (const num of newNumbers) {
  console.log(num);
}

map メソッドを使用する

const numbers = [1, 2, 3];

const newNumbers: Array<string> = numbers.map(n => n.toString());

// 配列の要素にアクセスする
console.log(newNumbers[0]); // "1"

// 配列をループ処理する
for (const num of newNumbers) {
  console.log(num);
}

型付き配列の配列を作成する他の方法

const numbers: Array<number> = Array.of(1, 2, 3);

const strings: Array<string> = Array.of("a", "b", "c");

// 配列の要素にアクセスする
console.log(numbers[0]); // 1
console.log(strings[1]); // "b"

スプレッド構文を使用すると、既存の配列を新しい配列に展開することができます。

const numbers: Array<number> = [1, 2, 3];

const newNumbers: Array<number> = [...numbers, 4, 5];

// 配列の要素にアクセスする
console.log(newNumbers[0]); // 1
console.log(newNumbers[4]); // 5

const numbers: Array<number> = [1, 2, 3];

const newNumbers: Array<number> = numbers.reduce((acc, num) => {
  acc.push(num);
  return acc;
}, []);

// 配列の要素にアクセスする
console.log(newNumbers[0]); // 1
console.log(newNumbers[2]); // 3