Aller au contenu
Angular Tutorials

Créez l'interface des tâches

Objectifs de ce chapitre

  • ✔️
    Créez une interface TypeScript
    Découvrez comment créer une nouvelle interface TypeScript pour représenter une tâche.

  • ✔️
    Utilisez l'interface TypeScript
    Découvrez comment utiliser l'interface TypeScript pour définir le type d'une variable.

  • ✔️
    Générez un identifiant unique
    Apprenez à générer un identifiant unique avec le package uuid

Création d’interfaces

Vous allez créer une nouvelle interface TypeScript pour représenter une tâche. Chaque tâche possède 3 propriétés :

  • id : une chaîne de caractères représentant l’identifiant unique de la tâche;
  • title : une chaîne de caractères représentant le titre de la tâche.
  • description : une chaîne de caractères représentant la description de la tâche.
  • createdAt : une date représentant la date de création de la tâche.

🎓 Instructions

  1. Créez un nouveau dossier appelé models dans le dossier src/app pour stocker toutes les interfaces TypeScript de l’application.

  2. Créez un nouveau fichier appelé task.model.tsdans ce nouveau dossier.

  3. Ajoutez le code suivant au fichier :

    task.model.ts
    export interface Task {
      id: string;
      title: string;
      description: string;
      createdAt: Date;
    }

Génération d’identifiant

Vous générerez un identifiant unique pour chaque tâche. Cet identifiant vous aidera à trouver une tâche donnée de manière unique. Un tel identifiant est généralement généré par un serveur backend, mais pour ce tutoriel, vous le générerez côté client.

Pour ce faire, vous utiliserez la libairie uuid. Cette libairie génère des identifiants uniques basés sur l’horodatage actuel et un nombre aléatoire.

🎓 Instructions

  1. Installez la libairie uuid en exécutant la commande suivante dans le terminal :
Fenêtre de terminal
npm install uuid && npm i --save-dev @types/uuid

Utilisation de l’interface

Créez une variable locale dans la classe TaskListComponent pour stocker une liste de tâches. Vous utiliserez l’interface Task pour définir le type de la variable tâches.

En JavaScript, vous définiriez la variable tâches comme ceci :

let tasks = [
    {
        title: 'Tâche 1',
        description: 'Description de la tâche 1',
        createdAt: new Date()
    },
    {
        title: 'Tâche 2',
        description: 'Description de la tâche 2',
        createdAt: new Date()
    }
];

Pour attribuer un type à une variable dans TypeScript, vous pouvez utiliser l’opérateur : suivi du type de la variable :

let tasks: Task[] = [
    {
        title: 'Tâche 1',
        description: 'Description de la tâche 1',
        createdAt: new Date()
    },
    {
        title: 'Tâche 2',
        description: 'Description de la tâche 2',
        createdAt: new Date()
    }
];

🎓 Instructions

  1. Ouvrez le fichier src/app/task-list.component.ts.

  2. Ajoutez le code suivant au fichier :

task-list.component.ts
import { Component } from '@angular/core';


import { Task } from '../models/task.model';


import { v4 as uuid } from 'uuid';


@Component({
    selector: 'app-task-list',
    templateUrl: './task-list.component.html',
    styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {


    tasks: Task[] = [
        {
            id: uuid(),
            title: 'Tâche 1',
            description: 'Description de la tâche 1',
            createdAt: new Date()
        },
        {
            id: uuid(),
            title: 'Tâche 2',
            description: 'Description de la tâche 2',
            createdAt: new Date()
        }
    ];
}

✔️ Ce que vous avez appris

Vous avez appris à créer votre première interface TypeScript. Cela aidera pendant ce cours à suivre les erreurs et à améliorer la qualité du code. Vous avez également appris à utiliser l’interface TypeScript pour définir le type d’une variable.

🔗 Ressources