6 Interfaccie

spostiamo il servizio creato precedentemente in una nuova cartella services che andiamo a creare e controlliamo che le dipendenze vengano aggiornate e soddisfatte.

Analizzando il service, esso contiene l’array user che è composto da oggetti di un certo tipo chiave valore

users = [
{
nome: 'fag',
cognome: 'pingwie',
cf: 'fgapng44a21f221c',
mail: 'pippo@tin.it',
tel: '123456',
prov: 'SV',
eta: 55
},
{
nome: 'fag2',
cognome: 'pingwie2',
cf: 'fgapng44a21f221c',
mail: 'pippo@tin.it',
tel: '123456',
prov: 'SV',
eta: 55
},
{
nome: 'fag3',
cognome: 'pingwie3',
cf: 'fgapng44a21f221c',
mail: 'pippo@tin.it',
tel: '123456',
prov: 'SV',
eta: 55
}
];

Quindi come si vede ogni oggetto dell’array ha un tipo di dati, per esempio il nome è una string, l’età è un number,

Per tipizzare i tipi di dato, per avere un eventuale auto completamento sui records e per risolvere eventuali errori con campi indesiderati, è possibile creare un’ interface.

Creiamo una nuova cartella interfaces e creiamo la nuova interfaccia chiamata user con l’ide o con angular cli

ng generate interface user

adesso dobbiamo inserire i campi presenti nel nostro servizio, ecco come si presenta l’interfaccia user

export interface User {
 nome;
 cognome;
 cf;
 mail;
 tel;
 prov;
 eta;
}

Ora dobbiamo dire al servizio che l’array users è di tipo User interface racchiudendo il nome dell’interfaccia tra maggiore e minore ( < > )

users: Array<User> = [

L’ ide automaticamente importa l’interfaccia

import {User} from '../interfaces/user';

qualora nell’ array si aggiungesse una voce non presente nell’interfaccia, o si sbagliasse a scriverne una, avremmo un’errore.

Un altra forma per dire che users è un array di tipo User è mettendo il nome dell’interfaccia seguita da parentesi quadre: User[]

users: User[] = [

Nel decoratore @input di user.component.ts dobbiamo ora specificare che user è di tipo User e importare l’interface

@Input('user-data') user: User;

se ora nel metodo deleUser() inserisco

this.user.

l’auto completamento dell’ide ci fa scegliere i vari campi (nome, cognome,cf…) e altre utili funzioni correlate.

Questa parte riguarda il singolo utente, ma se andiamo a lavorare sugli utenti nel file users.components.ts, dichiarando intanto l’array users di tipo User

users: User = [];

e se aggiungiamo this.users. noteremo che avremo accesso a tutti i metodi riguardanti gli array oltre che i dati dell’interface.

Ancora più efficace è tipizzare l’interfaccia, specificando per ogni proprietà il tipo di dato associato, questo ci permetterà di prevenire eventuali errori nella digitazione di dati sbagliati

export interface User {
 nome: string;
 cognome: string;
 cf: string;
 mail: string;
 tel: string;
 prov: string;
 eta: number;
}