Tipo e interfaccia in TypeScript

Type vs. Interface è una delle cose più confuse e interessanti in TypeScript. Cercheremo di chiarire questa confusione.

TypeScript viene creato sopra JavaScript, che aggiunge tipi statici . Avere tipi è una cosa meravigliosa per gli sviluppatori. I tipi di scrittura saranno difficili, ma a lungo termine non te ne pentirai.

TypeScript ha tutti i tipi di base come numero, stringa, booleano, ecc. Insieme al tipo di base, TypeScript ci consente di creare tipi personalizzati e definire l'aspetto di un oggetto con l'aiuto di alias e interfacce di tipo, rispettivamente.

Un alias di tipo non è altro che un tipo. La creazione di un tipo con un nome personalizzato (alias) lo rende un alias di tipo, nient'altro.

Diamo un'occhiata alla sintassi di base delle interfacce e degli alias di tipo .

Sintassi di base

Interfacce

Le interfacce verranno dichiarate con la parola chiave interface . Controlla la sintassi delle interfacce di seguito.

 interface InterfaceName { keyName: typeOfKey ... }

Dai un'occhiata all'esempio di esempio qui sotto.

 interface Site { name: string; url: string; pagesCount: number; } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Digita alias

Gli alias di tipo verranno dichiarati utilizzando la parola chiave type . Controlla la sintassi degli alias di tipo di seguito.

 type TypeName = { keyName: typeOfKey; ... }

Dai un'occhiata all'esempio di esempio qui sotto.

 type Site = { name: string; url: string; pagesCount: number } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Abbiamo creato un tipo per il Site utilizzando l' interfaccia e il tipo alias . Entrambi sono validi e possono essere utilizzati per i tipi di oggetto menzionati negli esempi. Solo la sintassi è diversa nell'esempio sopra, il che è ovvio.

Continuiamo ad esplorare le differenze tra loro per trovare più cose.

Tuple

Una tupla in TypeScript è una matrice di lunghezza predefinita digitata. Definisce i tipi di ciascun indice.

Possiamo dichiarare tuple usando alias di tipo. Ma non possiamo farlo usando le interfacce. Vediamo come farlo con gli alias di tipo.

 type Site = [string, string, number] const geekflare: Site = ['Geekflare', 'https://geekflare.com/', 25]

Nell'esempio sopra, abbiamo definito il tipo per ogni elemento di indice per l'array. Se diamo un altro tipo nell'array, TypeScript genererà un errore.

Non possiamo farlo con le interfacce?

Non possiamo farlo esattamente come lo facciamo con gli alias di tipo. Le interfacce vengono utilizzate per i tipi di oggetto. Quindi, dobbiamo avere la tupla all'interno dell'oggetto per usarla nelle interfacce. Vediamo un esempio.

 interface Site { details: [string, string]; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Se vedi il codice, abbiamo una tupla chiamata dettagli all'interno dell'interfaccia. Quindi, possiamo usare le tuple all'interno delle interfacce.

Allo stesso modo, possiamo usare alias di tipo per singoli tipi come stringa, numero, booleano, ecc. Poiché l'interfaccia viene utilizzata per i tipi di oggetto, possiamo usarla per i singoli tipi come alias di tipo.

Un'altra cosa interessante è che possiamo usare il tipo alias tupla nelle interfacce . Controllare l'esempio seguente.

 type Details = [string, string] interface Site { details: Details; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Passiamo alla prossima cosa.

Dichiarazione di fusione – Interfacce

La fusione delle dichiarazioni consiste nell'usare TypeScript per unire tipi di interfacce con lo stesso nome. Vediamo l'esempio per avere più chiarezza su di esso.

 interface Site { name: string; } interface Site { url: string; } interface Site { pagesCount: number; } const geekflare: Site = { name: 'Geeflare', url: 'https://geekflare.com/', pagesCount: 25, }

Se vedi il codice sopra, abbiamo dichiarato l'interfaccia con lo stesso nome 3 volte. Il compilatore TypeScript compilerà tutti e 3 i moduli in un unico tipo di oggetto che include tutti i tipi delle interfacce che hanno lo stesso nome.

Puoi confermare la fusione della dichiarazione rimuovendo una chiave dall'oggetto geekflare . Se rimuovi una delle chiavi da geekflare , vedrai un errore.

Non possiamo fare la stessa cosa con gli alias di tipo. La maggior parte delle persone non usa questa funzione. In generale, avere più interfacce con lo stesso nome crea confusione.

Digita alias fan, non preoccuparti di questa funzionalità delle interfacce.

Si estende

Supponiamo che tu abbia dichiarato un tipo. Ora vuoi dichiarare un altro tipo insieme ai tipi del tipo precedente. In tal caso, possiamo estendere il tipo precedente. Possiamo farlo sia con le interfacce che con gli alias di tipo .

Vediamoli entrambi.

Interfacce

C'è una parola chiave chiamata extends per questo caso d'uso in TypeScript. Lo useremo per estendere le interfacce. Controlliamo l'esempio.

 interface Site { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Abbiamo creato Geekflare Interface estendendo l'interfaccia del Site . Tutti i tipi di Site saranno presenti in Geeflare Interface insieme ai propri tipi. Puoi rimuovere la chiave del name dalla variabile geekflare per confermarla.

Possiamo estendere più interfacce come segue.

 interface FirstHalf { name: string; } interface SecondHalf { age: number } interface Person extends FirstHalf, SecondHalf { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Prova ad estendere con più di 2 interfacce per divertimento. Possiamo anche estendere gli alias di tipo con l'interfaccia.

 type Site = { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Abbiamo esteso solo un tipo nell'esempio sopra. Puoi estenderne quante ne vuoi, in modo simile all'esempio precedente di estensione di più interfacce.

Vediamo come farlo con gli alias di tipo.

Digita alias

Possiamo estendere gli alias di tipo usando il tipo di intersezione in TypeScript. Vediamo un esempio.

 type Site = { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Abbiamo esteso il tipo di Site con founder per il tipo Geekflare utilizzando l' intersezione (&) . Puoi testarlo rimuovendo una delle chiavi dalla variabile geekflare , che genererà un errore.

Simile alle interfacce, possiamo estendere più tipi come segue.

 type FirstHalf = { name: string; } type SecondHalf = { age: number } type Person = FirstHalf & SecondHalf & { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Possiamo anche estendere le interfacce con gli alias di tipo come le interfacce che estendono gli alias di tipo. Controlla l'esempio qui sotto.

 interface Site { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Prova ad estendere la combinazione di alias di tipo e interfacce.

Implementazione

Questa non è una differenza tra interfacce e alias di tipo. Solo una caratteristica di class da sapere.

Una classe può implementare sia l'interfaccia che l'alias di tipo allo stesso modo. Vediamo gli esempi per entrambi.

Interfacce

 interface Site { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Digita alias

 type Site = { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Nota: una cosa da ricordare è che non possiamo implementare tipi di unione (|) o intersezione (&) con le classi.

Parole finali

Come vedi negli articoli, possiamo fare tutto sia con gli alias di tipo che con le interfacce. Quindi, non possiamo dire rigorosamente che uno è migliore dell'altro. Alla fine, è una scelta personale sceglierne uno. Alla fine svilupperai il tuo stile di utilizzo.

Successivamente, puoi controllare Typescript vs. Javascript.

Buona codifica