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 };

使い分け

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

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

この例では、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 };

例 3: インターフェースとジェネリック型

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

interface Box<T> {
  value: T;
}

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

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

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");
}