web-dev-qa-db-fra.com

Quand utiliser Interface et Model dans TypeScript / Angular2

J'ai récemment regardé un didacticiel 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 souhaite charger des données JSON à partir d'une URL et me lier à l'interface/modèle. Parfois, je veux un seul objet de données, d'autres fois, je veux conserver et un tableau de l'objet.

Lequel devrais-je utiliser et pourquoi?

angulartypescript
165
I_LIKE_FOO

Les interfaces ne sont qu'à 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:

Vous pouvez faire quelque chose de similaire avec class mais les principales différences avec class sont qu’elles sont présentes au moment de 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 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);
      });
    });
117
Thierry Templier

Le Interface décrit soit un contrat pour une classe , soit un nouveau type . C'est un élément pur TypeScript, donc cela n'affecte pas le Javascript.

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

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

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

37
pietro909

Comme @ThierryTemplier l'a dit pour recevoir des données du serveur et pour transmettre un modèle entre composants (pour conserver la liste intellisense et commettre des erreurs de conception), il est correct d'utiliser une interface, mais je pense que pour envoyer des données au serveur (DTO), il est préférable d'utiliser la classe à prendre avantages du mappage automatique DTO du modèle.

3
M.Farahmand