TypeScriptLeçon 16 sur 16

Mini-projet : un gestionnaire de tâches typé

La dernière leçon réunit tout : une interface, une union de littéraux, des types utilitaires et une classe à état privé. Le squelette est prêt, il reste trois méthodes à écrire.

L’essentiel

Priority est une union de littéraux, pas un enum.
readonly id ne peut plus changer une fois la tâche créée.
NewTask = Omit<Task, "id" | "done"> : ces champs sont remplis par le gestionnaire.
Record<Priority, number> fixe l'ordre de tri et n'oublie aucune priorité.
private tasks : de l'extérieur, la liste ne change qu'à travers les méthodes.

Exemple

type NoteStatus = "todo" | "done"; interface Note {  readonly id: number;  text: string;  status: NoteStatus;} class NoteBook {  private notes: Note[] = [];   add(text: string): Note {    const note: Note = { id: this.notes.length + 1, text, status: "todo" };    this.notes.push(note);    return note;  }   finish(id: number): void {    const note = this.notes.find((item) => item.id === id);    if (note) note.status = "done";  }   count(status: NoteStatus): number {    return this.notes.filter((note) => note.status === status).length;  }} const book = new NoteBook();book.add("Buy milk");book.add("Call Sam");book.finish(1);console.log(`todo: ${book.count("todo")}, done: ${book.count("done")}`);

L'exemple est une version réduite du projet : des notes avec un statut, un tableau privé et une méthode de comptage. L'exercice ajoute le tri par priorité et les statistiques.

Exercice

Utiliser l’éditeur⌘ Entrée ou Ctrl Entrée lance le code, ⇧ ⌘ Entrée vérifie l’exercice.Tab et Maj Tab indentent la ligne ou la sélection ; Échap puis Tab quitte l’éditeur.La vérification compare ce que le programme a affiché à l’exercice ; les espaces en fin de ligne ne comptent pas.Après deux vérifications ratées, la solution s’ouvre. Votre code reste dans ce navigateur.

Complétez complete, pending et stats. Sortie : « Complete #2: true », « Complete #9: false », puis les tâches ouvertes par priorité — « [high] Review PR », « [medium] Write README », « [low] Update icons » — et « Done: 1, open: 3 ».

type Priority = "low" | "medium" | "high"; interface Task {  readonly id: number;  title: string;  priority: Priority;  done: boolean;} // What a caller provides: the tracker sets id and done itselftype NewTask = Omit<Task, "id" | "done">; const RANK: Record<Priority, number> = { high: 0, medium: 1, low: 2 }; class TaskTracker {  private tasks: Task[] = [];  private nextId = 1;   add(input: NewTask): Task {    const task: Task = { id: this.nextId++, done: false, ...input };    this.tasks.push(task);    return task;  }   complete(id: number): boolean {    // TODO: find the task by id; return false if it is missing or already done,    // otherwise set done = true and return true    return false;  }   pending(): Task[] {    // TODO: keep only unfinished tasks, sorted by RANK (high first)    return this.tasks;  }   stats(): Record<"done" | "open", number> {    // TODO: count finished and unfinished tasks    return { done: 0, open: 0 };  }} const tracker = new TaskTracker();tracker.add({ title: "Write README", priority: "medium" });tracker.add({ title: "Fix login bug", priority: "high" });tracker.add({ title: "Update icons", priority: "low" });tracker.add({ title: "Review PR", priority: "high" }); console.log(`Complete #2: ${tracker.complete(2)}`);console.log(`Complete #9: ${tracker.complete(9)}`); for (const task of tracker.pending()) {  console.log(`[${task.priority}] ${task.title}`);} const stats = tracker.stats();console.log(`Done: ${stats.done}, open: ${stats.open}`);

type Priority = "low" | "medium" | "high";

interface Task {
  readonly id: number;
  title: string;
  priority: Priority;
  done: boolean;
}

// What a caller provides: the tracker sets id and done itself
type NewTask = Omit<Task, "id" | "done">;

const RANK: Record<Priority, number> = { high: 0, medium: 1, low: 2 };

class TaskTracker {
  private tasks: Task[] = [];
  private nextId = 1;

  add(input: NewTask): Task {
    const task: Task = { id: this.nextId++, done: false, ...input };
    this.tasks.push(task);
    return task;
  }

  complete(id: number): boolean {
    // TODO: find the task by id; return false if it is missing or already done,
    // otherwise set done = true and return true
    return false;
  }

  pending(): Task[] {
    // TODO: keep only unfinished tasks, sorted by RANK (high first)
    return this.tasks;
  }

  stats(): Record<"done" | "open", number> {
    // TODO: count finished and unfinished tasks
    return { done: 0, open: 0 };
  }
}

const tracker = new TaskTracker();
tracker.add({ title: "Write README", priority: "medium" });
tracker.add({ title: "Fix login bug", priority: "high" });
tracker.add({ title: "Update icons", priority: "low" });
tracker.add({ title: "Review PR", priority: "high" });

console.log(`Complete #2: ${tracker.complete(2)}`);
console.log(`Complete #9: ${tracker.complete(9)}`);

for (const task of tracker.pending()) {
  console.log(`[${task.priority}] ${task.title}`);
}

const stats = tracker.stats();
console.log(`Done: ${stats.done}, open: ${stats.open}`);

Sortie

Ce que le programme affiche apparaîtra ici.