TypeScriptLesson 16 of 16

Mini project: a typed task tracker

The last lesson brings it all together: an interface, a union of literals, utility types and a class with private state. The skeleton is ready, and three methods are left to write.

Key points

Priority is a union of literals, not an enum.
readonly id cannot change after a task is created.
NewTask = Omit<Task, "id" | "done">: the tracker fills those fields itself.
Record<Priority, number> sets the sort order and will not let you forget a priority.
private tasks: from outside, the list changes only through the methods.

Example

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")}`);

The example is a smaller version of the project: notes with a status, a private array and a counting method. The task adds sorting by priority and statistics.

Task

How to use the editor⌘ Enter or Ctrl Enter runs the code, ⇧ ⌘ Enter checks the task.Tab and Shift Tab indent the line or the selection; Esc, then Tab leaves the editor.The check compares what the program printed with the task; spaces at line ends do not matter.After two failed checks you may open the solution. Your code is kept in this browser.

Finish complete, pending and stats. Output: "Complete #2: true", "Complete #9: false", then the open tasks by priority — "[high] Review PR", "[medium] Write README", "[low] Update icons" — and "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}`);

Output

What your program prints appears here.