#11: ⛓ Interface

Search…
#11: ⛓ Interface
Queremos usar as habilidades do TypeScript para saber que tipo de objeto passamos como um item para o componente todo-item. Iremos ter certeza de que o item é do tipo certo. Mas o seu tipo não é uma simples string, número ou booleano. Vamos definir o tipo do item usando uma interface.
Já vimos uma interface fornecida pelo Angular: a interface OnInitque inclui o método ngOnInit. Cada classe que implementa essa interface deve definir esse método. Caso contrário, obteremos um erro durante o tempo de compilação.
Interfaces existem apenas no TypeScript e são removidas quando o código é compilado para JavaScript. Em JavaScript, não podemos impor a segurança do tipo.
Crie uma interface TodoItem em uma nova pasta chamada interfaces com o Angular CLI:
ng g i interfaces/todo-item
i é a contração para... você adivinhou - interface. Adicionando um caminho faz com que o Angular CLI gere as pastas que você indicou, se elas ainda não existirem.
Abra o arquivo recém criado src/app/interfaces/todo-item.ts:
src/app/interfaces/todo-item.ts
export interface TodoItem {
}
Agora, podemos definir que propriedades e/ou métodos cada objeto do tipo TodoItem deve ter. Neste ponto iremos adicionar dois membros:
title que deve ser do tipo string
completed que é do tipo boolean e é um membro opcional
src/app/interfaces/todo-item.ts
export interface TodoItem {
  title: string;
  completed?: boolean;
}
Vamos definir o item @Input para ser do tipo que criamos. Isso vai permitir que a IDE nos sugira membros disponíveis quando usarmos o item na classe e no modelo do componente.
src/app/todo-item/todo-item.component.ts
export class TodoItemComponent implements OnInit {
  @Input() item: TodoItem;
Você vai precisar importar a interface nesse arquivo.
src/app/todo-item/todo-item.component.ts
import { TodoItem } from '../interfaces/todo-item';
Agora, vamos definir a lista de itens de tarefas para conter os objetos do tipo TodoItem
src/app/app.component.ts
export class AppComponent {
title = 'app';
todoList: TodoItem[] = [
  {title: 'install NodeJS'},
  {title: 'install Angular CLI'},
  {title: 'create new app'},
  {title: 'serve app'},
  {title: 'develop app'},
  {title: 'deploy app'},
];
Novamente, será preciso importar a interface para esse arquivo.
src/app/app.component.ts
import { TodoItem } from './interfaces/todo-item';
Agora tente excluir o título (title) de um dos objetos na lista. O que acontece?
#10: ➕ Criando o componente todo-item
#12: 📌 Adicionando itens na lista
Last modified 2yr ago
Copy link