70 – TS Interface

Le interfacce possono essere considerate come un contratto sui tipi di dati che dobbiamo passare ad una funzione o sulle caratteristiche che deve avere un oggetto.

Facciamo subito un esempio dichiarando una funzione che riceve un oggetto con lastname e firstname di tipo stringa

function showUser( user:{ lastname:string, firstname:string}) {
    console.log(user.firstname + ' , ' + user.lastname)
}

showUser({lastname:'pippo', firstname:'paperino'});

Il problema di questa logica è che se in un altra funzione andremo a processare un altro utente non possiamo riciclare il codice della funzione showUser e dovremmo specificare nuovamente il codice sul tipo di dato:

( user:{ lastname:string, firstname:string})

la convenienza sta nell’utilizzare la dichiarazione del tipo di dato stanziandola in un’interfaccia, tramite il costrutto intarface, seguito dal nome che vogliamo dare all’interfaccia che per convenzione inizia in maiuscolo:

interface IUser {
    lastname:string, 
    firstname:string
}

adesso creando una seconda funzione, andrò ad indicare che il tipo di dato è di tipo IUser.

function showUser2( user: IUser) {
    console.log(user.firstname + ' , ' + user.lastname)
}

Quindi ogni volta che avrò necessita di avere una funzione con questo tipo di dato, mi basterà richiamare l’interfaccia, senza dover rifare le dichiarazioni ogni volta.

Valore di un’interfaccia opzionale

Quando creo un’interfaccia con dei valori che possono non essere utilizzati, devo indicare a typescript che sono opzionali. Questo può essere effettuato anteponendo al nome della proprietà un punto interrogativo.

interface IUser {
    lastname : string,
    firstname : string,
    adderss? : string
}

a questo punto nella funzione che  richiama l’interfaccia la proprietà address può non venire dichiarata.

Parametri passati non conosciuti a priori

Supponiamo di ricevere da un database delle proprietà non dichiarate nell’interfaccia, tipo in questo caso:

showUser({lastname:'pippo', firstname:'paperino', age:45, title:'ingegnere'});

Riceveremo un errore. Basterà dichiarare una proprietà stringa tra parentesi quadre e dire che è di tipo any

[propName : string] : any

aa questo punto posso ricevere come parametri ogni tipo di valore

interface IUser {
    lastname : string,
    firstname : string,
    adderss? : string,
    [propName : string] : any
}

function showUser2( user: IUser) {
    console.log(user.firstname + ' , ' + user.lastname + ' , ' + user.age + ' , ' + user.title)
}

showUser2({lastname:'pippo', firstname:'paperino', age:45, title:'ingegnere'});