TypeScript 型とインターフェースの違いを理解する

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

型

• 型は、変数や関数の値の制約を定義するために使用されます。
• プリミティブ型 (例: number、string、boolean)、ユニオン型、タプル型、ジェネリック型など、さまざまな型があります。
• 型エイリアスを使用して、既存の型の別名を作成することもできます。

例：

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

let p: Person = { name: "John", age: 30 };

インターフェース

• インターフェースは、オブジェクトのプロパティとその型を定義するために使用されます。
• 複数のオブジェクトが同じ構造を持つ必要がある場合に役立ちます。
• インターフェースは継承と拡張をサポートしています。

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

interface Employee extends Person {
  jobTitle: string;
  salary: number;
}

let p: Person = { name: "John", age: 30 };
let e: Employee = { name: "Jane", age: 25, jobTitle: "Software Engineer", salary: 80000 };

使い分け

一般的に、以下のガイドラインに従って型とインターフェースを使い分けることができます。

• プリミティブ型、ユニオン型、タプル型など、単純な型の制約を定義するには、型を使用します。
• オブジェクトのプロパティとその型を定義するには、インターフェースを使用します。
• インターフェースの継承と拡張が必要な場合は、インターフェースを使用します。

どちらを使用するべきか迷ったら、インターフェースを使用するのが安全です。インターフェースはより柔軟で強力であり、ほとんどのユースケースで適切です。

TypeScript における型とインターフェースの例

例 1: 単純な型の制約

この例では、Person 型を使用して、名前と年齢を持つオブジェクトを定義します。

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

let p: Person = { name: "John", age: 30 };

例 2: インターフェースと継承

この例では、Person インターフェースを使用して、名前と年齢を持つオブジェクトを定義します。次に、Employee インターフェースを Person インターフェースから継承させて、jobTitle と salary プロパティを追加します。

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

interface Employee extends Person {
  jobTitle: string;
  salary: number;
}

let p: Person = { name: "John", age: 30 };
let e: Employee = { name: "Jane", age: 25, jobTitle: "Software Engineer", salary: 80000 };

この例では、Box インターフェースを使用して、任意の型の値を持つボックスを定義します。

interface Box<T> {
  value: T;
}

let numberBox: Box<number> = { value: 10 };
let stringBox: Box<string> = { value: "Hello" };

これらの例は、TypeScript における型とインターフェースの使用方法のほんの一例です。型とインターフェースを組み合わせることで、複雑なオブジェクト構造を定義し、コードの型安全性と保守性を向上させることができます。

以下のリンクには、TypeScript における型とインターフェースの使用に関するその他の例が記載されています。

TypeScriptにおける型とインターフェースのその他の用途

関数の型

• 型とインターフェースを使用して、関数の引数と戻り値の型を定義できます。
• これにより、コードの型安全性と保守性を向上させることができます。

type User = {
  id: number;
  name: string;
  email: string;
};

function getUserById(id: number): User {
  // ...
}

let user: User = getUserById(123);

ジェネリック型

• ジェネリック型は、さまざまな型のデータと互換性のある型です。

interface Box<T> {
  value: T;
}

let numberBox: Box<number> = { value: 10 };
let stringBox: Box<string> = { value: "Hello" };

型エイリアス

• これにより、コードをより読みやすく、簡潔にすることができます。

type StringOrNumber = string | number;

let value: StringOrNumber = "Hello";
value = 10;

型推論

• TypeScript は型推論を使用して、変数の型を自動的に推測できます。
• 型推論により、コードをより簡潔に記述できます。

let name = "John";
let age = 30;

// TypeScript は 'name' の型を 'string' に自動的に推論します。
// TypeScript は 'age' の型を 'number' に自動的に推論します。

型ガード

• 型ガードを使用して、変数の型の可能性を絞り込むことができます。

function isString(value: any): value is string {
  return typeof value === "string";
}

let value: any = "Hello";

if (isString(value)) {
  console.log(value.toUpperCase());
} else {
  console.error("Value is not a string");
}