Trascrizione: (click per espandere)

Salve a tutti in questo video andremo
introdurre typescript quindi faremo una
panoramica di typescript è
un superset di javascript cosa vuol dire
superset vuol dire che se voi
pensate a javascript come a questa
circonferenza con all'interno tutte le
funzionalità tutto ciò che può essere
fatto in javascript typescript è qualcosa
di più grande che ha al suo interno
javascript quindi con type script si può
fare tutto quello che si può fare con
javascript e in più ci sono altre
funzionalità potete pensare anche che si
ci sono dei superset come typescript
non è il primo tentativo di fare un
superset di javascript ma di sicuro è
quello più famoso quello più usato è
quello che anno dopo anno sta prendendo
sempre più piede
ci sono anche dei subset di typescript
e scusate di javascript che sono
linguaggi che riproducono alcune
funzionalità di javascript ma non
riproducono tutto ciò che può essere
fatto con javascript ce ne sono
tantissimi ad esempio qualche tempo fa
mi sono imbattuto in un subset che si
chiama jsfuck che è un progetto molto
simpatico che sicuramente non può essere
usato per fare grandi cose ma è una cosa
molto simpatica vi metto il link in
descrizione è giusto così per curiosità
e cos'altro fa typescript aggiunge i tipi
da cui proprio ne deriva il nome type
script praticamente
una dei punti di forza di
javascript è la sua flessibilità
soprattutto quando si ha a che fare con
le variabili eccetera quindi io dentro a
una variabile in javascript posso
metterci qualunque valore e posso
anche andare a sostituire il valore per
esempio se io in una variabile avevo
messo dentro una stringa dopo si possono
mettere dentro un numero possono
metterci dentro una funzione possono
metterci dentro un oggetto javascript non
si lamenta typescript aggiunge i tipi
per esempio delle variabili quindi se io
dico questa variabile può contenere solo
numeri e poi provo a inserirci una
stringa typescript mi dà un errore questa
maniera di comportarsi con i tipi
ricorda altri linguaggi di
programmazione come java con typescript
si possono aggiungere i tipi anche per
esempio ai parametri delle funzioni e si
può anche dire che tipo di valore viene
ritornato da una funzione comunque
vedremo tutto nei prossimi video
normalmente typescript viene usato
in grandi progetti proprio perché
aggiunge questo diciamo questo strato di
complessità in cui non di complessità di
rigidità con cui poi si quando si lavora
con grandi progetti poi è più
difficile sbagliare perché non ti
permette di fare degli errori mentre
scrivi il codice ad esempio se io dico
che questa funzione può
essere invocata solo con un argomento
che deve essere un numero se io sto
usando javascript posso andare invocare
la funzione con un qualsiasi altro
valore e poi mi accorgo solo nel momento
in cui vado ad eseguire il codice che
c'è l'errore mentre con typescript io
mentre scrivo il codice e sto scrivendo
che quella funzione magari viene
invocata con una stringa typescript
subito mi dice
non posso usare quella funzione con una
stringa e quindi io non devo perdere
tempo e poi andare ad eseguire la
funzione per accorgermi che c'è un
errore lo trovo direttamente mentre sto
scrivendo il codice typescript può
essere usato per tutti i tipi di
progetti che usano javascript quindi per
progetti web e per progetti in node js
durante i prossimi video io vi farò
vedere come usare le funzionalità di node
è come usare le stesse funzionalità in
progetti web non ci sono grandi
differenze typescript è in continua
evoluzione
proprio in questi giorni sta per essere
rilasciata la versione numero la
versione 4 che è molto simile alla
versione 3 hanno fatto solo un po di
pulizia del codice eccetera è però ogni
ogni 2 3 mesi viene rilasciata una nuova
versione e quindi è sempre lì che si
rinnova che aggiunge funzionalità
eccetera
dopo la compilazione si ha codice js cosa
vuol dire che io scrivo codice type
script scrivo codice in file .ts
però poi il codice che scrivo non
viene usato direttamente nel browser o
nel mio progetto in node devo
trasformare questo codice in codice
js e non lo faccio manualmente lo fa il
compilatore di typescript quindi
cosa vuol dire che typescript riesce a
convertire il codice typescript che ho
scritto io in codice javascript
e mi converte il file .ts in file .js e tutto il codice che avevo
scritto viene convertito in file
javascript in codice javascript quindi poi
io posso prendere questi file javascript
e usarle nel mio progetto in node o
usarli nel mio browser eccetera
quindi la trasformazione del codice da
typescript a javascript viene fatto
con un compilatore ed è per questo che
vi serve aver installato node nel vostro
computer perché il compilatore typescript
ha bisogno di node per funzionare
pro e contro adesso vedremo alcuni
pro e contro nell'uso di typescript
allora in typescript vengono essendo
typescript in continua evoluzione
c'ho sempre nuove features e per esempio
ecma script rilascia nuove feature
per il codice javascript
di anno in anno e con typescript
si riesce ad usare queste feature ancora
prima che vengano rilasciate quando
ancora magari sono in beta sono ancora
sotto test per esempio l'ecma
script del 2020
alcune feature dell'ecmascript 2020 potevano già essere usate in
typescript
nel 2019 può essere usato con altri
framework per esempio se vuoi usate
lavorate in ambito web e usate react
usate angular potete usare typescript
per lavorare nei vostri progetti
trovate tantissima documentazione online
riguardo a questo è flessibile nel uso
quindi a diversi livelli di rigidità
quindi io posso dire
magari non ho molta pratica nell'uso di
typescript cerco di usarlo in maniera non
troppo rigida perché appunto io sono
abituato alla flessibilità che mi permette
l'uso di javascript e poi a mano a mano
che prendo dimestichezza con typescript
riesco ad aggiungere
rigidità e quindi instaurare un progetto
che è molto rigido e che in cui è più
difficile sbagliare mentre il
programmatore scrive il codice
detto questo non vuol dire che con
typescript non si fanno errori
i bug ci saranno sempre però in teoria
si riesce a
evitare alcuni errorini mentre il
programmatore scrive il codice con type
script si può compilare il codice in
diverse versioni ecma script di javascript ad esempio io posso scrivere del
codice usando le ultime features
introdotte dall'ecma script 2020 però
posso andare a trasformare questo
codice in javascript con una versione di
ecma script più vecchia per
esempio con la versione
es5 o con es6 questo
cosa mi permette di fare mi permette a
me che sono il programmatore di usare le
ultime feature e poi trasformando il
codice in una versione vecchia di codice
javascript non ho il problema che questo
codice non possa essere eletto per
esempio dai browser un po più vecchi
quindi io posso scrivere il codice come
se avessi a che fare con
browser super nuovi però poi lo
trasformo in una versione di java script
vecchia in maniera che possa essere
letto da tutti i browser senza avere
problemi di compatibilità di default
type script usa le funzionalità ecma
script 5 con la sintassi ecmascript 3
questo è una cosa un po difficile da
capire al momento praticamente quando io
vado a compilare il mio codice da type
script javascript e scelgo una versione
e non scelgo nessuna versione di ecma
script con cui deve essere compilato
automaticamente le funzionalità che
typescript riesce a manipolare sono quelle
di ecma script 5 quelle introdotte da
es5 e la sintassi del codice sarà
ecmascript 3
io posso anche fare dei mix diversi
vedremo qualche esempio quando
parleremo di della configurazione del
compilatore di typescript
io posso dire ok voglio usare le
funzionalità dell'ecma script 6 con la
sintassi dell'ecma script 5 posso fare
dei mix e settare il compilatore per
fare questo se non setto il
compilatore e lo lascio in default di
default troverò le funzionalità da
es5 e la sintassi da es3
typescript compila la sintassi ma
non le funzionalità e quindi non ci sono
polyfill vuol dire che
per esempio io posso usare un esempio
banale posso usare le funzioni asincrone
che sono state introdotte con ecmascript 8
e posso trasformare il mio
codice in codice javascript con versione
ecmascript 5 quando le funzioni asincrone non esistevano però sto avendo a
che fare con la sintassi quindi typescript
riesce a trasformare la sintassi da
funzione asincrona a call back
come venivano usate nell'ecmascript 5
non può trasformare le funzionalità ad
esempio una degli ultimi metodi
introdotti dall'ecma script 2020
un metodo degli array introdotto da
questa ecma script è per esempio il metodo flat()
questa è una funzionalità che prima non
esisteva quindi non posso
trasformare questa funzionalità in
ecma script 5 perché al tempo proprio non
esisteva quindi io posso trasformare la
sintassi del mio codice in diverse
versioni di ecma script ma non posso
trasformare la funzionalità in una
versione inferiore all'ecmascript con
cui è stata introdotta per fare questo
si devono usare dei
polyfill ci sono diverse librerie per
fare questo se usate babel in
javascript avete già un'idea di come
funziona tutto ciò typescript permette la
graduale migrazione dei progetti
javascript e se ad esempio io ho un
progetto javascript e lo voglio
trasformare in progetto typescript
perché sta diventando sempre più grande
e faccio fatica a gestire tutto il
progetto con tutte le librerie eccetera
posso cominciare a trasformare file by
file da javascript a typescript posso avere
soprattutto all'inizio
un mix di file in typescript
javascript riesco a tenere tutto insieme e trasformare il progetto un po alla
volta finché da javascript e' convertito tutto quanto in typescript
typescript per configurarlo all'inizio per
settare tutto quello che deve essere
fatto secondo le esigenze del
programmatore fa perdere un po di tempo
all'inizio nel senso che all'inizio del
progetto per settare tutto io devo
perdere nel tempo però in teoria poi
questo tempo che vado a perdere
all'inizio lo vado a recuperare proprio
mentre vado scrivere il codice perché
appunto come facevo un esempio prima
se io
devo scrivere una funzione che accetta
solo un numero però ci prova a passare
una stringa typescript dice subito che
c'è l'errore quindi non devo stare lì a
a perdere tempo andare ad eseguire il
codice eccetera typescript su progetti
che magari sono stati costruiti in typescript che poi non vengono manutenuti e
può diventare un incubo perché se create
un progetto e poi lo lasci lì non ci fai
manutenzione per diversi anni poi quando
lo vai a prendere può diventare un
problema non problema insormontabile
comunque ti fa perdere parecchie ore di
lavoro per cercare di riconfigurare
tutto quanto con tutte le dipendenze
che sono necessarie eccetera
riaggiornare tutto quanto ti fa perdere
parecchio tempo
e poi c'è un altro problemino che il
tempo di compilazione se avete per
esempio qualche centinaio di file con
qualche centinaio di riga di codice
l'uno non ci sono grossi problemi e
quando il compilatore trasforma il
codice da type script in javascript ci
mette qualche secondo ed il
gioco è fatto
se invece cominciate ad avere progetti
di migliaia e migliaia di file con
migliaia e migliaia di righe di codice
anche il tempo di compilazione aumenta e
qui dipende dal progetto che
avete può cominciare a diventare un
problema perdere il tempo a compilare
tutto questo codice per esempio non so
se avete sentito parlare di
deno che è praticamente tra
virgolette la nuova versione di node che
internamente
i programmatori quando hanno costruito
questo ambiente di sviluppo hanno
usato typescript comunque adesso
cominciano ad avere problemi col
tempo di compilazione proprio perché si
comincia ad avere migliaia e migliaia di
file
con questo è tutto questa è la
panoramica d type script dal prossimo
video vediamo proprio come usare il
codice typescript
buon proseguimento