アルアカ - Arcadia Academia

TypeScriptの大きな特徴の一つは、静的型付けによってコードの安全性と可読性を向上させることです。特に、オブジェクトや配列は多くの場面で使用されるため、正しく型を指定することが重要です。この記事では、TypeScriptでオブジェクトと配列の型指定を行う方法について解説します。

オブジェクトは、プロパティをキーとバリューのペアで持つデータ構造です。TypeScriptでは、オブジェクトの型を指定することで、どのようなプロパティを持つか、各プロパティのデータ型は何かを定義できます。

オブジェクトの型指定は、次のように行います。プロパティ名の後にコロン : を付けて型を明記します。

let user: { name: string; age: number; isActive: boolean } = {
    name: "John",
    age: 30,
    isActive: true
};

この例では、userオブジェクトが3つのプロパティ（name, age, isActive）を持ち、それぞれの型がstring, number, booleanであることを指定しています。もし型に一致しない値を設定しようとすると、TypeScriptはコンパイルエラーを発生させます。

オブジェクトの中には、必須ではないプロパティが存在することもあります。TypeScriptでは、プロパティ名の後に?を付けることで、そのプロパティをオプショナル（任意）にすることができます。

let user: { name: string; age?: number } = {
    name: "Alice"
};

この例では、ageプロパティがオプショナルであるため、指定しなくてもエラーにはなりません。

readonly修飾子を使うことで、オブジェクトの特定のプロパティが変更されないことを保証できます。

let user: { readonly id: number; name: string } = {
    id: 1,
    name: "Bob"
};

// user.id = 2; // エラー: readonlyプロパティは変更できません

このように、idプロパティは初期化時にのみ値を設定でき、以降は変更が禁止されます。

TypeScriptで配列を扱う場合、配列がどのような型の要素を持つかを定義する必要があります。これにより、配列内の要素に対する誤った操作を防ぐことができます。

配列の型指定は、型名の後に[]を付けるか、Array<型>の形式で行います。

let numbers: number[] = [1, 2, 3, 4, 5];
let strings: Array<string> = ["apple", "banana", "cherry"];

この例では、numbers配列はnumber型の要素を持つことが明確に示されており、strings配列はstring型の要素のみを含むことを保証しています。誤った型の要素を追加しようとするとエラーが発生します。

numbers.push("six"); // エラー: 'string'型を'number'型の配列に追加できません

配列内にオブジェクトを格納する場合、オブジェクトの型も指定できます。

let users: { name: string; age: number }[] = [
    { name: "John", age: 30 },
    { name: "Jane", age: 25 }
];

この例では、usersという配列の各要素がnameとageというプロパティを持つオブジェクトであることを指定しています。

TypeScriptでは、配列の要素の型と数を固定することも可能です。これをタプルと呼びます。

let user: [string, number] = ["Alice", 25];

この例では、user配列の1つ目の要素がstring型で、2つ目の要素がnumber型であることが保証されています。異なる順番や余分な要素を追加しようとするとエラーになります。

user = [25, "Alice"]; // エラー: 型が一致しません
user = ["Bob", 30, true]; // エラー: 要素が多すぎます

オブジェクトや配列の型が複雑になる場合、型エイリアスを使うことで型定義を再利用しやすく、簡潔に記述できます。

型エイリアスは、typeキーワードを使って定義します。これにより、繰り返し使う複雑な型をシンプルに表現できます。

type User = {
    name: string;
    age: number;
};

let user1: User = { name: "John", age: 30 };
let user2: User = { name: "Jane", age: 25 };

この例では、User型を定義し、2つの異なるユーザーオブジェクトに適用しています。型エイリアスを使うことで、同じ型を繰り返し定義する手間が省け、コードの可読性が向上します。

オブジェクトや配列のプロパティに、複数の型を持たせたい場合は、ユニオン型を使用します。ユニオン型は、|（パイプ記号）を使って複数の型を指定できます。

let user: { name: string; age: number | string } = {
    name: "John",
    age: 30
};

user.age = "30歳"; // OK: numberまたはstringが許可されています

このように、ageプロパティはnumberかstringのいずれかの型を持つことができ、柔軟なデータ構造を作成できます。

TypeScriptにおけるオブジェクトと配列の型指定は、コードの安全性を高めるために非常に重要な要素です。オブジェクトではプロパティごとに型を指定し、配列では要素の型を定義することで、コードの可読性やバグの発生を未然に防ぐことができます。型エイリアスやユニオン型を活用すれば、より柔軟かつ再利用可能な型定義を作成することができるので、ぜひ活用してみてください。