Skip to content

オブジェクトとインターフェース

公開日:November 16, 2024更新日:November 28, 2024
JavaScriptTypeScriptCoding📄

TypeScriptでは、オブジェクト型とインターフェースを使って、複雑なデータ構造を扱いやすくし、型の安全性を高めることができます。このセクションでは、オブジェクト型の定義からインターフェースの利用方法、そしてインターフェースの拡張について学んでいきます。

オブジェクト型の定義

TypeScriptでは、オブジェクト型を定義することで、オブジェクトのプロパティやそれらの型を指定することができます。これにより、オブジェクトに必要なプロパティやその型を事前に定義し、誤った使用を防ぐことができます。

typescript
let user: { name: string; age: number; isAdmin: boolean } = {
  name: "Alice",
  age: 25,
  isAdmin: false,
};

上記の例では、userというオブジェクトにname(文字列型)、age(数値型)、isAdmin(真偽値型)のプロパティを持つことを定義しています。これにより、userオブジェクトが他の型やプロパティを持つことを防ぎます。

インターフェースの使い方

インターフェースは、オブジェクトの構造を定義するための強力な機能です。インターフェースを使うことで、同じ構造を持つ複数のオブジェクトに対して型注釈を簡単に適用できます。

インターフェースの基本的な使い方を以下に示します。

typescript
interface User {
  name: string;
  age: number;
  isAdmin: boolean;
}

let user1: User = {
  name: "Bob",
  age: 30,
  isAdmin: true,
};

let user2: User = {
  name: "Carol",
  age: 22,
  isAdmin: false,
};

この例では、Userというインターフェースを定義し、それを使ってuser1user2といったオブジェクトに型注釈をしています。これにより、同じ構造のオブジェクトを簡単に再利用することができます。

インターフェースを利用することで、コードの再利用性が向上し、チーム開発においてもオブジェクトの構造が統一され、保守性が向上します。

インターフェースの拡張

インターフェースは拡張(継承)することが可能で、既存のインターフェースにプロパティを追加した新しいインターフェースを作ることができます。これにより、より柔軟にオブジェクトの型を定義できます。

typescript
interface User {
  name: string;
  age: number;
  isAdmin: boolean;
}

interface PremiumUser extends User {
  subscriptionLevel: string;
}

let premiumUser: PremiumUser = {
  name: "Dave",
  age: 35,
  isAdmin: true,
  subscriptionLevel: "Gold",
};

上記の例では、UserインターフェースをPremiumUserインターフェースが拡張しています。PremiumUserUserのすべてのプロパティに加えて、subscriptionLevelという新しいプロパティを持っています。これにより、既存のインターフェースを再利用しつつ、新しいプロパティを追加した型を定義することができます。

このようにインターフェースを拡張することで、既存のコードを無駄にすることなく、新しい要件に対応した型を定義することが可能になります。また、複数のインターフェースを組み合わせて複雑なオブジェクトを扱うことも簡単に行えます。

typescript
interface Address {
  street: string;
  city: string;
  country: string;
}

interface DetailedUser extends User, Address {
  phoneNumber: string;
}

let detailedUser: DetailedUser = {
  name: "Eve",
  age: 28,
  isAdmin: false,
  street: "123 Main St",
  city: "New York",
  country: "USA",
  phoneNumber: "123-456-7890",
};

この例では、UserAddressの両方を拡張してDetailedUserインターフェースを作成しています。これにより、ユーザー情報と住所情報を一つのオブジェクトとして扱うことができます。

まとめ

TypeScriptでは、オブジェクト型やインターフェースを使ってオブジェクトの構造を厳密に定義できます。インターフェースを利用することでコードの再利用性を高め、拡張することで柔軟に型を定義することが可能です。これにより、プロジェクトの規模が大きくなってもコードの保守性を高めることができます。