Create the Task Interface

Chapter Objectives

• ✔️
  Create a TypeScript Interface

  Learn how to create a new TypeScript interface to represent a task.

• ✔️
  Use the TypeScript Interface

  Learn how to use the TypeScript interface to define a variable type.

• ✔️
  Generate a Unique Identifier

  Learn how to generate a unique identifier using the uuid package

Creating Interfaces

You will create a new TypeScript interface to represent a task. Each task has 3 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

Caution

We use interfaces to represent our entities and also the business models of the project. These business models and entities are therefore quite different from the component model (the .component.ts file).

🎓 Instructions

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

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

3. Add the following code to the file:

   task.model.ts

   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.

🎓 Instructions

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

Create a local variable in the TaskListComponent class 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(),
  },
];

🎓 Instructions

1. Open the file src/app/task-list.component.ts.

2. Add the following code to the file:

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: "Task 1",
      description: "Description of task 1",
      createdAt: new Date(),
    },
    {
      id: uuid(),
      title: "Task 2",
      description: "Description of task 2",
      createdAt: new Date(),
    },
  ];
}

✔️ What You Have Learned

You have learned how to create your first TypeScript interface. This will help during this course to track errors and improve code quality. You have also learned how to use the TypeScript interface to define a variable type.

🔗 Resources

• TypeScript Documentation: interface

• uuid Documentation