web-dev-qa-db-ja.com

Typescriptのインターフェイスとクラスの違い

typeScriptインターフェイスとクラスの違いは何ですか？いつクラスを使用しますか？インターフェイスはいつ使用しますか？それらの利点は何ですか？

バックエンドサーバーへのhttp-requestのために、ある種のタイプを作成する必要があります（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"
  }
}

これらのモデルを構築するには何を使用すればよいですか？ありがとうございました！

classangulartypescriptinterfacemodels
24
Emre Öztürk

単にクラスはオブジェクトを作成することであり、インターフェースはこれらのオブジェクトに含まれるべきものを支援します。

クラスは、オブジェクトを作成できるブループリント/テンプレートのようなものです。インターフェースは、クラスがそのインターフェースを実装するか、このブループリントに含めるべきものを定義することに同意しなければならない契約のようなものです。

単純なクラス：

class Car {
    engine: string; // 'var' is not used;

    constructor(engine: string) { // This is how we create constructor
        this.engine = engine;
    }

    display(): void { // 'function' keyword is not used here.
        console.log(`Engine is ${this.engine}`); // just a log.
    }
}

var objCar = new Car('V8'); // creates new onject
objCar.display(); // output: Engine is V8
console.log(objCar.engine); // output: V8 (accessing member here)

シンプルなインターフェース：

    interface IPerson { // This is how we create an interface.
        firstName: string, // use commas to separate.
        lastName: string, // In classes we use semi-colon to separate.
        displayDetails: (number) => string
    }

    // We are going to store 'interface object' in a variable.
    // i.e. we are implementing interface with variable(not class!!)
    var customer: IPerson = {

        firstName: 'jose jithin', // 'implements' variables
        lastName: 'stanly',

        // Now method implementation.
        // Note: the syntax of 'displayDetails' maybe a bit confusing (given below)
        // as two colons are used.
        // It specifies a return type(string) here for this method. 
        displayDetails: (rank): string => { return `This person has rank ${rank}. ` }  

        // It can be rewritten as following too.
        displayDetails: (rank) => { return `This person has rank ${rank}. ` };
        // i.e. return type need not be specified, just like a normal method definition syntax.
    }

    console.log(customer.firstName); // output: jose jithin

    console.log(customer.lastName);  // output: stanly

    console.log(customer.displayDetails(1)); // output: This person has rank

記事 を使用して、クラスとインターフェイスについて詳しく説明しました。これはあなたが理解するのに役立つかもしれません。

6
Jose

コンパイラは実行時にインターフェイスに対応するJavaScriptコードを生成しないため、クラスではなくデータモデルを作成するためにTypeScriptを使用します。一方、単にデータモデルを作成するためにクラスを使用する場合、コンパイラはそれに対応するJSコードを作成するため、メモリを消費します。

Angularのスタイルガイドのスニペット： https://angular.io/guide/styleguide#interfaces

「サービスおよび宣言可能オブジェクト（コンポーネント、ディレクティブ、およびパイプ）のインターフェースの代わりにクラスの使用を検討してください。」

「データモデルのインターフェイスの使用を検討してください。」

4
Abhishek

私はangular過去2年を使用しています。オブジェクトに動作を追加したいときは簡単な言葉で、たとえば処理したデータを返すgetメソッドを追加したいクラスでクラスを使用します。オブジェクトに動作が追加されず、オブジェクトに直接アクセスしたい場合、インターフェイスを使用します。コンストラクタを定義する場合、クラスを使用して、オブジェクトを構築する前に特定の変数を初期化するようにユーザーを制限します。

0
Kushagra Misra