TypeScriptでインターフェースを使いこなして、コードをもっと読みやすく、理解しやすいものにしよう！

2024-04-02

TypeScriptでオブジェクトの配列のインターフェースを定義する方法

インターフェースを作成する

まず、オブジェクトの構造を定義するインターフェースを作成します。インターフェースは、プロパティの名前と型を定義します。

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

次に、Array<T>型を使用して、インターフェース型の配列を定義します。Tはインターフェースの名前です。

const people: Array<Person> = [
  {
    name: "John Doe",
    age: 30,
  },
  {
    name: "Jane Doe",
    age: 25,
  },
];

配列の要素にアクセス

配列の要素には、インターフェースのプロパティを使用してアクセスできます。

const firstPerson = people[0];
console.log(firstPerson.name); // "John Doe"

オプションのプロパティ

インターフェースのプロパティをオプションにするには、?記号を使用します。

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

インデックスシグネチャ

配列の要素にアクセスする別の方法は、インデックスシグネチャを使用することです。インデックスシグネチャは、配列の要素の型を定義します。

interface Person {
  [index: number]: string;
}

const people: Person[] = ["John Doe", "Jane Doe"];

console.log(people[0]); // "John Doe"

その他のヒント

インターフェースは、コードをより読みやすく、理解しやすいものにするのに役立ちます。
インターフェースは、コードの型安全性と信頼性を向上させるのに役立ちます。
インターフェースは、さまざまなライブラリやフレームワークと互換性のあるコードを書くのに役立ちます。

オブジェクトの配列のインターフェースを定義する他の方法

ジェネリック型を使用して、インターフェースをより汎用的にすることができます。

interface Person<T> {
  name: string;
  age: number;
  data: T;
}

const people: Person<string>[] = [
  {
    name: "John Doe",
    age: 30,
    data: "John Doe's data",
  },
  {
    name: "Jane Doe",
    age: 25,
    data: "Jane Doe's data",
  },
];

readonly修飾子を使用して、インターフェースのプロパティを書き込み不可にすることができます。

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

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

// person.name = "Jane Doe"; // エラーが発生します

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

const person: Partial<Person> = {
  name: "John Doe",
};

// person.age は省略されています

ReadonlyArray型を使用して、配列の要素を読み取り専用にすることができます。

const people: ReadonlyArray<Person> = [
  {
    name: "John Doe",
    age: 30,
  },
  {
    name: "Jane Doe",
    age: 25,
  },
];

// people.push({ name: "New Person", age: 35 }); // エラーが発生します

これらの方法は、それぞれ異なる利点と欠点があります。使用する方法は、具体的な要件によって異なります。

typescript