🌝

Typescriptの type と interface の違いを整理する

2024/06/16に公開

タイトルの通り、違いがよくわからなかったので調べました。
結論、どちらもできることはほとんど同じで、使うシーンや拡張の方法や少し異なるだけでした。

基本的な使い方

// 基本的な型エイリアス
type ID = number | string;

// オブジェクト型のエイリアス
type User = {
name: string;
age: number;
};

// 関数型のエイリアス
type Greet = (name: string) => string;

// オブジェクトのインターフェース
interface User {
name: string;
age: number;
}

// インターフェースの拡張
interface Employee extends User {
employeeId: number;
}

用途の違い

interface では ユニオン型 や タプル型で定義はできません。

type ID = number | string;
type Tuple = [number, string];

interface ID = number | string; // Syntax error

型の拡張方法の違い

interface では extends を使うか、重複宣言をすることで型を拡張するのに対し、 type は &演算子を使って型を拡張できます。

interface Person {
name: string;
}

interface Employee extends Person {
employeeId: number;
}

interface User {
name: string;
}

interface User {
age: number;
}

const user: User = { name: "Alice", age: 25 }; // 有効

type Person = {
name: string;
};

type Employee = Person & {
employeeId: number;
};

まとめ

細かい差はありますが基本的には型を定義するという点で大きく変わらなさそうです。実務ではほとんど type として書かれているので、基本的にはtype を使うで問題なさそうということがわかりました。

Discussion