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

J'ai récemment regardé un tutoriel sur Angular 2 avec TypeScript, mais je ne sais 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: string;
    ProductDescription: string;
}

Exemple de modèle:

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

Je veux charger des données JSON à partir d'une URL et me lier à l'interface / au modèle. Parfois, je veux un seul objet de données, d'autres fois je veux tenir et tableau de l'objet.

Lequel dois-je utiliser et pourquoi?

Les interfaces sont uniquement au moment de la compilation. Cela vous permet uniquement 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 => <Product[]>res.json());

Voir ces questions:

• Comment convertir un objet JSON en une classe dactylographiée
• Comment obtenir un objet Date à partir de json Response en tapuscrit

Vous pouvez faire quelque chose de similaire avec la classe, mais les principales différences avec la classe sont qu'elles sont présentes au moment de l'exécution (fonction constructeur) et vous pouvez y définir des méthodes avec traitement. Mais, dans ce cas, vous devez instancier des objets 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 soit un contrat pour une classe, soit un nouveau type . Il s'agit d'un élément typographique pur, il n'affecte donc pas Javascript.

Un modèle, et notamment une classe , est une fonction JS réelle qui est utilisée pour générer de nouveaux objets.

Je veux charger des données JSON à partir d'une URL et me lier à l'interface / au modèle.

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

Comme @ThierryTemplier l'a dit pour recevoir des données du serveur et également transmettre le modèle entre les composants (pour garder la liste intellisense et faire une erreur de conception), il est bon d'utiliser l'interface mais je pense que pour envoyer des données au serveur (DTO), il est préférable d'utiliser la classe pour prendre avantages de la cartographie automatique DTO du modèle.

Utiliser la classe au lieu de l'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 classe plus. (de toute façon, vous pouvez avoir besoin d'une classe pour le modèle de données)

Pourquoi? Une classe peut agir comme une interface (utilisez des implémentations plutôt que des extensions).

Pourquoi? Une classe d'interface peut être un jeton de recherche de fournisseur dans l'injection de dépendance angulaire.

de Angular Style Guide

Fondamentalement, une classe peut tout faire, ce que fera une interface. Il se peut donc que vous n'ayez jamais besoin d'utiliser une interface .