Trascrizione: (click per espandere)

salve a tutti in questo video vedremo
come configurare un progetto per usare
type script
allora io ho già creato un folder che ho
chiamato tutorial ts e dentro vado
aprire un terminal
ecco qui e come vedete con il
terminal sono dentro al mio folder e
come vi ho detto nel primo video dovreste
avere già installato nel vostro computer
node js quindi se io scrivo node -v
che sta per version vedo la
versione del node che ho installato
che tra l'altro la mia anche un po
vecchia ma non importa
poi quando installate node
automaticamente vi viene installato
anche npm quindi se io scrivo npm
trattino v posso vedere la versione
npm installata è npm sta per node
package manager ed è un tool che vi aiuta
installare maneggiare librerie che poi
vengono usate da node TS e' una di
queste librerie e come vedete
io sono già sul sito di npm
questa è la pagina di typescript ove potete
trovare delle informazioni riguardanti
questa libreria quindi per esempio il
numero di download
l'ultima versione disponibile eccetera
allora adesso io vado a inizializzare il
progetto per inizializzare il progetto
scrivi npm init
qui mi vengono fatte una serie di
domande da npm che io vado a premere
sempre enter ma voi potete cambiare i
dati che vi suggerisce ma sta a
voi
e poi lui dice io andrò a generare
una configurazione che sarà questa qui è
io dico ok allora enter ancora adesso se
voi andate dentro al vostro folder
vi troverete un nuovo file che si chiama
package.json con la configurazione
che avete inserito dal terminal e questo
file serve a npm serve a node per
lavorare con il vostro progetto
se il vostro è un progetto web e poi
potrete tranquillamente potrete
spostare i file html i file javascript
che avete dentro questo progetto e non
vi serve il package.json
se il vostro è un progetto node allora
questo package.json vi serve adesso vado
installare typescript allora per
installare typescript lo potete
installare in due maniere per
può essere istallato
in maniera globale come viene suggerito
da questa pagina qui quindi col trattino
g
e quindi vuol dire che verrà installato
vicino a dove installato node e sarà
disponibile in tutti i vostri progetti
se la seconda maniera per installarlo e
installarlo specifico per questo
progetto che è quello che farò io
comunque è una scelta vostra se volete
installarlo in maniera globale o
specifico per questo progetto
allora io vado per installare
per questo progetto si scrive npm
install --save-dev e poi il nome della libreria che volete
installare che è typescript un paio di secondi
e vien installata come vedete adesso io
mi trovo che nel package.json è stato
aggiunto questo oggetto qui che
mi dice che tra le devDependencies quindi
le librerie che servono per lavorare al
progetto ho installato typescript le
librerie che servono per costruire il
progetto vengono listate sotto
devdependencies le librerie che servono per far funzionare il progetto quando è in
produzione con una volta pubblicato
vengono listate sotto la proprietà
dependencies però al momento io non ne ho poi vi trovate anche questo package
lock che è un file che a voi
normalmente non vi serve e serve
a npm e poi vi trovate anche una nuova
directory che si chiama node_modules
dentro a questo folder è stata istallata la libreria ts ed ecco quindi adesso il
progetto il vostro progetto è pronto per
usare typescript prima di cominciare a
scrivere un paio di righe in codice
typescript vi faccio vedere un esempio
del codice javascript
prima ha scritto in javascript e poi
scritto in typescript allora io vado
aprire atom che non è configurato per
lavorare con typescript e diciamo che vado
a scrivere un array ecco qui per esempio
dentro a questo array ci metto dei numeri 10 poi cento mille e poi 10.000 e adesso
diciamo che voglio andare a visualizzare
per ogni elemento del mio array
il numero di cifre che compone il numero
per esempio il primo numero sarà a due
cifre secondo numero sara' tre cifre
quattro cifre e così via
e decido di usare il metodo for each
ecco qui adesso io dico ok il metodo
forEach() mi ricordo che accetta una
call back la call back ha degli argomenti
bisogna passare degli argomenti tra cui
c'è l'elemento che c'è dentro al mio
array e anche il suo indice posso
passare però non mi ricordo se devo
passare prima l'indice poi l'elemento
prima l'elemento e poi all'indice come
ordine dei miei argomenti
quindi cosa faccio devo andare online
devo andare controllare documentazione
diciamo che l'ho fatto ho perso due tre
minuti controllando la documentazione
adesso so che dentro alla mia
callback devo passarci due argomenti
il primo è l'elemento del mio array
secondo e l'indice e adesso vado a usare
la console log e adesso l'elemento ho
detto che voglio vedere quante cifre
compongono l'argomento quindi usare
la proprietà length se vado adesso ad eseguire questo codice qui mi
troverei 4 interazioni con valori
indefinito perché la proprietà length
non esiste per i numeri la proprietà
length può essere
usata per le stringhe può essere usata
per gli array non può essere usata per
per i numeri quindi io dovrei adesso
eseguire il codice mi trovo che
indefinito c'è qualcosa che non va
vai a controllare cosa c'è che non va e
quindi perdo tempo andiamo a vedere la
stessa cosa se vado a scrivere in
typescript
metto via atom sono tornato dentro al mio
progetto in typescript
adesso vado a creare un nuovo file e lo
chiamo video3.ts questo ancora il mio
array poi cominciò a scrivere il metodo
for each come vedete già ciò un
suggerimento da visual studio e qua
cosa mi dice mi dice già cosa si aspetta
il mio metodo for each si aspetta una call
back che ha tra i suoi argomenti il
primo argomento deve essere un valore
o elemento del mio array e il secondo
e' l'indice quindi io non devo perdere
tempo andare a cercare la documentazione
online perché già me la sta dicendo
typescript
allora io qui comincio a scrivere la mia
la mia callback index
ecco qui e adesso vado a scrivere console log
elemento metodo proprietà length e come
vedete già mi dice subito che c'è
qualcosa che non va la proprietà length
non esiste per i numeri quindi io non
devo neanche eseguire il codice mi sta
già dicendo che c'è un errore quindi io
sto risparmiando tempo perché mentre
scrivo il codice typescript già
mi dice se ci sono errori oppure no come
fa a sapere queste cose o meglio come
fa visual studio a sapere a darmi
suggerimenti a sapere queste cose perché
type script per ogni oggetto per ogni
proprietà per ogni metodo per ogni api
ha una definizione scritta quello che
vedete qui che si vedeva prima è la
definizione del metodo for each io posso
vedere
dove è descritta se sono su mac si
fa command+click o se sono sul windows o
linux si fa control+clic sul metodo
for each e come vedete mi viene aperto
un file che si chiama libreria
ecmascript five definizione typescript
dove viene descritto il metodo for each
eccolo qui come vedete ciò anche altri
metodi map poi ciò filter tutti i metodi
che possono essere usate per gli array
io ho una definizione per tutti loro
posso trovare quella definizione anche
dentro al node_modules typescript se io
apro qui mi trovo un folder chiamato
libreria e se scrollo giu qui
ho tutte le definizioni per tutti i
metodi per tutte le versioni di ecma
script per esempio c'è anche
l'ultimissimo questa qui del 2020 e
qui ho listato tutto quanto
adesso andiamo a vedere come si può
convertire un file typescript
quindi codice typescript in codice
javascript come vedete questo qui è
codice typescript scritto in
questa maniera è uguale a quello
javascript
vedremo più avanti come scrivere type
script in maniera un po' più restrittiva
però per il momento va bene questo
allora come faccio se avete installato
typescript in maniera globale non dovete
fare questo
se lo avete installato solo per questo
progetto cosa dovete fare riaprire
il package.json sotto la proprietà scripts
dovete aggiungere un nuovo
comando e io lo chiamo compile
e scrivo tsc video3.ts
allora come dicevo se lo avete
installare in maniera locale
dovete fare questo se lo avete
installato in maniera
globale non vi serve allora adesso io
per eseguire questo comando deve usare
npm allora si scrive npm run e il nome
del comando compile
se invece lo avete installato in maniera
globale
potete scrivere direttamente tsc
video3.ts
ed è la stessa cosa comunque io faccio
così npm run compile ok
come vedete la mia
operazione è stata finita e adesso se
vado a vedere dentro il mio folder mi
trovo un file che si chiama video3.js
ed entro qui mi trovo il codice
javascript praticamente questo file ts
è stato convertito in js
ecco lui se voglio andare a visualizzare
questo codice posso
aggiungere un file e lo chiamo
index.html per esempio allora qui metto
dentro un doctype vado un po' veloce
altrimenti ci mettiamo troppo tempo html
qua ci metto il body qua ci metto un h1
metto imparare ts e poi ci
metto dentro lo script la source che
sarà video3.js ecco qui adesso io
salvo apro questo file nel mio browser
eccolo qui imparare ts e se vado a
vedere la console
mi trovo le iterazioni quindi il codice
javascript eseguito posso anche eseguire
questo codice qui
direttamente con node per fare questo si
scrive il node e poi il video3.js e
come vedete mi viene eseguito il codice
direttamente nel terminal
e questo è come scrivere codice type
script e poi compilarlo in codice javascript
questo è la maniera più semplice per
avere un progetto typescript
funzionante vi faccio vedere altri
esempi per esempio se io voglio
visualizzare
le proprietà dell'oggetto document come
vedete se io adesso faccio command perché sono su mac clic su document mi
troverò tutta la definizione di
tutti i metodi e le proprietà
dell'oggetto document eccole qui se
vedete io e scrollo giu c'è il body
cookie dir domain c'è tantissima
tantissima roba e questo se sono
in un progetto web
se fossi in un progetto node diciamo che
voglio visualizzare le proprietà e
metodi di process come vedete dice non
posso trovare process forse
devi installare la definizione per node
quindi cosa faccio io vado a installare
la definizione di node
clear allora npm install la i sta per
l'install e quindi posso usare una
scorciatoia la voglio istallare sempre
tra le librerie devdependencies
queste librerie qui quindi c'è un'altra
scorciatoia che trattino lettera
maiuscola D quello che prima avevo
scritto --save-dev
può essere accorciato in questa
maniera qui e poi scrivo @types/node
eccolo qua allora adesso se io vado a
vedere nel mio package.json mi trovo
installata la definizione per tutti i
metodi e tutte le proprietà e tutti gli
oggetti che servono per lavorare con node
quindi di default typescript ha tutto
quello che serve per javascript e
javascript in ambito web
se lavorato in progetti node dovete
installare anche questa
definizione qui se adesso io vado a
vedere dentro al mio node_modules mi
troverò questo altro folder che per le
definizioni e qui trovo tutte le
definizioni per usare node quindi file
system buffer crypto eccetera eccetera
eccetera
quindi adesso se io torno qui come
vedete qui non si lamenta più perché
adesso ts sa o meglio visual studio sa che
cos'è
l'oggetto process diciamo adesso che io
voglio dare a compilare questo file qui
e quindi cosa devo fare
un'altra volta fare eseguire questo
comando qui che può essere un po noioso
e ogni volta fare questo quindi posso
aggiungere un nuovo comando e lo chiamo
tsc watch eccolo qui e salvo questo e
poi aggiungo anche un altro file e un
file di configurazione specifico per per
typescript allora qui nuovo file
dovete usare questo
specifico nome tsconfig.json e
dentro ci mettiamo un oggetto scriviamo
compiler option questo qui vi faccio
vedere la struttura proprio basilare poi
dedicherò un intero video a questo
file questo tsconfig comunque per il
momento
usatelo così come viene out dir e metto
build e include metto allora andrò a
mettere dentro source adesso vi spiego
un attimo punto ts ok allora adesso io
vado a creare un nuovo folder che
chiamerò source quindi dove vado a
mettere dentro tutto il mio codice
e vado a spostare il mio video3.ts
dentro a questo source ecco qui e
vado a dire adesso quando ts comincerà a
compilare il mio codice vai a
prendere tutti i file type script quindi
quando si usa asterisco vuol dire qualsiasi
file che ha estensione type script
dentro alla directory source e
compila il file e il file che viene
compilato e viene convertito in
javascript me lo vai a salvare dentro a
una cartella che si chiama
build
adesso io vado a eseguire questo comando che si chiama ts watch
come vedete qui mi dice ok io non ho
trovato nessun errore
la cartella build è stata generata dentro ho
il mio file javascript e
però vedete il terminal non ha chiuso
perché adesso io ogni
cambiamento che farò al mio file appena
salvo il file mi verrà ricompilato
subito in automatico quindi il -w
che sta per watch vuol dire controlla
che io cambi qualcosa nei file in typescript
e appena lo faccio tu mi riconverti
tutti i file in javascript
così no ogni volta non devo stare lì a
scrivere ok adesso ricompilami i file
e lo fa lui in automatico appena io
salvo il file e come vedete io posso per
esempio posso dichiarare
un'altra variabile la chiamo x ci
metto dentro del testo appena io salvo
il file come vedete mi viene ricompilato
tutto se adesso vado ad aprire il file
che adesso dentro al build folder mi
trovo la variabile convertita allora di
default typescript converte il codice
in ecma script 5 quindi se vi
ricordate le keyword let e const sono
stato introdotte con l'ecmascript 6
quindi quando type script mi andrà a
compilare questo codice in javascript me
lo trasformerà in es5 e quindi
come vedete lui mi dice ok
la keyword sarà var
io penso di aver coperto tutto per
l'introduzione come configurare un
progetto typescript ci sentiamo alla
prossima ciao