Type, Interface e Enum in TypeScript

In questo video vedremo cosa sono e come si usano dei tipi speciali da passare alle variabili, parleremo di Type, Interface (interfaccia) e Enum.
Le ultime versioni di TypeScript hanno rimosso molte delle differenze tra l'usare Type o Interface e quindi, bene o male, ora la scelta di uno rispetto all'altro è più un scelta di gusto personale.
Vedremo anche come assegnare alle proprietà: valori primitivi, array, oggetti e funzioni. Vedremo inoltre come creare proprietà opzionali, o usare index signature cioè un placeholder per proprietà di cui ancora non si conosce il nome.
Infine parleremo degli Enum, una sorta di oggetti che aiutano a mappare/confrontare dei valori che non possono essere cambiati, normalmente si usano con i numeri ma vedremo un esempio anche con le stringhe.

Trascrizione: (click per espandere)
salve a tutti in questo video andremo a
parlare d type interface enum allora che
vuol dire andiamo a vedere dei tipi più
complessi da assegnare a delle variabili
se vi ricordate nel mio video precedente
avevo assegnato alla proprietà un tipo
oggetto di questa maniera qui allora
finché sono oggetti semplici come questo
si può fare direttamente in questa
maniera in una riga e ce la sbrighiamo
facilmente però quando si comincia a
voler assegnare dei tipi di oggetto un
po più complessi è meglio fare uso di
type o interface
vi dico già che la differenza tra
type e interface
o meglio le differenze sono
minimali le interfacce sono più famose
dei type per un paio di motivi uno
perché in altri linguaggi di
programmazione come java ci sono
le interfacce quindi se ci sono
programmatori che derivano da altri
linguaggi sono più abituati a usare
interfacce
il secondo motivo è perché all'inizio di
typescript e il type aveva meno
funzionalità dell'interfaccia poi con le
varie versioni di typescript il tipo
type è stato migliorato e quindi adesso
le differenze sono
minimali però ormai la gente si è
abituata ad usare l'interfaccia e
normalmente usa interfacce comunque se
voi volete andare approfondire le
differenze vi metto un link
in descrizione dove potete trovare più
informazioni andiamo a vedere come si
dichiara un type allora io scrivo
type il nome del mio type uguale e poi
si mettono le parentesi graffe e poi si
va come un oggetto io posso andare a
dire ok
anzi possono copiare da qui
prevedo che abbia una proprietà che si
chiama a che sia una stringa poi una
proprietà b che sia un numero e poi una
proprietà ci che sia un valore booleano
ecco qui
però immaginate che potete mettere molte
più proprietà tipi più complessi
eccetera e quindi farvi stare tutto
in una riga diventava un po poco
leggibile e quindi è meglio fare ricorso
a un type o ha un'interfaccia dopo io
vado a dichiarare una variabile la
chiamo mio type
anzi questo lo chiamo new type
e si mettono sempre i due punti e vado a
dire ok questa variabile
mio type ha come tipo new type e poi
vado a creare il mio oggetto e come
vedete io devo assegnarci una proprietà
a che è una stringa una proprietà b che è
un numero è una proprietà c che è un
valore booleano non c'è
praticamente differenza tra questo è
questo qui però si se io qui avevo un
type con non so dieci diverse proprietà
e le proprietà magari erano array e le
proprietà magari c'erano dei metodi
eccetera appunto diventava praticamente
illeggibile a farlo tutto in una riga
quindi si può fare ricorso al type
stessa cosa può essere usata
l'interfaccia allora io creo una nuova
interfaccia si usa interface poi
la prassi vuole che il nome
dell'interfaccia inizi con una i
maiuscola e la chiamò in new inter non
ci va l'uguale ci vanno subito le
parentesi graffe e poi cominciamo allora
per esempio l'interfaccia io posso
andare a copiare quello di prima
quindi io mi aspetto che
l'oggetto che avrà come tipo questa
interfaccia abbia una proprietà a che è
una stringa una proprietà b che un
numero è una proprietà c che è un
valore booleano non si mettono le
virgole si mettono i punti virgola
questa è la mia interfaccia poi vado a
creare una variabile che la
chiamo mia inter che ha valore il tipo
I new interface
qui vado a dire ok la proprietà a deve
essere una stringa la proprietà b deve
essere un numero e metto 5 e la
proprietà c deve essere un valore
booleano falso ok perfetto lo vedete
typescript contento non si lamenta tutto a
posto
però posso anche dire ok io qui ci metto
un'altra proprietà la chiamo d che è
opzionale e se c'è deve avere deve
essere una stringa quindi ancora non si
lamenta però se nel momento in cui vado
a metterci una proprietà d
automaticamente dovrà essere una stringa
quindi se metto stringa 2 quindi
mettere una virgola
ok senno' si lamenta
cos'altro io posso avere una proprietà
la chiama proprietà e che è un array di
stringhe quindi stringhe la metto così
un array di stringhe e quindi come
vedete adesso qui comincia subito
lamentarmi perché dice che questa
variabile non ha la proprietà e quindi
devo andare aggiungere una proprietà e
che è un array di stringhe e quindi le
metto ecco qui posso andare
a dire ok qui ci metto dentro
ala mia interfaccia una proprietà
f che è una funzione che ritorna una
stringa e come vedete adesso devo andare
aggiungere anche il mio oggetto una
proprietà f che è una funzione che
quindi praticamente è un metodo e quindi
vado a dire ok questo è un metodo che
ritorna una stringa come in questo caso
posso andare a dire la proprietà g che
accetta non so un oggetto l'oggetto deve
avere una proprietà che si chiama p1 che
dovrà essere una stringa è una p2 che
dovrà essere un numero e quindi devo
aggiungere anche alla mia
variabile quindi una proprietà g che
abbiamo detto è un oggetto che ha la
proprietà p1 che è una stringa è una
proprietà di due una p2 che è un numero
e mettiamo cinque e
adesso diciamo che ok io ho creato la
mia interfaccia eccetera però potrei
avere oggetti che
hanno come tipo questa interfaccia però
voglio che alcuni oggetti abbiano più
proprietà di quelle specificate nella
mia interfaccia come faccio perché se
io adesso io vado ad aggiungere una
proprietà che non è listata nella mia
interfaccia per esempio proprietà h e
ci metto dentro un numero come vedete mi
dice no h non può essere usato perché
nell'interfaccia non c'è però posso
andare a specificare questa cosa
nell'interfaccia facendo parentesi
quadrate si scrive key e si dice che è
di tipo stringa e vado a dare valore
any per esempio in questo caso quindi
vado a dire che questa interfaccia le
variabili che hanno come tipo questa
interfaccia dovranno avere tutte queste
proprietà questa opzionale però la a la
bi la c sono obbligatorie la d e'
opzionale la e la f la g sono
obbligatorie e poi possono anche avere
altre proprietà non so che nome
avranno le proprietà quindi possono
mettere h e il valore di quelle
proprietà posso mettere qualsiasi
valore per esempio possono avere numeri
e posso mettere una proprietà che
si chiama i e che c'ha valore booleano
posso andare ad aggiungere quante
proprietà voglio perché appunto ho messo
che nell'interfaccia ho
l'opzione di aggiungere delle
proprietà cosa succede quando typescript
compila questo file che è in
typescript
e con queste interfacce questi type e lo
compila in un file javascript perché
sappiamo che in javascript interfacce e
type non esistono
andiamo a vedere subito allora adesso io
lo sto compilando non ci sono errori
vado ad aprire dentro la build folder il
file javascript video 5 e come vedete io
mi trovo semplicemente due oggetti con
le loro proprietà non trovo type e non
trovo interfacce praticamente quando
typescript compila il codice in javascript
rimuove tutte quelle funzionalità tutte
quelle cose accessorie che sono tipiche
di typescript come appunto interfacce e
e type
la stessa cosa vale anche per il video
precedente
il video 4 se vi ricordate tutti i
tipi che avevo assegnato alle mie
variabili se io adesso vado a vedere il
file vengono rimossi tutti quanti perché
appunto quei tipi sono cose strettamente
riguardanti typescript e quando sono in
javascript io non posso usarle e quindi
vengono rimosse questo cosa vuol dire
vuol dire che typescript provvede tipi
solo mentre il programmatore sta
scrivendo il codice una volta che il
codice è stato compilato tutti questi
tipi vengono rimossi e non ci sono più
tutti i controlli per i valori che
vengono passati valori che vengono
assegnati alle variabili viene perso
tutto quindi si dice che a runtime non
ci sono più
tipi perché appunto runtime io sto
eseguendo codice javascript
andiamo a vedere l'ultimo che enum
l'enum viene usato per fare una
mappatura di valori normalmente viene
usato quando si vuole usare delle
proprietà come un valore di costante
quindi si usa la keyword enum poi si mette
lo chiamo new enum parentesi graffe e
poi io vado ad assegnare il nome delle
proprietà per esempio metto a virgola
poi metto b e poi metto c allora
normalmente di default
l'enum va a mappare il nome della
proprietà con un numero che inizia
da zero
quindi perché appunto normalmente c'è
questo comportamento io non vado a
specificare che valore ha la proprietà
a la proprietà b la proprietà c
perché automaticamente typescript dice la
proprietà a ha valore zero la proprietà b
ha valore uno è la proprietà c ha
valore 2
quindi se io vado sopra col mouse come
vedete mi dice che la proprietà a valore
zero la proprietà b ha valore 1 la
proprietà c ha valore due però se io
voglio che questo enum non inizi da zero
voglio che inizi da un valore specifico
posso andare a assegnargli un
valore diverso quindi vado a mettere
uguale per esempio metto 10 fatto questo
automaticamente tutte le proprietà dopo
dopo questa avranno una unità in più
rispetto a quello che ho dichiarato io
quindi la b sarà 11 ci sarà 12
se per esempio avevo anche una d e
pero' la c aveva 20 mi troverò che la b
e' 11 la c e' venti perché ci ho assegnato
il 20 e la d sara 21 a un enum si
possono anche assegnare stringhe e
quindi di default lui
lavorerebbe con i numeri si possono
anche assegnare delle stringhe per
esempio non so si vuole dire che quando
si usa top
la stringa sia proprio top e quando
si usa bottom la stringa sia bottom quando
si usa a left la stringa sia left metto
in inglese e sono abituato a valori in
inglese right e la stringa è right
ecco qui cosa sto facendo sto dicendo
che quando io uso la proprietà top io
sto passando una costante che è una
questa stringa come costante quindi come
dicevo all'inizio enum viene usato
per fare una mappatura per valori che
siano delle costanti
quindi io posso andare a visualizzare console log new enum top per
esempio e mi troverò che questo new enum proprietà top avrà questo valore
normalmente si usano gli enum
quando si vuole confrontare il valore
che ho io con appunto una costante per
esempio non so io c'ho un valore
inserito dall'utente vado a controllare
questo valore inserito dall'utente per
esempio se il valore inserito
dall'utente quindi lo chiamo utente è
uguale al new enum top allora
fa qualcosa se è uguale a new enum
bottom allora fa qualcos'altro per
esempio questo caso potrebbe essere
non so muovi un mirino nello
schermo se l'utente clicca top
allora se l'input dell'utente e top fa
questo comunque sempre valori che non
si possono modificare e l'enum è
l'unica funzionalità di typescript
che quando viene convertita in
codice javascript
viene convertita
in qualcosa non viene
completamente eliminata e nello
specifico viene convertita in un oggetto
vi posso far vedere intanto vi
posso mettere qui e poi vi faccio vedere
in cosa viene convertito il mio
new enum così potete vedere se adesso io
salvo
ok è stato compilato vado a vedere cosa
c'è dentro è questo qui il mio enum come
vedete viene convertito in un oggetto
praticamente e posso andare anche a
eseguire il codice adesso vi faccio
vedere il codice per eseguire il codice
vado a dire ok node eseguì il file video
5.js
e come vedete io ho stampato la
proprietà top del mio enum che sarà top
in stringa e poi vi dico anche che il
mio enum è un oggetto con questo è tutto
ci sentiamo la prossima ciao
File del video: