[解決済み] Typescript におけるインターフェースとクラスの違い
質問
Typescript のインターフェースとクラスはどう違うのですか?どのような場合に クラスを使うのですか?インターフェースはいつ使うのですか?それらの利点は何ですか?
私はバックエンドサーバーへのhttpリクエストのためにいくつかの種類の型を作成する必要があります(Angular 2でそれを行う)、例えば。 },
"fields": {
"project": {
"id": "10000"
},
"summary": "something's wrong",
"issuetype": {
"id": "10000"
},
"assignee": { // not neccesary required
"name": "homer"
},
"reporter": {
"name": "smithers"
},
"priority": { // not neccesary required
"id": "20000"
}
}
これらのモデルの構築には何を使用すればよいのでしょうか?ありがとうございます。
どのように解決するのですか?
2019年版】違いと使い方の最新情報
まず、明らかな違いがあります。 構文 . これは単純なことですが、理解するのに必要な違いです。インターフェイスのプロパティはカンマやセミコロンで終わることができますが、クラスのプロパティはセミコロンで終わることしかできません。さて、ここからが面白いところです。これらは、私が自分のチームのメンバーに与えているガイドラインですが、他のチームが正当な理由で他のガイドラインを持っている可能性もあります。あなたのチームが異なる方法をとっている場合は、遠慮なくコメントしてください。
インターフェイス
: 設計時やコンパイル時に強力な型付けを行うために使用される型を定義することができます。インターフェイスは実装や拡張が可能ですが、インスタンス化することはできません。
new
はできません)。JSにトランスパイルダウンする際に削除されるため、スペースを取りませんが、実行時に型チェックを行うこともできませんので、実行時に変数が特定の型を実装しているかどうかをチェックすることはできません(例えば
foo instanceof bar
のように)、その変数が持つプロパティをチェックする以外にはありません。
Typescript によるインターフェース型チェック
.
インターフェースを使用する場合
: コードの中の複数の場所、特に複数のファイルや関数で使用されるオブジェクトのプロパティや関数のコントラクトを作成する必要があるときに使用します。また、他のオブジェクトがこのプロパティの基本セットで始まるようにしたいときにも使います。
Vehicle
のように、複数のクラスが特定の種類の乗り物として実装しているインターフェイスを使用します。
Car
,
Truck
,
Boat
(例
class Car implements Vehicle
).
インターフェースを使用しない場合 : デフォルト値、実装、コンストラクタ、関数(シグネチャだけでなく)を持ちたい場合。
クラス
また、強い型付けのために設計時やコンパイル時に使用され、さらに、実行時に使用できる型を定義することができます。これは、コードがコンパイルアウトされないので、スペースを取るということでもあります。これは@Sakutoさんがおっしゃった重要な違いの一つですが、スペース以外の意味合いもあります。それは、クラスが型チェックされ、トランスパイルされたJSコードであっても、クラスが何者であるかという理解を保持できるということです。さらなる違いとして、クラスは
new
を使用してインスタンス化でき、拡張は可能ですが、実装はできません。クラスはコンストラクタと実際の関数コード、およびデフォルト値を持つことができます。
いつクラスを使うか
: 実際の関数コードを持つオブジェクトを作りたいとき、初期化のためのコンストラクタを持ちたいとき、そして/または、そのオブジェクトのインスタンスを
new
. また、単純なデータオブジェクトの場合、デフォルト値を設定するためにクラスを使用することができます。もし必要であれば、インターフェイスのための回避策がありますが(インターフェイスのセクションのOSリンクを参照)、それらを使用したいもう一つの時は、型チェックを行うときです。
クラスを使用しない場合 : 単純なデータインターフェースがあり、それをインスタンス化する必要がない場合、他のオブジェクトに実装させたい場合、既存のオブジェクトに単にインターフェースを置きたい場合(型定義ファイルを考えてください)、あるいは占有するスペースが法外か不相応な場合などです。余談ですが、.d.ts ファイルを見ると、インターフェイスと型しか使用していないことに気づくでしょう。したがって、TS にトランスパイルすると、これは完全に除去されます。
最後の注意 は、クラスとインターフェース以外にも2つの選択肢があり、1つは"type"というもので、インターフェースとかなり似ていますが、このSOの記事、特に2019 Updateの答えを確認してください。 タイプスクリプト インタフェースと型 . 最後のオプションは、TS で関数型プログラミングスタイル(OOP ではない)にすることです。
例題を含む全ストーリーについては、以下をご覧ください。 PassionForDev.com をご覧ください。 また、クラスと継承の比較とその例については、以下を参照してください。 https://jameshenry.blog/typescript-classes-vs-interfaces/ .
関連
-
[解決済み] インターフェースと抽象クラスの違いは何ですか?
-
[解決済み] Pythonのクラスはなぜオブジェクトを継承するのですか?
-
[解決済み] コンストラクタとngOnInitの違いについて
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] Pythonの旧スタイルのクラスと新スタイルのクラスの違いは何ですか?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] JavaにおけるRunnableインターフェースとCallableインターフェースの違いについて
-
[解決済み】PromiseとObservablesの違いは何ですか?
-
[解決済み】TypeScriptのインターフェースと型について
-
[解決済み] formControlNameとFormControlの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Typescript によるインターフェース型チェック
-
[解決済み】TypeScriptのインターフェースと型について
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] Typescriptでインターフェースやクラスを使用する場合 [重複].
-
[解決済み] 継承と依存性注入
-
[解決済み] .tsファイルはTypeScriptのコンパイルの一部ですが、使用されていませんという警告を消すには?
-
[解決済み] プロパティ 'X' はプライベートであり、クラス 'xyzComponent' 内でのみアクセス可能です。
-
[解決済み] angular4 / typescriptでdocument.getElementByIdの置き換え?
-
[解決済み] Karma/Jasmineのテストで「[object ErrorEvent] thrown」エラーが発生した場合、どのようにデバッグすればよいですか?
-
[解決済み] 角度の2つのスイッチケース値