Quand utiliser l’interface et le modèle dans TypeScript / Angular2

J’ai récemment regardé un didacticiel sur Angular 2 avec TypeScript, mais je ne savais pas quand utiliser une interface et quand utiliser un modèle pour contenir des structures de données.

Exemple d’interface:

export interface IProduct { ProductNumber: number; ProductName: ssortingng; ProductDescription: ssortingng; } 

Exemple de modèle:

 export class Product { constructor( public ProductNumber: number, public ProductName: ssortingng, public ProductDescription: ssortingng ){} } 

Je souhaite charger des données JSON à partir d’une URL et créer une liaison avec l’interface / le modèle. Parfois, je veux un object de données unique, un autre moment que je veux conserver et un tableau de l’object.

Lequel dois-je utiliser et pourquoi?

Les interfaces ne sont qu’à la compilation. Cela vous permet seulement de vérifier que les données attendues reçues suivent une structure particulière. Pour cela, vous pouvez diffuser votre contenu sur cette interface:

 this.http.get('...') .map(res => res.json()); 

Voir ces questions:

  • Comment convertir un object JSON en une classe de type
  • Comment obtenir l’object Date à partir de la réponse json dans type

Vous pouvez faire quelque chose de similaire avec class mais les principales différences avec class sont qu’elles sont présentes à l’exécution (fonction constructeur) et que vous pouvez définir des méthodes avec le traitement. Mais, dans ce cas, vous devez instancier des objects pour pouvoir les utiliser:

 this.http.get('...') .map(res => { var data = res.json(); return data.map(d => { return new Product(d.productNumber, d.productName, d.productDescription); }); }); 

L’ interface décrit un contrat pour une classe ou un nouveau type . C’est un élément pur de TypeScript, donc il n’affecte pas Javascript.

Un modèle, à savoir une classe , est une fonction JS réelle utilisée pour générer de nouveaux objects.

Je souhaite charger des données JSON à partir d’une URL et créer une liaison avec l’interface / le modèle.

Optez pour un modèle, sinon ce sera toujours JSON dans votre Javascript.

Comme l’a dit @ThierryTemplier pour recevoir les données du serveur et transmettre le modèle entre les composants (pour conserver la liste intellisense et l’erreur de conception), il est bon d’utiliser l’interface mais je pense que pour envoyer des données au serveur avantages du mappage automatique DTO à partir du modèle.

Utilisez Class plutôt que Interface, c’est ce que j’ai découvert après toutes mes recherches.

Pourquoi? Une classe seule est moins de code qu’une interface de classe plus. (de toute façon, vous pourriez avoir besoin d’une classe pour le modèle de données)

Pourquoi? Une classe peut agir comme une interface (utiliser des outils au lieu d’extensions).

Pourquoi? Une classe d’interface peut être un jeton de recherche de fournisseur dans l’dependency injection angular.

du guide de style angular

Fondamentalement, une classe peut faire tout ce que fera une interface. Donc, jamais besoin d’utiliser une interface .