Angular - 3.8 Créer le modèle Recette en TypeScript

Dans l'application, chaque recette doit avoir la même structure. Pour cela, on crée un modèle, c'est-à-dire une classe qui décrit ce qu'est une recette. Cette leçon définit ses attributs, puis le constructeur qui permet de créer des objets Recette.

Déclarer la classe Recette

Placez le modèle dans le dossier des recettes, dans un nouveau fichier TypeScript dont le nom indique clairement qu'il s'agit du modèle. La classe est exportée sous le nom Recette, avec un R majuscule. Une classe sert ainsi de configuration pour créer de nouveaux objets.

Définir les attributs

Une recette possède un nom, une description et une URL d'image. Chaque attribut reçoit un type après deux points : string pour une chaîne de caractères. Une image ne peut pas être stockée dans le code, on garde donc le chemin qui pointe vers elle. Chaque attribut est initialisé avec une valeur vide.

export class Recette {
  name: string = '';
  description: string = '';
  imageUrl: string = '';
}

Écrire le constructeur

Le constructeur est exécuté lors de l'instanciation de la classe. Il reçoit le nom, la description et l'URL de l'image en arguments. Dans son corps, chaque argument est affecté à l'attribut correspondant, grâce à this.

constructor(name: string, description: string, imageUrl: string) {
  this.name = name;
  this.description = description;
  this.imageUrl = imageUrl;
}

En résumé

Le modèle Recette décrit une recette avec trois attributs de type string : le nom, la description et l'URL de l'image. Le constructeur reçoit ces valeurs et les affecte aux attributs. Ce modèle servira ensuite à créer les recettes de l'application.

Points clés

• Un modèle est une classe qui décrit la structure d'un objet.
• Le type string se déclare après deux points, par exemple name: string.
• Une image est référencée par son chemin, sous forme de chaîne.
• Le constructeur initialise les attributs à la création de l'objet.
• this.name désigne l'attribut de la classe, tandis que name seul désigne l'argument.

Questions fréquentes

Pourquoi une classe plutôt que des objets écrits à la main ?

La classe garantit que chaque recette a la même structure. Chaque objet créé suit le même modèle.

Pourquoi l'image n'est-elle pas stockée dans le code ?

Le code ne peut pas contenir l'image elle-même. On stocke donc un lien, sous forme de chaîne, qui pointe vers l'image.

À quoi sert le constructeur ?

Il permet de créer un objet Recette en passant le nom, la description et l'URL, puis d'initialiser les attributs.