LoginSignup
1
6

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-08-08

基本の違い

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

型エイリアス
type Enemy = {
  hp: number
  mp: number
}

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

インターフェース
interface Enemy = {
   hp: number
   mp: number
}

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

【違いその1】 型エイリアスは任意の型を指定できる!

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

型エイリアス
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
}

【違いその3】 拡張の割り当てチェックの違い

【違いその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が代入できる
}

【違いその4】 同名を複数宣言した場合にインターフェースはマージする

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

宣言のマージ
interface Dog {
  name: string
}

interface Dog {
  bark: string
}

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

参考

TypeScriptのInterfaceとTypeの比較

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

1
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
6