TypeScript 配列の高度なテクニック：readonly、const、Tuple

TypeScriptにおける Array<Type> と Type[] の違い

• Array<Type> 構文
• Type[] 構文

どちらの構文も、コード上の意味は全く同じです。コンパイラのチェック内容も変わりません。つまり、どちらを使用しても構いません。

それぞれの構文の詳細

Array<Type> 構文は、ジェネリック構文と呼ばれるものです。Array はジェネリック型であり、要素の型を <> 内に指定します。

例：

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

Type[] 構文は、配列リテラル構文と呼ばれるものです。Type の後に [] を記述します。

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

• 可読性を重視する場合

可読性を重視する場合、Array<Type> 構文の方が分かりやすいと感じる人もいます。特に、要素の型が複雑な場合や、ジェネリック型を使用している場合に有効です。

const fruits: Array<Fruit> = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
];

簡潔性を重視する場合、Type[] 構文の方が短くて済みます。要素の型が単純な場合や、コード量を削減したい場合に有効です。

const numbers: number[] = [1, 2, 3, 4, 5];

Array<Type> 構文と Type[] 構文は、どちらも TypeScript で配列を扱うための有効な方法です。どちらを使うべきかは、好みや状況によって異なります。

Array<Type> 構文

// 数値型の配列
const numbers: Array<number> = [1, 2, 3, 4, 5];

// 文字列型の配列
const names: Array<string> = ["Alice", "Bob", "Carol"];

// ジェネリック型を使用
interface Person {
  name: string;
  age: number;
}

const people: Array<Person> = [
  { name: "Alice", age: 20 },
  { name: "Bob", age: 30 },
  { name: "Carol", age: 40 },
];

Type[] 構文

// 数値型の配列
const numbers: number[] = [1, 2, 3, 4, 5];

// 文字列型の配列
const names: string[] = ["Alice", "Bob", "Carol"];

// ジェネリック型を使用
interface Person {
  name: string;
  age: number;
}

const people: Person[] = [
  { name: "Alice", age: 20 },
  { name: "Bob", age: 30 },
  { name: "Carol", age: 40 },
];

TypeScriptで配列を扱う他の方法

readonly 修飾子を配列の前に使用すると、配列の内容を変更できなくなります。

const numbers: readonly number[] = [1, 2, 3];

// エラー: 配列の内容を変更しようとするとエラーが発生
numbers[0] = 10;

const キーワードを使用して配列を宣言すると、配列の内容と配列自体の両方を変更できなくなります。

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

// エラー: 配列の内容を変更しようとするとエラーが発生
numbers[0] = 10;

// エラー: 配列を再代入しようとするとエラーが発生
numbers = [4, 5, 6];

Tuple 型は、要素の型と個数が決まった配列を表す型です。

const person: [string, number] = ["Alice", 20];

// エラー: 要素の型が異なるためエラーが発生
person[0] = 10;

// エラー: 要素の個数が異なるためエラーが発生
person.push("Bob");

ReadonlyArray 型は、readonly 修飾子を付けた Array 型と同じです。

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

// エラー: 配列の内容を変更しようとするとエラーが発生
numbers[0] = 10;

Array<Type> 構文と Type[] 構文以外にも、TypeScriptで配列を扱う方法はいくつかあります。それぞれの方法には、それぞれメリットとデメリットがあります。状況に合わせて適切な方法を選択してください。