web-dev-qa-db-fra.com

Différence entre les interfaces et les classes dans Typescript

quelles sont les différences entre les interfaces et les classes TypeScript? Quand est-ce que j'utilise Class? Quand dois-je utiliser les interfaces? Quels sont leurs avantages?

Je dois créer un type de type pour une requête http adressée à mon serveur principal (le faire avec Angular 2), par exemple: },

"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"
  }
}

Que dois-je utiliser pour construire ces modèles? Je vous remercie!

classangulartypescriptinterfacemodels
11
Emre Öztürk

Selon Angular 2 styleguide il est recommandé d’utiliser Class sur Interface pour la frappe. La principale différence est que class persistera une fois compilé, alors que Interface sera purement supprimé, car ils ne servent à rien.

Il suffit de rester cohérent sur l'ensemble du projet et de préférer l'approche de style guide avec class, qui sait, peut-être qu'un jour vous devrez ajouter method à votre models.

17
Sakuto

Simply Class consiste à créer des objets et Interface vous aide à définir le contenu de ces objets. 

Class est comme un plan/modèle à l’aide duquel nous pouvons créer des objets . Interface est comme un contrat sur lequel une classe doit s’accorder pour implémenter cette interface ou définir le contenu de ce plan.

Un cours simple:

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)

Une interface simple:

    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

J'ai détaillé sur Class et Interface avec mon article . Cela pourrait vous aider à comprendre.

4
Jose

Utiliser TypeScript pour créer un modèle de données au lieu d'une classe en tant que compilateur ne générera aucun code JavaScript correspondant pour une interface au moment de l'exécution. Tandis que si vous utilisez une classe pour créer simplement un modèle de données, le compilateur créera le code JS correspondant et consommera donc de la mémoire.

Un extrait du guide de style de Angular: https://angular.io/guide/styleguide#interfaces

"Envisagez d’utiliser une classe au lieu d’une interface pour les services et Déclarables (composants, directives et tuyaux)."

"Envisagez d'utiliser une interface pour les modèles de données."

2
Abhishek

J'utilise angular ces 2 dernières années et en termes simples lorsque je veux ajouter un comportement à mon objet, j'utilise par exemple une classe. Dans n'importe quelle classe, je veux ajouter une méthode get qui renvoie des données traitées, et quand aucun comportement n'est ajouté à l'objet et Je veux accéder directement à l'objet que je vais utiliser interface .. En utilisant class si vous définissez le constructeur, vous empêchez l'utilisateur de définir certaines variables à initialiser avant de construire un objet. 

0
Kushagra Misra