【ISSUE】[TypeScript]TypeとInterfaceはどっちを使うのがいいのか

0

2024年12月23日 8:40

はじめに

型定義では主にTypeとInterfaceが使われますが、どっちを使うのがいいのか、2つの違いについて調べたので書いていきます。

参考

サバイバルTypeScriptを参考にしたので、よければこちらもご覧ください。
サバイバルTypeScript

2つの違いについて

まずは2つの違いについて書いていきます。

Type(型エイリアス)

・継承不可(ただし、&を使えば似たようなことができる)
・継承による上書きができる。
・同名の型定義はできない。
・MappedTypesが使えない。

Interface

・継承可能
・継承による上書きができない。
・同名の型が定義できる。
・MappedTypesが使えない。

継承について

Interfaceは以下のように、型エイリアスを継承できる。
img
しかし、Typeは継承ができないが、その代わりに&を使えば、似たようなものはできる。
img

継承による上書きについて

継承時のパラメータの上書きは、Interfaceはできますが、Typeはできないです。

Interfaceの継承
img
Typeの継承
img

同名の型定義について

Interfaceは定義できますが、Typeはできません。

Interfaceは定義できますが、指定した型が違うとエラーになってしまいます.
エラーの理由は、最初はsameNameSameTypeIsAllowedの型をnumberに指定したのに、次に再定義したときはstring型で定義しているためです。
img
Typeは同名のものを定義した時点でエラーになります。
img

MappedTypesについて

これについての説明は省きます。以下のページで詳しく説明されています。
https://typescriptbook.jp/reference/type-reuse/mapped-types

使い分けについて

これについては明確な正解はないそうです、、、
それぞれのメリット、デメリットを理解した上で
プロジェクトや所属するチームのルールに則るしかないようです。
個人的には、Typeのほうが安全かなと思っています。
理由としては、同名の定義ができないので、誤って同じ名前で宣言をしてしまってもエラーが出るので、バグに繋がることを防げるからです。

最後に

他にも記事を書いているので、良ければ見ていってください。

基本設計について
Vue.jsとNode.jsでチャットアプリを作った
Next.js×TypeScriptでTODOアプリを作成する

[cv:issue_marketplace_engineer]

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。