今更ながらのTypeとInterfaceの違い

TypeScriptを使用することが多くなってきている世の中ですが、ふと思ったことがあります。

「型定義、TypeとInterfaceってどっち使えばええんや...」

ということで検証してみました。

概略

Type(正確には Type Aliases)の定義は以下

複数の場所で再利用しようと思っている型に対して 名前をつける

Interfaceの定義は以下

オブジェクトや関数、クラスの 仕様を定める

検証

定義の幅

interfaceはオブジェクトと関数の型宣言のみしか使えない
typeはオブジェクト、関数以外の型宣言も可能

概略に示した特徴が出てますね。

マージについて

type BaseProps = {
    x: number,
    y: number
}

type BaseProps = {
    z: number
}
// Error!

interface IBaseProps {
    x: number
    y: number
}

interface IBaseProps {
    z: number
}
// Merged!!

const obj: IBaseProps = {
    x: 10,
    y: 100
}
// Error!

typeはマージされません。
interfaceはマージされます。同じプロパティであれば上書きされます。

MappedTypes

type Fruits = 'banana' | 'apple' | 'berry'

type FruitPrice = {
    [key in Fruits]: number
}
// OK

interface FruitPrice {
    [key in Fruits]: number
}
// Error!

interfaceはMappedTypesは使用できないようです。

交差型

type Point = {
    x: number
    y: number
}
type SolidPoint = Point & {
    y: string | number
    z: number
}

const obj: SolidPoint = {
    x: 10,
    y: 20,
    z: 30
}

&を使用すれば型の制約を増やせます。同じプロパティであれば両方を満たす必要があります。
ちなみにinterfaceをtypeに交差させても問題ありません。

逆に共通点

• classへのimplementsができる
• indexシグネチャが使用可能[key: string]

結論

ケースによるのかなと感じました。
アプリ制作であったり、webサイトの作成といった規模によっては、使い分けする必要がありますね。

型の規格を広く定義するときにはinterface、再利用等よく使用するものにはtypeっていう認識であってるのかなぁ。。