#11: ⛓ Interface

Nous voulons utiliser les capacités de TypeScript pour savoir quel type d'objet nous passons en tant qu'item au composant todo-item. Nous nous assurerons que l'élément est du bon type. Mais son type n'est pas une simple string, nombre ou booléen. Nous allons donc définir le type de l'élément en utilisant une interface.

Les interfaces n'existent que dans TypeScript et sont supprimées lorsque le code est transpilé en JavaScript. En JavaScript, les types ne sont pas vérifiés.

Créez une interface TodoItem dans un nouveau dossier interfaces avec Angular CLI:

ng g i interfaces/todo-item

ì est le raccourci de... vous l'avez deviné - interface. En ajoutant un chemin dans la commande, Angular CLI génère les dossiers spécifiés s'ils n'existent pas déjà.

Dans votre IDE, ouvrez le fichier nouvellement créé src/app/interfaces/todo-item.ts:

src/app/interfaces/todo-item.ts

export interface TodoItem {
}

Maintenant, nous pouvons définir quelles propriétés et/ou méthodes chaque objet de type TodoItem doit avoir. À ce stade, nous allons ajouter deux membres:

• title qui doit être de type string

• completed qui doit être de type boolean et facultatif

src/app/interfaces/todo-item.ts

export interface TodoItem {
  title: string;
  completed?: boolean;
}

Definissons l'@Input de l'élément pour qu'il soit de ce nouveau type. Cela permettra à l'IDE de nous suggérer les membres disponibles lorsque nous utilisons l'élément dans le composant.

src/app/todo-item/todo-item.component.ts

export class TodoItemComponent {
  @Input() item!: TodoItem;

Nous devons importer l'interface dans ce fichier.

src/app/todo-item/todo-item.component.ts

import { TodoItem } from '../interfaces/todo-item';

Maintenant, définissons la liste des éléments pour contenir des objets du type TodoItem.

src/app/app.component.ts

export class AppComponent {
  title = 'todo-list';
  todoList: TodoItem[] = [
    {title: 'install NodeJS'},
    {title: 'install Angular CLI'},
    {title: 'create new app'},
    {title: 'serve app'},
    {title: 'develop app'},
    {title: 'deploy app'},
  ];
}

Encore une fois, vous devez importer l'interface dans ce fichier.

src/app/app.component.ts

import { TodoItem } from './interfaces/todo-item';

Maintenant essayez de supprimer le titre de l'un des objets de la liste. Que se passe-t-il?

💾 Pusher votre code sur GitHub

Committez tous vos changements en exécutant cette commande dans votre répertoire de projet.

git add -A && git commit -m "votre message de commit"

Puis pusher vos changements sur GitHub en exécutant cette commande dans votre répertoire de projet.

git push