TypeScript InterfaceとType Aliasについて

f:id:yukiji_03:20210805141123j:plain

はじめに

皆様こんにちは、フロントエンドの松本です。

本日はTypeScriptのInterfaceとType Aliasについてお話していきたいと思います。

オブジェクトの宣言時などはどちらを使えばいいのか、頭を悩ませるトピックの一つでもあると思います。

それでは早速、両者の具体的な違いをみていきましょう。

型の宣言

// Interface
interface Book {
    title: string
    page: number
}

// Type Alias
type Book = {
    page: number
}

Interfaceは構造を定義するものなのでType Aliasと違って=が不要になっており、見た目としてはほとんど一緒です。

また、 Type Aliasは右辺に任意の型を指定できるという点で汎用的です。

Interfaceの場合、ブロックスコープでなければならないので、次のようなType AliasをInterfaceに書き直す方法はありません。

type A = number
type B = A | string

宣言のマージ

同名のInterfaceは型がマージされます（宣言のマージ）

interface Book {
    title: string
}

// Bookに page: number をマージ
interface Book {
    page: number
}

const book: Book = {
    title: 'TypeScript',
    page: 360
}

これをType Alias に書き直すとエラーが起こります。

type Book = {
    title: string
}

type Book = {
    page: number
}

// //Duplicate identifier 'Book'

拡張性

Interface は拡張性が高いです。

extendsを使うことで、継承したサブインターフェースを作成できます。

interface Movie {
    title: string
    time: number
}

//Movieを継承
interface Drama extends Movie {
    season: number
}

const kaigaiDrama: Drama = {
    title: 'The Walking Dead',
    time: 60,
    season: 10
}

また、Interface は Type Aliasをextendsすることも出来ます。

// Type Alias
type Movie {
    title: string
    time: number
}

//Movieを継承
interface Drama extends Movie {
    season: number
}

const kaigaiDrama: Drama = {
    title: 'The Walking Dead',
    time: 60,
    season: 10
}

Type Aliasは拡張こそできないものの、交差型を利用して既存のタイプを組み合わせることができます。

type Rice = {
    kind: '白米' | '玄米'
    gram: number
}

type Egg = {
    size: 'S' | 'M' | 'L'
}

type TamagokakeGohan = Rice & Egg

const tkg: TamagokakeGohan = {
    kind: '白米',
    gram: 250,
    size: 'L'
}