TypeScriptでオブジェクトの型を定義する：インターフェース、型エイリアス、クラス、型パラメーター、discriminated unions徹底解説

TypeScriptにおけるインターフェースと型：違いと使い分け

インターフェースは、オブジェクトの構造を定義するための型です。インターフェースには、オブジェクトが持つべきプロパティの名前と型を記述します。インターフェースは、オブジェクトの型チェックやコード補完などの機能を提供します。

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

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

上記の例では、Personというインターフェースを定義しています。Personインターフェースは、nameという文字列型プロパティと、ageという数値型プロパティを持つオブジェクトを表します。

型エイリアスは、既存の型に別名を与えるための機能です。型エイリアスは、インターフェースと同様に、オブジェクトの型チェックやコード補完などの機能を提供します。

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

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

インターフェースと型エイリアスは似ていますが、いくつかの重要な違いがあります。

• インターフェースは、オブジェクトの構造を定義するための型です。型エイリアスは、既存の型に別名を与えるための機能です。
• インターフェースは、プロパティの型だけでなく、メソッドの型も定義することができます。型エイリアスは、プロパティの型のみを定義することができます。
• インターフェースは、他のインターフェースを継承することができます。型エイリアスは、他の型エイリアスを継承することはできません。

インターフェースと型エイリアスの使い分けは、以下のガイドラインを参考にしてください。

• オブジェクトの構造を定義したい場合は、インターフェースを使用します。
• 既存の型に別名を与えたい場合は、型エイリアスを使用します。

インターフェースと型エイリアスは、どちらもオブジェクトの型を定義するために使用できます。それぞれの違いを理解して、適切な使い分けをすることが重要です。

// インターフェース

interface Person {
  name: string;
  age: number;
  greet(): string;
}

// インターフェースの実装
const person: Person = {
  name: "John Doe",
  age: 30,
  greet() {
    return `Hello, my name is ${this.name}.`;
  },
};

console.log(person.greet()); // "Hello, my name is John Doe."

// 型エイリアス

type Age = number;

// 型エイリアスの使用
const age: Age = 30;

console.log(age); // 30

// 型エイリアスとインターフェースの比較

// インターフェース
interface User {
  name: string;
  email: string;
}

// 型エイリアス
type Address = {
  street: string;
  city: string;
  state: string;
  postalCode: number;
};

// インターフェースと型エイリアスの組み合わせ
interface Profile {
  user: User;
  address: Address;
}

// インターフェースの実装
const profile: Profile = {
  user: {
    name: "John Doe",
    email: "[email protected]",
  },
  address: {
    street: "123 Main Street",
    city: "San Francisco",
    state: "CA",
    postalCode: 94105,
  },
};

console.log(profile.user.name); // "John Doe"
console.log(profile.address.city); // "San Francisco"

このサンプルコードでは、以下の内容を説明しています。

• インターフェースを使って、オブジェクトの構造とメソッドの型を定義する方法
• 型エイリアスを使って、既存の型に別名を与える方法
• インターフェースと型エイリアスを組み合わせて、複雑な型を定義する方法

インターフェースと型エイリアスの代替案

クラスは、オブジェクトの型を定義するための最も一般的な方法です。クラスは、オブジェクトの構造、メソッド、プロパティを定義することができます。

class Person {
  constructor(public name: string, public age: number) {}

  greet() {
    return `Hello, my name is ${this.name}.`;
  }
}

const person = new Person("John Doe", 30);

console.log(person.greet()); // "Hello, my name is John Doe."

型パラメーターを使って、ジェネリックな型を定義することができます。ジェネリックな型は、さまざまな型のオブジェクトを扱うことができます。

function identity<T>(value: T): T {
  return value;
}

const name = identity("John Doe");
const age = identity(30);

console.log(name); // "John Doe"
console.log(age); // 30

discriminated unions は、複数の型を区別するために使用する型です。discriminated unions は、オブジェクトの構造と、オブジェクトの種類を識別するためのプロパティを定義することができます。

type Person = {
  type: "person";
  name: string;
  age: number;
};

type Address = {
  type: "address";
  street: string;
  city: string;
  state: string;
  postalCode: number;
};

function printInfo(value: Person | Address): void {
  if (value.type === "person") {
    console.log(`Name: ${value.name}`);
    console.log(`Age: ${value.age}`);
  } else if (value.type === "address") {
    console.log(`Street: ${value.street}`);
    console.log(`City: ${value.city}`);
    console.log(`State: ${value.state}`);
    console.log(`Postal Code: ${value.postalCode}`);
  }
}

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

const address: Address = {
  type: "address",
  street: "123 Main Street",
  city: "San Francisco",
  state: "CA",
  postalCode: 94105,
};

printInfo(person);
printInfo(address);