Trascrizione: (click per espandere)

salve a tutti questo video vedremo come
type script lavora con i moduli e i
moduli sono stati introdotti con ecma
script 6 se non vi ricordate bene come
funzionano
vi metto il link in descrizione per
andare a vedere il video dove parlo dei
moduli per javascript e posso già
dire che comunque typescript li maneggia
in maniera molto simile a javascript
quindi non ci saranno molte differenze
magari la differenza maggiore è che se
state lavorando in node e
lavorate scrivendo codice typescript e
usando i moduli poi potete convertirlo
in ecmascript 5 quindi senza moduli e
automaticamente typescript compilerà i
file e usando il require al posto dell
import un'altra cosa da aggiungere è che
se state lavorando per un progetto web
i moduli sono un po' ostici da
usare perché intanto se provate a
convertirli in ecmascript 5 andrete incontro a parecchi problemi
dovete configurare molte cose ecc
quindi vi consiglio se volete usare i
moduli almeno compilarli in ecma script 6
è un altra cosa è che quando typescript
compila
compila i file in javascript non aggiunge
l'estensione .js e questo va bene
per node non va bene per javascript e
quindi dovete aggiungerceli a mano in
descrizione vi metterò anche dei link
dove ci sono delle discussioni riguardo
a questo problema che
sembra che da qualche anno che è sorto e sembra che non vogliono sistemarlo
la soluzione più semplice di tutte se
lavorate in ambito web è usare web pack
per esempio che è una libreria che
prende tutto il vostro codice javascript
lo mette insieme in un solo file
javascript e quindi poi il vostro sito
web dipenderà solo da un file javascript
quindi il browser non dovrà andare in
cerca delle varie variabili
metodi e classe in diversi file io
normalmente per progetti web in typescript uso webpack è consigliato
dal sito ufficiale di typescript quindi
date un'occhiata se potete usare
web pack forse in futuro faro' anche un
video
allora andiamo a vedere intanto come si
usano i moduli in typescript allora io ho
creato una cartella l'ho chiamato
video 7 dove ciò due file video sette
video 7bis, in video 7bis scriverò le cose
da esportare e nel video 7 e andrò ad
importarle così potete vedere come si
esporta come si importa allora
comincio con l'esportare magari una
costante la chiamo giorni e ci assegno
un numero 365 poi esporto un'altra
variabile la chiamò let ore e metto 24
piccolo appunto non sto specificando il
tipo perché voglio passare il tipo in
maniera implicita giusto per cambiare
e poi voglio esportare una
costante che però sarà una function
expression quindi la chiamo totale ore e
specifico che mi ritorna un numero fat
arrow e qui vado a scriverla ritorna
giorni moltiplicato ore ecco qui e poi
vado ad esportare anche una classe che
sarà un'esportazione di default e la
chiamo data la classe e'
semplicissima perché non voglio parlare
delle classi qui e qui ci metto solo un
console log e qui metto oggi e' il
qua metto new date
ecco qui quindi io qui sto esportando
una costante e esportando una variabile
esportando una function expression
esportando una classe che ha anche la
keyword default quindi sarà il nostro
valore di default quando esportiamo da
questo modulo
una cosa a cui stare attenti e comunque
adesso lo vedremo quando ne importiamo una volta esportate che abbia
dichiarato una variabile cost che io
l'abbia dichiarata let comunque non
potrò cambiare il valore quindi tutto quello che è sporto
verrà maneggiato come una costante
comunque adesso andiamo a vedere
come importare allora per importare il
valore di default
voglio importare
data from video 7 bis per importare i
valori che non sono di default posso
usare l'asterisco la chiamo tempo
from quindi 7 bis
ok ancora se non vi ricordate andate a
vedere il video in cui parlo dei moduli
come funziona tutto questo adesso come
vi dicevo prima io voglio andare a
provare a cambiare le ore e gli assegno
non so 45 come vedete lui mi dice guarda
che non puoi cambiare è un valore di una
variabile che è stata importata perché
quella proprietà è readonly e quindi non
si può fare posso però andare a
visualizzare o comunque a lavorare con
il suo valore quindi posso fare tempo
ore poi posso andare anche a
visualizzare i giorni
poi posso andare a visualizzare o meglio
a invocare la funzione totale ore in
questa maniera qui e poi possono anche
andare a
crearmi una variabile data a cui assegno
il tipo data che la classe che stavo
esportando di default e qui a new data
ecco qui come vedete io sto esportando
da un file e e importando in un altro
file
adesso io salvo e adesso vado a vedere
come mi è stato compilato questo
codice qui vi ricordo che io sto ancora
compilando in ecmascript 5 e
quindi questo qui è quello che sto
esportando è questo qui è quello che sto
importante come vedete mi è stato
modificato l'import in require perché
appunto e sto
i moduli sono stati importati o meglio
implementati in javascript con
ecmascript 6
allora se io adesso sto usando node
faccio vedere come funziona e vi faccio
vedere l'output di questo file come
vedete mi funziona tutto perfettamente
però come vi dicevo se dovete usarlo in
un progetto web qui dovete cambiare
tutto diventa un po' un problema
facciamo che adesso io vado a compilare
il tutto in ecma script 6
e allora io vado nel mio tsconfig e
aggiungo una proprietà al compileroption
una proprietà che si chiama
target e li metto ecma script 6
quindi adesso io andrò a compilare il
mio typescript in ecmascript 6
torniamo qui dovrebbe avere già
compilato andiamo a vedere eccolo qua
come vedete il video 7 js è stato
compilato in ecma script 6 quindi
viene mantenuto l'import però ancora
come vi dicevo io adesso posso andare a
usare questo file importarlo dentro al
mio index.html
quindi io posso dire script type modulo
modulo è questo qui il video 7
però avrò comunque un errore perché nel
video 7 js non è specificata
l'estensione del file che sto importando
quindi devono metterla giù a mano o andate a vedere il link che vi mette in
descrizione c'è gente che consiglia di
creare uno script che automaticamente
aggiunge l'estensione eccetera
però quello che vi consiglio io e di
provare usare webpack io provo andare ad aprire questo file nel browser
ecco qui è come vedete è stato eseguito
il codice che era stato scritto dentro
al mio file esportato è importato nel
video 7
ultima cosa velocissima se state usando
node e dovete importare
non so una libreria esterna eccetera che
non ha una definizione in ts parleremo
della definizione in un altro video
comunque se dovete importare librerie
esterne eccetera anche se state
importando usando i moduli per
importarle però se questa libreria non
permette di essere importate in quella
maniera potete ancora usare il vecchio
metodo quindi non so chiamo const fs
require fs in questa maniera
quindi potete
mescolare i moduli con
la vecchia maniera di importare le
librerie esterne con questo è tutto ci
sentiamo alla prossima ciao