Aller au contenu principal

12-3 Modèle Projet

Vous avez peut-être remarqué que vous n'avez pas d'autocomplétion pour les propriétés de l'objet projet. Par exemple, lorsque vous faires projet., l'autocomplétion n'est pas d'une grande aide:

img

Au fond, notre tableau projets est de type any (projets: any[] = []), donc le compilateur n'a pas vraiment de façon de savoir quelles sont les propriétés valides.

Il nous faudra créer un modèle, soit une classe ou une interface représentant ce qu'est un Projet. On pourra assigner le retour de Supabase à ce modèle et avoir un tableau d'objets. Projet

Créer un dossier core/models​

Pour mettre les modèles de l'application, nous allons créer un dossier models sous le dossier core.

  1. Créez un dossier core/models img

Créer un modèle Projet​

En ligne de commande, exécutez la commande suivante pour créer une interface Projet dans le dossier core/models.

ng generate interface core/models/projet

Cela devrait vous donner la hiérarchie suivante:

img

Et un fichier d'interface projet.ts vide ressemblant à ceci:

src/app/core/models/projet.ts
export interface Projet {
}

Définir les propriétés​

On peut ensuite définir les propriétés:

src/app/core/models/projet.ts
export interface Projet {
  id: number;
  nom: string;
  description?: string;
  image_url?: string;
  created_at: string;
  updated_at: string;
}
info

Dates: Les dates sont au format string puisque c'est le format dans lequel Supabase nous les renvoies. Il sera possible de les convertir et formatter dans un format de date en bonne et due forme.

Modifier le type du tableau projets dans les composants projets-index et projets-liste​

Dans les composants projets-index et projet-liste, il nous est maintenant possible de spécifier le type d'objets que doit contenir le tableau projets:

  1. Modifiez la propriété projets dans ProjetsIndex

    src/app/features/projets/pages/projets-index.ts
    export class ProjetsIndex implements OnInit {
      protected projets: Projet[] | null = null

      //...
    info

    Ici, on vient typer la propriété projets comme un tableau de Projet.

    Il vous faudra importer la référence à l'aide de WebStorm.

    De plus, on en profite pour préciser que la propriété peut être null ou un tableau de Projet[]. En effet, au tout début, il n'y aura pas du tout de projets, on doit attendre le retour de la requête d'API. Ainsi, projets doit être null.

    Le fait d'attribuer null plutôt que d'initialiser à un tableau vide nous permettra plus tard de faire la distinction entre "nous sommes en train de charger la liste de projets" et "il n'y a pas de projets".

  2. Modifiez la propriété projets dans ProjetsListe

src/app/pages/projets/components/projets-liste.component.ts
export class ProjetsListe {
  @Input() projets: Projet[] | null = null
}

La propriété nom est maintenant reconnue correctement!

img