I tipi in TypeScript

In questo video parleremo di come assegnare i tipi a variabili, funzioni e parametri.
La possibilità di assegnare i tipi al linguaggio JavaScript, come avviene in altri linguaggi di programmazione, è stato proprio il motivo per cui TypeScript è stato inventato e da ne cui deriva il nome.
Per "tipo", si intende il tipo di valore che la variabile può contenere, ad esempio: stringa, numero, booleano ecc..
Vedremo poi come tipizzare array, oggetti e i valori ritornati da una funzione.
Infine, parleremo di come usare i valori generici: any e unknown. Normalmente si utilizzano questi valori quando non si conosce il vero valore che verrà assegnato.

Trascrizione: (click per espandere)
salve a tutti in questo video
cominceremo ad usare typescript in
maniera un po' più approfondita un po più
restrittiva e vedremo proprio come si
assegnano i tipi alle variabili rispetto
al video precedente ho modificato che
dentro al folder source ho creato dei
sub folder specifici per ogni video
questo il video 4 allora andiamo a
vedere come si può assegnare un tipo ad
una variabile si può fare in maniera
implicita o in maniera esplicita in
maniera esplicita per esempio io
voglio assegnare una stringa questa
variabile la chiamo mia stringa si
mettono i due punti e poi si dice si
scrive string in questa maniera qui io
sto dicendo la variabile mia stringa
puo' solo contenere stringhe
quindi se poi io vado a assegnarle un
valore deve essere una stringa come in
questo caso se io provavo assegnargli un
valore numero come vedete typescript mi
dava errore mi diceva che 4 non è
assegnabile un tipo stringa posso anche
inizializzare assegnargli subito un
valore in questa maniera qui stringa
quindi io specifico che tipo è questa
variabile e poi le assegno direttamente
un valore
questa è la maniera esplicita la maniera
implicita è come in questo caso si
assegna direttamente il valore alla
variabile per esempio qui ci metto un
numero è solo perché io sto assegnando
anzi questo lo chiamo mio numero
solo perché io sto segnando un valore di
tipo numero a questa variabile
automaticamente questa variabile potrà
contenere solo numeri quindi io posso
cambiare il numero al suo interno ma non
posso andare a segnare per esempio un
valore booleano mi dice falso perché un
valore booleano non può
essere assegnato alla variabile di tipo
numero quindi questa è la maniera
implicita dove io non vado a specificare
cosa conterrà quindi se io devo
andare ad assegnare tipi di variabili
stringhe si scrive string dopo i 2 punti
se sono numeri si mette number se sono valori booleani si mette boolean e se devo
andare ad assegnare alla variabile un
array ci sono due maniere per assegnare
un array allora per esempio questo
lo chiamo mio array 1 sempre i due
punti
poi si deve andare a specificare il tipo
dei valori che saranno contenuti
dal mio array per esempio se il mio
array contiene solo stringhe si
scrive string e poi si mette
parentesi quadrate
in questa maniera qui sto dicendo che
questo variabile potrà contenere un
array che come valori ha solo stringhe
quindi io posso andare a assegnargli il
valore quindi questa qua posso mettere
uno e stringa perfetto 2 in stringa
nessun problema se provo a metterci
dentro numero subito mi viene dato un
errore che il numero non è assegnabile
al tipo string la seconda maniera per
assegnare un array lo chiamo mio array 2
usando l'oggetto array poi questi due
parentesi e dentro si va a specificare
il tipo dei valori che saranno contenuti
dall'array per esempio qui metto dentro
number
quindi il mio array puo' contenere solo
numeri come in questo caso ecco qui
normalmente si usa questa maniera qui
questo qui è la maniera più recente per
assegnare il tipo array a una variabile
e anche si scrive meno quindi è
preferibile usare questa maniera qui se
devo andare a assegnare un oggetto a una variabile la chiamo mio oggetto ha
sempre due punti parentesi graffe e
dentro devo andare a specificare il nome
della proprietà e il tipo di valore che
sarà contenuto dalla proprietà per
esempio io dico che questo ogetto ha
una proprietà che si chiama a e che
contiene una stringa poi ha una
proprietà b che contiene un numero
poi una proprietà c che contiene un
valore booleano se poi io vado ad
assegnare il valore a questa variabile
dovrà specificare la proprietà a
che contiene una stringa la proprietà b
che contiene un numero la proprietà ci
che colore contiene un valore booleano
se diciamo questo oggetto di sicuro ha la
proprietà la proprietà b ma potrebbe non
avere la proprietà c e allora io posso
andare a dire ok la probità ci
opzionale quindi io metto un
punto di domanda e se adesso assegno
un oggetto che non ha la proprietà c
typescript è contento così perché dice la
proprieta c non è obbligatoria
posso andare ad aggiungere dopo in
questa maniera qui però come specificato
qui se c'è la proprietà c deve avere un
valore booleano e quindi io posso
metterci dentro solo vero o falso
se io provo a metterci dentro una
stringa subito mi diceva che questo
valore non è assegnabile alla
proprietà c funzioni
allora io posso avere una funzione una
function expression e la chiamo mia
funzione che e' quando io a segno una
funzione a una variabile e
il tipo lo dichiaro in questa maniera
parentesi tonde che io potrei
metterci dei parametri se la mia
funzione accetta parametri poi si mette
la fat arrow e poi se la funzione ritorna
un valore si deve specificare il tipo
del valore che ritorna quindi se la
funzione ritorna una stringa si deve
scrivere string se ritorna un numero il
numero si ritorna un oggetto si deve
specificare come e' fatto l'oggetto se non
ritorna niente se il return non è
specificato dentro la funzione si mette
void
quindi se poi io vado a creare una
funzione la chiamo esempio questa
funzione qui che c'avra' del codice
codice vario va benissimo perché questa
funzione non sta ritornando niente
eccetera
la seconda maniera per dichiarare una
funzione è proprio con la keyword
function qui la chiamo mia funzione 2
come in questo caso e se devo dire che
questa funzione non ritorna niente si
mette dopo le parentesi per i parametri
si mette due punti void e questa è una
funzione dove non e' specificato il
return se questa funzione ritorna a
una stringa si mette string per esempio
se e come vedete mi da errore perché non
sto specificando il ritorno
se questa funzione ritorno a un oggetto
ritorno a qualcos'altro si deve
specificare cosa ritorno quella
funzione se questa funzione accetta dei
parametri per esempio il parametro 1 e
io andare a specificare non è
obbligatorio o meglio dipende da che
settaggio c'è nel tsconfig per il
momento vi faccio vedere come si può
fare allora vado a specificare che il
parametro uno deve essere una stringa il
parametro 2 diciamo che accetta
un'altra
stringa e vado a ritornare i due parametri
concatenati quindi parametro uno più
parametro 2 e come vedete typescript
non si lamenta perché io avevo già detto
che il valore di ritorno di questa
funzione sarà una stringa se io vado a
dire che
ritorno a un numero come vedete mi dice
no c'è un errore perché io mi aspetto
che questa funzione ritorni una stringa
come dicevo non è obbligatorio o meglio
dipende dalle impostazioni che ci sono
le tsconfig specificare che tipo di
valore per il parametro
come vedete quindi dice che il parametro
1 ha implicitamente un valore
tipo di any che vedremo un attimo più
avanti cosa vuol dire any quindi
perché io non sto specificando nessun
valore typescript dice ok va bene così però sta attento perché tu non stai
specificando non sei severo abbastanza
sta attento che potresti poi avere
problemi quando vuoi utilizzare la
funzione eccetera
quindi il consiglio è sempre usare il
tipo per ogni parametro come
in questo caso è qui andiamo a parlare
di any e unknown allora intanto any è
il tipo di valore più generico possibile
quando io non so cosa una variabile
possa contenere le assegno any per
esempio allora io chiamo variabile
generica la chiamò generica
se io le assegno any come in questo caso
io a questa variabile posso metterci
dentro qualsiasi cosa posso metterci
dentro una stringa poi posso metterci dentro un numero posso metterci
dentro posso metterci dentro un array
come vedete perché io ho detto che
questa variabile non le sto segnando un
tipo specifico automaticamente posso
metterci dentro quello che voglio
il tipo unknown è stato introdotto
recentemente solo con la versione 3 di
typescript ed è un valore generico un
po' più restrittivo i grandi
guru di typescript suggeriscono quando
non si sa che valore conterrà la
variabile provare ad assegnarle un tipo
unknown
se poi si trovano errori che non si
riescono a risolvere ci sono problemi
non si riesce a risolvere questi
problemi allora ok assegnarle tipo any e
al posto di unknown vi facciamo vedere un esempio di differenza tra l'usare any
e tra l'usare unknown per esempio una
funzione la chiamo mia funzione tre
che accetta un parametro e gli assegni any non ritorno niente poi dentro a questa
funzione io vado a invocare un metodo del parametro passato
dell'argomento passato quindi vado a
dire
non so un metodo che si chiama
saluta allora come vedete siccome io non
so cosa passerò quando invocherò questa funzione posso dire ok a questa
funzione potrebbe avere il metodo saluta
ma potrebbe anche non averlo nel caso io
non ho il metodo saluta perché magari io
invoco questa funzione con un numero
poi mi troverò degli errori e magari farò fatica a risolverli perché
non so bene dove andare a cercare se io
invece di assegnargli un any metto
unknown come vedete typescript subito la proprietà saluta non fa parte di un tipo
unknown quindi è più restrittivo perché
allora se io vado a invocare la funzione
passando come argomento un numero typescript mi dà errore proprio qui
in futuro quando io andrò a usare questa
funzione sarà più difficile sbagliare a
usare questa funzione come vi dicevo i
grandi guru dicono prova usare unknown
se poi vedi che hai problemi non riesci a risolvere il problema
metti any è il tuo codice va bello e
tranquillo finché poi
non vai a usare la funzione con degli
argomenti sbagliati
con questo è tutto o coperto tutti i
tipi che possono essere
associati alle varie variabili alle
funzioni e ci sentiamo alla prossima
ciao
File del video: