Define a Task Interface

Branch

Creating Interfaces

You will create a new TypeScript interface to represent a task. Each task has 4 properties:

• id: a string representing the unique identifier of the task
• title: a string representing the title of the task
• description: a string representing the description of the task
• createdAt: a date representing the creation date of the task

Instructions

1. Create a new folder called models in the src/app folder to store all TypeScript interfaces for the application.

   src
   └─ app
       └─ models

2. Create a new file called task.model.ts in this new folder.

   src
   └─ app
       └─ models
            └─ task.model.ts

3. Add the following code to the file:

   export interface Task {
     id: string;
     title: string;
     description: string;
     createdAt: Date;
   }

Generating Identifiers

You will generate a unique identifier for each task. This identifier will help you uniquely find a given task. Such an identifier is typically generated by a backend server, but for this tutorial, you will generate it on the client side.

For this, you will use the uuid library. This library generates unique identifiers based on the current timestamp and a random number.

1. Install the uuid library by running the following command in the terminal:

   npm install uuid && npm i --save-dev @types/uuid

Using the Interface

A local variable will be created in the TaskList component to store a list of tasks. You will use the Task interface to define the type of the tasks variable.

In JavaScript, you would define the tasks variable like this:

let tasks = [
  {
    title: "Task 1",
    description: "Description of task 1",
    createdAt: new Date(),
  },
  {
    title: "Task 2",
    description: "Description of task 2",
    createdAt: new Date(),
  },
];

To assign a type to a variable in TypeScript, you can use the : operator followed by the variable type:

let tasks: Task[] = [
  {
    title: "Task 1",
    description: "Description of task 1",
    createdAt: new Date(),
  },
  {
    title: "Task 2",
    description: "Description of task 2",
    createdAt: new Date(),
  },
];

Signals

Angular now use a new reactive API called Signals. It helps updating your application whenever a change occurs.

To make a property reactive with Signals, use the signal function and pass it the task list as a parameter. Its type change too: as we want to be able to update the task list, we need to use the WritableSignal type.

let tasks: WritableSignal<Task[]> = signal([
  {
    title: "Task 1",
    description: "Description of task 1",
    createdAt: new Date(),
  },
  {
    title: "Task 2",
    description: "Description of task 2",
    createdAt: new Date(),
  },
]);

Instructions

1. Update the src/app/task-list.ts file:

   // Import the signal API
   import { Component, signal, WritableSignal } from "@angular/core";
   
   
   import { Task } from "../models/task.model";
   
   
   import { v4 as uuid } from "uuid";
   
   @Component({
     selector: "app-task-list",
     imports: [],
     templateUrl: "./task-list.html",
     styleUrls: ["./task-list.css"],
   })
   export class TaskList {
   
     tasks: WritableSignal<Task[]> = signal([
       {
         id: uuid(),
         title: "Task 1",
         description: "Description of task 1",
         createdAt: new Date(),
       },
       {
         id: uuid(),
         title: "Task 2",
         description: "Description of task 2",
         createdAt: new Date(),
       },
     ]);
   }

• TypeScript Documentation: interface

• uuid Documentation