web-dev-qa-db-ja.com

Typescriptでインターフェイスまたはクラスを使用する場合

TypeScriptでユーザーが電子メールとパスワードを入力する必要があるログインの簡単なシナリオがあります。この強い型付けを取得してバックエンドに送信するには、型を作成する必要があります。

これは次のように書かれるべきですか:

export interface UserLogin {
  email: string;
  password: string;
}
//OR
export class UserLogin {
  email: string;
  password: string;
}

そして、これらのいずれかを使用するシナリオがいつあるかを知る方法は?

22
Josbel Luna

最も基本的なのは、classは本質的にobject factory(つまり、オブジェクトが見えるはずの青写真です) interfacetype-checkingのみに使用される構造です。

classにはオブジェクトの作成に役立つ初期化されたプロパティとメソッドがありますが、interfaceは基本的にオブジェクトが持つことができるプロパティとタイプを定義します。

説明したシナリオでは、interfaceを使用してUserLoginのタイプを設定します。

23
alephnerd

カスタムタイプを宣言する必要がある場合は、インターフェイスを使用します。 IMO、非常に実用的な理由があります-それらはJavaScriptに変換されないため、生成されるコードは短くなります。

コンストラクターでオブジェクトをインスタンス化する必要がある場合、またはオブジェクトをインスタンス化して注入するフレームワークを使用する必要がある場合、インターフェイスは機能しません。次に、クラスまたは抽象クラスを使用します。

11
Yakov Fain

実際には両方が仕事をします。インターフェイスを使用することをお勧めしますが、その目的のために特別に設計されているため、型チェックを行うだけです。

クラスとインターフェイスは、オブジェクト指向プログラミングだけでなく、TypeScriptでの型チェックも容易にする強力な構造です。クラスは、同じ構成(プロパティとメソッド)を共有するオブジェクトを作成できる設計図です。インターフェースは、オブジェクトを記述する関連プロパティとメソッドのグループですが、実装も初期化も提供しません。

From: https://toddmotto.com/classes-vs-interfaces-in-TypeScript

5
D. Phi

バックエンドに送信します

ネットワーク経由でクラスを送信するには追加の労力が必要です-JSONコンテンツタイプを使用する場合、クラスはバックエンドコードのプレーンオブジェクトとして提供されます。メソッドを呼び出すことができるようにJSONをクラスオブジェクトに変換する方法を示すこの質問については、 多数の回答 を参照してください。

ただし、質問のクラスにはメソッドがないため、バックエンドコードがinstanceofを使用してランタイムチェックを実行しない限り、問題はありません。

これらの問題を回避するには、バックエンドと通信するオブジェクトを表すためのデータメンバーのみを持つインターフェイスを使用します。

3
artem