初心者向けの TypeScript オブジェクトを簡単に解説

オブジェクトは、JavaScript と TypeScript の基本的な部分です。オブジェクトを使用すると、関連するデータと関数をグループ化して、コード内で現実世界のエンティティをモデル化することができます。TypeScript は、JavaScript オブジェクトを型の安全性で強化し、コードの予測可能性と保守性を高めます。このガイドでは、初心者向けに TypeScript オブジェクトの概念をわかりやすく説明します。

TypeScript におけるオブジェクトとは何ですか?

オブジェクト はキーと値のペアのコレクションです。キーは文字列 (またはシンボル) で、値は任意の型にすることができます。TypeScript では、型またはインターフェイスを使用してオブジェクトの形状を定義し、オブジェクトが特定の構造に従うようにすることができます。

TypeScript でシンプルなオブジェクトを定義する

まず、TypeScript で簡単なオブジェクトを定義してみましょう。これは、JavaScript でオブジェクトを定義する方法と似ていますが、型の安全性という利点が追加されています。

基本オブジェクトの例

TypeScript で単純なオブジェクトを定義する方法は次のとおりです。

const person: { name: string; age: number } = {
  name: "Alice",
  age: 25
};

console.log(person.name); // Output: Alice
console.log(person.age);  // Output: 25

この例では、person オブジェクトには、name (型 string) と age (型 number) の 2 つのプロパティがあります。TypeScript は、オブジェクトがこの構造に準拠していることを確認します。

インターフェースを使用してオブジェクト構造を定義する

interface は、オブジェクトの形を定義する TypeScript の強力な機能です。インターフェイスは、コード内でコントラクトを定義する方法を提供し、オブジェクトが特定の構造に準拠していることを保証します。

インターフェースの定義

インターフェースを使用してオブジェクトの構造を定義する方法は次のとおりです。

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Bob",
  age: 30
};

console.log(person.name); // Output: Bob
console.log(person.age);  // Output: 30

この例では、Person インターフェイスは person オブジェクトの構造を定義します。person 変数はこの構造に従う必要があります。従わない場合、TypeScript はエラーをスローします。

オブジェクトのオプションプロパティ

TypeScript では、? シンボルを使用してオブジェクトにオプションのプロパティを定義できます。オプションのプロパティはオブジェクトの作成時に省略できるため、オブジェクト構造を柔軟に定義できます。

オプションプロパティの例

phoneNumber プロパティがオプションである例を次に示します。

interface Employee {
  name: string;
  age: number;
  phoneNumber?: string; // Optional property
}

const employee1: Employee = {
  name: "John",
  age: 28
};

const employee2: Employee = {
  name: "Doe",
  age: 32,
  phoneNumber: "123-456-7890"
};

console.log(employee1.phoneNumber); // Output: undefined
console.log(employee2.phoneNumber); // Output: 123-456-7890

この例では、employee1 には phoneNumber プロパティがありませんが、employee2 にはあります。どちらも Employee インターフェイスに従って有効です。

オブジェクトの読み取り専用プロパティ

TypeScript では、プロパティを readonly にして、オブジェクトの作成後に変更されないようにすることができます。これは、不変のオブジェクトを作成する場合に便利です。

読み取り専用プロパティの例

読み取り専用プロパティを定義する方法は次のとおりです。

interface Car {
  readonly brand: string;
  model: string;
}

const car: Car = {
  brand: "Toyota",
  model: "Camry"
};

// car.brand = "Honda"; // Error: Cannot assign to 'brand' because it is a read-only property

car.model = "Corolla"; // Valid
console.log(car.model); // Output: Corolla

この例では、brand プロパティは readonly としてマークされています。これを変更しようとすると、コンパイル時エラーが発生します。

TypeScript のネストされたオブジェクト

TypeScript オブジェクトはネストできます。つまり、オブジェクトに別のオブジェクトをプロパティとして含めることができます。これは複雑なデータ構造では一般的です。

ネストされたオブジェクトの例

ネストされたオブジェクトの例を次に示します。

interface Address {
  street: string;
  city: string;
  zipCode: string;
}

interface User {
  name: string;
  age: number;
  address: Address; // Nested object
}

const user: User = {
  name: "Emily",
  age: 27,
  address: {
    street: "123 Main St",
    city: "New York",
    zipCode: "10001"
  }
};

console.log(user.address.city); // Output: New York

この例では、User インターフェイスにネストされた Address オブジェクトがあります。 user オブジェクトはこの構造に従い、ネストされたプロパティにアクセスできます。

結論

TypeScript のオブジェクトは、型定義、オプションのプロパティ、読み取り専用プロパティ、ネストされた構造により、プレーンな JavaScript オブジェクトよりも強力で柔軟性があります。インターフェイスを使用してオブジェクトを定義すると、より堅牢でエラーのないコードを作成できます。プロジェクトで TypeScript オブジェクトを使い始め、型の安全性と構造化データのパワーを最大限に活用しましょう。

typescript オブジェクトインターフェースプロパティオプション読み取り専用ネスト構造タイプセーフ例ガイド初心者コード柔軟性