【徹底解説】TypeScriptで配列を扱う！「Array<string>」と「string[]」の違いと使い分け

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

Array<string> と string[] は、どちらも「文字列の配列」を表す型であり、機能面 で 違いはありません。

どちらを使うべきかは、好み の問題 です。

詳細

• string[] は配列リテラルを用いた書き方です。こちらはより簡潔で分かりやすい表記です。
• Array<string> はジェネリック構文を用いた書き方です。ジェネリックとは、型を抽象化して様々なデータ型に適用できるようにする仕組みです。

例

// ジェネリック構文
let numbers: Array<number> = [1, 2, 3];
let words: Array<string> = ['hello', 'world'];

// 配列リテラル
let numbers2: number[] = [1, 2, 3];
let words2: string[] = ['hello', 'world'];

• しかし、多くの開発者は依然として string[] を使用しており、特に問題はありません。
• 公式ドキュメントでは、string のみを使用するべきと推奨されています。これは、String はプリミティブ型ではなくオブジェクトであり、ほとんど適切に使用されないためです。

配列の宣言と初期化

// ジェネリック構文
let numbers: Array<number> = [1, 2, 3];
let words: Array<string> = ['hello', 'world'];

// 配列リテラル
let numbers2: number[] = [1, 2, 3];
let words2: string[] = ['hello', 'world'];

説明

• 上記のコードでは、2つの配列を宣言しています。
  • numbers は Array<number> 型で、数値リテラル [1, 2, 3] で初期化されています。
  • words は Array<string> 型で、文字列リテラル ['hello', 'world'] で初期化されています。
  • numbers2 は number[] 型で、numbers と同じ値で初期化されています。
  • words2 は string[] 型で、words と同じ値で初期化されています。

配列への要素の追加

// ジェネリック構文
numbers.push(4);
words.push('!');

// 配列リテラル
numbers2.push(5);
words2.push('?');

• 上記のコードでは、既存の配列に要素を追加しています。
  • numbers.push(4) は、numbers 配列に数値 4 を追加します。
  • words.push('!') は、words 配列に文字列 ! を追加します。

配列要素へのアクセス

// ジェネリック構文
console.log(numbers[0]); // 1 を出力
console.log(words[1]); // world を出力

// 配列リテラル
console.log(numbers2[0]); // 1 を出力
console.log(words2[1]); // world を出力

• 上記のコードでは、配列の要素にアクセスしています。
  • console.log(numbers[0]) は、numbers 配列の最初の要素 (1) をコンソールに出力します。
  • console.log(words[1]) は、words 配列の 2 番目の要素 (world) をコンソールに出力します。

配列の長さ

// ジェネリック構文
console.log(numbers.length); // 3 を出力
console.log(words.length); // 2 を出力

// 配列リテラル
console.log(numbers2.length); // 3 を出力
console.log(words2.length); // 2 を出力

配列のループ処理

// ジェネリック構文
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

for (let word of words) {
  console.log(word);
}

// 配列リテラル
for (let i = 0; i < numbers2.length; i++) {

• ただし、変数の型が明確でない場合、コンパイルエラーが発生する可能性があります。
• TypeScript の型推論機能を活用することで、型注釈を省略してコードを簡潔に記述できます。

let numbers = [1, 2, 3]; // 型推論により `number[]` となる
let words = ['hello', 'world']; // 型推論により `string[]` となる

readonly 修飾子

• 要素の追加や変更を禁止したい場合に有効です。
• readonly 修飾子を用いることで、配列を 読み取り専用 にすることができます。

let numbers: readonly number[] = [1, 2, 3];
let words: readonly string[] = ['hello', 'world'];

シンボル型

• 異なる種類のデータを含む配列を区別したい場合に有効です。
• シンボル型を用いることで、ユニークな型を持つ配列を作成できます。

const numberSymbol = Symbol('number');
const stringSymbol = Symbol('string');

let numbers: symbol[] = [1, 2, 3]; // 型 `symbol[]` となるが、実際は `number[]` と同等
let words: symbol[] = ['hello', 'world']; // 型 `symbol[]` となるが、実際は `string[]` と同等

タプル型

• 要素の型と順番を厳密に定義したい場合に有効です。

type MyTuple = [number, string];

let data: MyTuple = [1, 'hello'];

ジェネリック型

• 柔軟性と汎用性を求める場合に有効です。
• ジェネリック型を用いることで、様々な型を持つ要素を含む配列を作成できます。

function createArray<T>(items: T[]): T[] {
  return items;
}

let numbers = createArray([1, 2, 3]); // 型 `number[]` となる
let words = createArray(['hello', 'world']); // 型 `string[]` となる