JavaScript 配列から脱却！ TypeScriptで型定義された配列でコードをレベルアップ
2024-07-27
TypeScript で型付き配列を使用する
型付き配列の利点
- 型エラーの防止: 型注釈によって、誤った型の値が配列に代入されるのを防ぎ、実行時エラーを防ぎます。
- コードの理解と保守性の向上: 型情報から、配列の内容を容易に推測できるため、コードの理解と保守性が向上します。
- リファクタリングの容易化: 型情報に基づいてコードを安全にリファクタリングすることができます。
- IDE のサポート: 型情報に基づいて、コード補完やエラーチェックなどの IDE 機能がより効果的に動作します。
型付き配列は、2 つの主要な構文で定義できます。
- ジェネリック型:
Array<T>構文を使用します。 ここでTは、配列の要素の型を表す型パラメータです。 例:const numbers: Array<number> = [1, 2, 3]; - 型注釈: 配列変数に型注釈を直接記述します。 例:
const numbers: number[] = [1, 2, 3];
どちらの構文を使用しても、同じ意味になります。 好みに合わせて選択してください。
型付き配列の使用方法
型付き配列は、様々な場面で使用することができます。 以下に、いくつかの例を紹介します。
- 数値配列:
number[]型を使用して、数値の配列を定義できます。 例:const numbers: number[] = [1, 2, 3, 4, 5]; - 文字列配列:
string[]型を使用して、文字列の配列を定義できます。 例:const names: string[] = ["Alice", "Bob", "Charlie"]; - 混合型配列: ジェネリック型を使用して、異なる型の要素を持つ配列を定義できます。 例:
const mixedArray: Array<any> = [1, "Hello", true]; - 多次元配列: 型付き配列をネストさせて、多次元配列を定義できます。 例:
const matrix: number[][] = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
型付き配列を使用することで、コードの信頼性と保守性を大幅に向上させることができます。 TypeScript を使用する場合は、ぜひ型付き配列を活用することをおすすめします。
- 型推論: TypeScript は、型注釈を省略して、型を推論することもできます。 ただし、明示的な型注釈を使用する方が、コードの意図を明確に伝えられるため、常に推奨されます。
- タプル型: 特定の順序と型を持つ要素を持つ固定長の配列を定義したい場合は、タプル型を使用します。 例:
const tuple: [number, string] = [1, "Alice"]; - ジェネリック関数: 型パラメータを持つジェネリック関数を作成することで、様々な型の配列を処理する汎用的なコードを書くことができます。
リソース
例 1: 数値配列
この例では、number 型の要素を持つ数値配列を定義します。
const numbers: number[] = [1, 2, 3, 4, 5];
// 配列の要素にアクセス
console.log(numbers[0]); // 1 を出力
console.log(numbers[3]); // 4 を出力
// 配列の長さを取得
console.log(numbers.length); // 5 を出力
// 配列に要素を追加
numbers.push(6);
console.log(numbers); // [1, 2, 3, 4, 5, 6] を出力
例 2: 文字列配列
const names: string[] = ["Alice", "Bob", "Charlie"];
// 配列の要素にアクセス
console.log(names[0]); // "Alice" を出力
console.log(names[2]); // "Charlie" を出力
// 配列の長さを取得
console.log(names.length); // 3 を出力
// 配列に要素を追加
names.push("David");
console.log(names); // ["Alice", "Bob", "Charlie", "David"] を出力
例 3: 混合型配列
この例では、異なる型の要素を持つ混合型配列を定義します。
const mixedArray: any[] = [1, "Hello", true];
// 配列の要素にアクセス
console.log(mixedArray[0]); // 1 を出力
console.log(mixedArray[1]); // "Hello" を出力
console.log(mixedArray[2]); // true を出力
// 配列の長さを取得
console.log(mixedArray.length); // 3 を出力
// 配列に要素を追加
mixedArray.push({});
console.log(mixedArray); // [1, "Hello", true, {}] を出力
例 4: 多次元配列
この例では、多次元配列を定義します。
const matrix: number[][] = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// 2行目の3列目の要素にアクセス
console.log(matrix[1][2]); // 6 を出力
// 行の数を取得
console.log(matrix.length); // 3 を出力
// 列の数を取得
console.log(matrix[0].length); // 3 を出力
// 配列に要素を追加
matrix.push([10, 11, 12]);
console.log(matrix); // [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]]
例 5: ジェネリック関数
この例では、様々な型の配列を処理するジェネリック関数を作成します。
function printArray<T>(array: T[]): void {
for (const element of array) {
console.log(element);
}
}
// 数値配列を処理
const numbers: number[] = [1, 2, 3];
printArray(numbers); // 1, 2, 3 を出力
// 文字列配列を処理
const names: string[] = ["Alice", "Bob", "Charlie"];
printArray(names); // "Alice", "Bob", "Charlie" を出力
TypeScript は、型注釈を省略して、型を推論することができます。 以下は、型推論の例です。
const numbers = [1, 2, 3]; // 型注釈を省略
console.log(numbers[0]); // 型推論により、number 型であることが分かる
ただし、明示的な型注釈を使用する方が、コードの意図を明確に伝えられるため、常に推奨されます。
タプル型を使用する
特定の順序と型を持つ要素を持つ固定長の配列を定義したい場合は、タプル型を使用します。 例:
const tuple: [number, string] = [1, "Alice"];
console.log(tuple[0]); // 1 を出力
console.log(tuple[1]); // "Alice" を出力
ジェネリック型パラメータを複数使用する
ジェネリック関数において、複数の型パラメータを使用することで、より汎用的なコードを書くことができます。 例:
function swap<T, U>(a: T, b: U): [U, T] {
return [b, a];
}
const result = swap(1, "Hello");
console.log(result); // ["Hello", 1] を出力
ReadonlyArray 型を使用する
読み取り専用の配列を定義したい場合は、ReadonlyArray 型を使用します。 例:
const readonlyNumbers: ReadonlyArray<number> = [1, 2, 3];
readonlyNumbers.push(4); // エラーが発生: 配列は読み取り専用です
Union 型を使用する
配列の要素が複数の型になり得る場合、Union 型を使用します。 例:
const values: (number | string)[] = [1, "Hello", 2];
console.log(values[0]); // 1 を出力
console.log(values[1]); // "Hello" を出力
arrays typescript
