Create the task interface

• ✔️
  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 the type of a variable.

• ✔️
  Generate a unique identifier

  Learn how to generate a unique identifier with uuid package

Interface creation

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.

🎓 Instructions

1. Create a new folder called models in the src/app folder to store all the TypeScript interfaces of 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;
   }

Id Generation

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

To do so, let’s 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

Interface usage

Let’s 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 type of the variable:

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. Update the src/app/task-list.component.ts 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  implements OnInit {
   
       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()
           }
       ];
   
       ngOnInit() {}
   }

✔️ What you learned

You learned how to create your first TypeScript interface. It’ll help during this course to track errors and improve the code quality. You also learned how to use the TypeScript interface to define the variable type.

🚦 Quiz

What is the TypeScript keyword used to define the Task model in src/app/model/task.model.ts file?

1. interface
2. type
3. class

What is the TypeScript keyword used to define the type of a variable?

1. title: string;
2. title = string
3. title ; string

🔗 Resources

• TypeScript interface documentation
• Uuid documentation