More than 1 year has passed since last update.

Typescriptで型を定義するときはinterfaceが基本的には推奨されているらしい

Posted at 2024-02-07

概要

interface User {
    name: string;
}

interface User {
    age: number;
}

// User型は自動的に { name: string; age: number; } にマージされる

拡張可能（拡張性）: interfaceは拡張可能です。これは、同じ名前のinterfaceを複数回宣言すると、それらが自動的にマージされることを意味します
新しい型の作成: オブジェクトや関数の型を定義するために使用されます
宣言のマージ: 同じ名前のインターフェースが存在する場合、それらの宣言は一つのインターフェースにマージされます

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

type Employee = User & {
    company: string;
};

拡張性: interfaceは拡張可能であり、同じ名前のインターフェースが自動的にマージされますが、typeは拡張できません
複雑な型の作成: typeはより複雑な型の表現（ユニオン型、交差型、タプルなど）に適しています
使用の推奨: 一般的に、オブジェクトの型を定義する場合はinterfaceが推奨されますが、より複雑な型の操作が必要な場合はtypeが適しています

TypeScript は、型式に名前を付けるための型エイリアスをサポートしています。これは、プリミティブ、ユニオン、タプル、およびその他のタイプに名前を付けるために使用できます。
ただし、オブジェクトの型を宣言する場合は、オブジェクトリテラル式の型エイリアスの代わりにインターフェイスを使用します。

昨日、コードを 1 行変更することで TypeScript 宣言を 700KB から 7KB に縮小しました 🔥

typeエイリアスを使用して複雑な型を定義すると、TypeScriptのコンパイラはこれをインラインで展開してしまう可能性があります。
これは、出力される.d.tsファイルのサイズを大きくすることがあります。

type Point = {
  x: number;
  y: number;
};

type Circle = {
  center: Point;
  radius: number;
};

上記の例で、Circle型はPoint型を使用しています。
コンパイラがこれをインラインで展開すると、Point型の定義がCircle型に直接含まれる形になります。

interfaceを使用すると、TypeScriptのコンパイラは名前での参照を維持し、.d.tsファイルがコンパクトに保たれる傾向があります。

interface Point {
  x: number;
  y: number;
}

interface Circle {
  center: Point;
  radius: number;
}

この場合、CircleインターフェースはPointインターフェースを名前で参照します。
このため、.d.tsファイルにおいてはPointの定義が直接Circleに組み込まれることはありません。