More than 3 years have passed since last update.

TypeScript 型エイリアス vs インターフェース

Last updated at 2020-08-08Posted at 2020-08-08

基本の違い

型エイリアス ・・・　クラスやオブジェクトの規格を定義
インターフェース　・・・　型や型の組み合わせに別名を付ける

型エイリアス

type Enemy = {
  hp: number
  mp: number
}

上記型エイリアスをインターフェースにすると、下記のようになります。
インターフェース

インターフェース

interface Enemy = {
   hp: number
   mp: number
}

クラスやオブジェクトの規格はどちらでも定義可能ですが、
両者の違いは一体なんなのでしょうか？

型エイリアスは型の式( | や &)を指定することができます。
インターフェースでは下記の記述はできません。

型エイリアス

type A = number
type B = A | string

##【違いその2】拡張の記述法が異なる

正確に言うと、extendsによる拡張はinterfaceのみで使用でき、型エイリアスは【違いその1】の型の式を使用することでextendsと同じ機能を表現可能です。

型エイリアス

type Animal = {
   name: string
}
type Dog = Animal & {
   bark: string
}

インターフェース

interface Animal = {
  name: string
}

interface Dog extends Animal {
   bark: string
}

【違いその2】に付随するものになりますが、インターフェースの拡張は拡張元のインターフェースが、拡張先のインターフェースに割り当て可能かを確認します。

インターフェース

interface Base {
  ok: number | string
  ng: number
}
interface Ex extends Base {
  ok: number
  ng: string  // 拡張元に割り当て不可能なのでここでエラーになる
}

型エイリアスでの交差&では、拡張元の型と拡張先の型を結合してくれます。

型エイリアス

type Base = {
  ok: number
}
type Ex = Base & {
  ok: string | number
}

let Test: Ex = {
  ok: 333 // 結合され、 okは numberなので333が代入できる
}

同じスコープ内で同名でinterfaceを宣言するとマージされます。
これは宣言のマージと言う機能で、型エイリアスにはない機能です。

宣言のマージ

interface Dog {
  name: string
}

interface Dog {
  bark: string
}

let dog: Dog = {
  name: 'ポチ',
  bark: 'ワンヌ'
}

・Boris Cherny著『プログラミングTypeScript』(オライリー・ジャパン発行」