Sono tecnico tecnico di Andrew Salzburg
collega a Microsoft e sono qui per parlare
a proposito di dattiloscritto che è un progetto
abbiamo lavorato per gli ultimi due
due anni e mezzo è così dattiloscritto
sulla soluzione di un problema che abbiamo
sempre più sentito dal nostro
i clienti che conosci in particolare
gli ultimi cinque anni i clienti e anche
i team interni continuano a dirci come
è difficile scrivere applicazioni di grandi dimensioni
in JavaScript diversi motivi tu sai
uno è che quel javascript davvero
non è mai stato progettato per scrivere in grande
applicazioni lo sapevi che era così
è stato un po ‘come originariamente previsto per
questi dieci gestori di eventi di linea e ora
stiamo scrivendo diecimila o cento
migliaia di app di linea in esso e il
il linguaggio non ne ha davvero
strutturazione di applicazioni su larga scala
concetti come classi o moduli e
inoltre è interamente digitato in modo dinamico
il che significa che non esiste un tipo statico
informazioni al di fuori delle quali possiamo alimentare
utensili intelligenti e se pensi
su ciò che alimenta il
ID intelligenti che tutti noi usiamo oggi
è davvero un tipo di informazione statica che
rende possibile eseguire il completamento del codice
rifacimenti sicuri che trovano tutti i riferimenti
vai alla definizione eccetera eccetera così
due due anni e mezzo fa, dove noi
stavano pensando a dove andremo dopo
con gli strumenti di sviluppo JavaScript noi
pensavo che sarebbe stato davvero pulito se avessimo potuto
rafforzare JavaScript ma con quella chiave
concetti che mancano per
sviluppo su larga scala come le classi
moduli digitando staticamente ma ma
azioni ma ma per farlo in un modo che
non sacrifica la cosa inerente
questo rende JavaScript così interessante
cioè standard aperti multipiattaforma web e
così via e ed è questo che cosa
dattiloscritto è un linguaggio per
sviluppo di JavaScript in scala applicativa
quindi è un linguaggio per il
o JavaScript della scala di applicazione
sviluppo al livello successivo o più
la descrizione tecnica è dattiloscritto è a
superset di JavaScript che compila
JavaScript semplice e lo fa
compilatore stesso e il codice che esso
produce funziona su qualsiasi browser su qualsiasi host
qualsiasi sistema operativo e il compilatore
e i servizi linguistici associati e
biblioteca Taipings e così via sono tutti
open source abbiamo inserito questo progetto
l’aperto circa due giorni fa e ciò che io
sono qui fondamentalmente lo sai
disponibile pubblicamente in installazione di esso
quello che proveremo a suonare
con ora così dattiloscritto inizia con
JavaScript tutto il codice JavaScript è valido
codice dattiloscritto perché siamo puri
superset di JavaScript e questo significa
che puoi semplicemente copiare e incollare
JavaScript in un file dattiloscritto e
quindi lavorare con esso là significa anche
quel dattiloscritto funziona con tutto il
quadri e librerie esistenti che
sono disponibili là fuori oggi come
nodecore o sottolineatura backbone jQuery
prototipo etc etc ce ne sono molti
ne arrivano di nuovi praticamente ogni giorno
quindi la cosa che aggiungiamo sopra è
classi di tipizzazione statiche opzionali e
moduli braccio e quelli sono davvero una sorta di
le cose che ci permettono quindi di
costruire grandi strumenti perché sono i
Mancano cose che alimentano il
IDE oggi braccio
la cosa bella però è che c’è
a costo zero tutto questo tutto il dattiloscritto
è puramente uno strumento del tempo di sviluppo una volta
ti accolli e ti viene lasciato in chiaro
JavaScript e non c’è runtime
componente che deve essere presente in
Per eseguire il codice generatore
Infatti compiliamo semplicemente due idiomatiche
JavaScript il JavaScript che vorresti
hai scritto se volevi emulare
classi o o modulo
e il codice finale funziona come ho detto in qualsiasi
browser qualsiasi host su qualsiasi sistema operativo, quindi facciamolo
cerchiamo in realtà di fare un po ‘di
provare le canzoni e vedere che cosa questo assomiglia a
l’azione qui è il sito web dattiloscritto
beh, in realtà è una copia locale che ho
nel caso in cui abbiamo perso la connettività, ma
ma questo è quello che sembra e noi siamo
andando a giocare con dattiloscritto in
il campo da gioco dattiloscritto che è
fondamentalmente una pagina web dove puoi dove
è possibile digitare a macchina e vedere la
output compilato in una finestra su
lato ho intenzione di passare qui e afferrare
la mia prima piccola demo e quindi qui vedi
alcuni alcuni JavaScript e qui vedi
l’ output compilato che capita di essere
esattamente lo stesso perché siamo solo un
superset di JavaScript ora se si guarda
a questo codice c’è qualcosa di divertente
riguardo a questo codice, voglio dire, sono come
prendendo un parametro X e sto aggiungendo a
proprietà o impostazione di una proprietà ma
Lo sto anche mettendo insieme ma hey
questo è JavaScript valido solo così
capita di non essere significativo ma lo è
valido ora ora sarebbe bello e andiamo
diciamo per esempio che sapevo che X era
sta per essere una stringa che sarebbe sicuramente
bello se potessi in qualche modo indicarlo
e sai che non è come siamo
inventando qualcosa di nuovo in questo senso
sapere ad esempio se usi uno strumento come
Chiusura di Google dove metti tipo
annotazioni nei commenti ci sono
sono strumenti in grado di controllare queste cose
per te ma avendo il tuo sistema di tipo
nei commenti non è particolarmente
favorevoli alla leggibilità del codice né
è particolarmente espressivo, lo sai
ci sono un sacco di cose che tu
non posso dire in questi commenti e tu
non posso metterli in tutti i posti che
ti piacerebbe metterli così cosa
dattiloscritto invece ti permette
mettere annotazioni di tipo nel tuo codice così
Posso dire che X è di tipo stringa e quando io
fai in modo che vedi che il nostro IDE inizia a
illuminare dovrei dire che quello che
si sta alimentando sotto questa casella di modifica
che sto digitando è il dattiloscritto
compilatore e il linguaggio dattiloscritto
servizio
perché il dattiloscritto è scritto in
dattiloscritto e quando lo compili tu
ottenere Javascript e si può solo usare quella
ovunque e così è quello che siamo ciò che
stiamo facendo qui e quindi la prima cosa
si vede è che otteniamo qualcosa qui
quello dice che non ci sono proprietà del nome su
digita una stringa che è vera lì
non vediamo anche se passiamo il mouse su V
che abbiamo inferito quella stringa più
string è una stringa e quindi V è di
digita la stringa e vediamo che l’avviso è a
cosa che prende una stringa e ritorna
nulla e quindi è valido per passare V
ad esso ora lasciami provare a sbarazzarmene
linea ed errore qui e proviamo uno di
l’altro numero di tipi primitivi per
esempio e ora vediamo che siamo
inferendo che il numero più il numero è a
numero e ora stiamo cercando di passare a
numero a un metodo che si aspetta una stringa
e che a sua volta è anche un errore così così
eccone altri che conosci
il controllo statico dei tipi si verifica
proviamo a usare un bool e passo e ora
vediamo che l’ operatore plus non può essere
applicato a bool
beh, in realtà lo può fare in JavaScript
solo così capita che non si ottiene un
risultato significativo giusto e così in a
sentire di cosa si tratta sta provando a
per sottrarre quel sottoinsieme significativo di
Java il sottoinsieme semantico di JavaScript
questo ha un senso e questo è fondamentalmente
cosa cosa cosa cosa stiamo facendo qui
in questo momento permettiamo anche di più
tipi complicati come una gara per
esempio posso dire che X è una stringa
array e ora quando indicizzo in X e
premi punto che vedi che lo sappiamo
ci sono stringhe e quindi possiamo
mostra tutti i metodi che sono
disponibile su stringa e non solo loro
nomi ma anche le loro firme quindi noi
può vedere che l’ app di codice di assistenza è una cosa
che prende un indice e che è il numero
e restituisce un numero e così via altro
i modelli tipici che sono interessanti sono
potremmo dire che X è una funzione che richiede
nessun argomento e restituisce una stringa e
ora quando lo chiamiamo e diciamo di nuovo punto
vedi che otteniamo il completamento dell’istruzione ma
ovviamente una cosa è davvero
è interessante avere la capacità di
descrivere una forma di oggetto qui per
esempio sto dicendo che whoops that my
la funzione accetta una X che è un oggetto
che ha una proprietà A e una B e ora
quando dico X dot vedete che otteniamo
completamento delle istruzioni qui X a XB e così via
avanti ora potrei anche voler dare un
nome a questo tipo strutturale o questo
tipo anonimo quindi vedi che puoi scrivere
tipi solo in linea ma ovviamente puoi
anche il nome li penso di avere questo
piccolo esempio qui che ti mostra come
potresti scrivere un’interfaccia con
due proprietà in esso è davvero giusta
interfacciare qui penso più come sto
scrivere un tipo di oggetto il cui nome è
cosa e ha due proprietà e lascia
ora provo ad esempio e dico bar n
equivale al processo di due punti 10 virgola B
colon ciao
per esempio ora vale un paio di cose
notando qui prima di tutto se sei stato
seguendo oltre nel generato
JavaScript si vede che il JavaScript
generiamo è davvero solo il
JavaScript che scrivi – il tipo
annotazioni e – la dichiarazione del tipo
così tutti che è lì si sa per
convalida e IDE e utensili sake e
quindi si ricompila ora
l’altra cosa che noterai qui se noi
se proviamo a guardare un po ‘di questo
programma quindi abbiamo definito a essere un
numero e qui restituiamo X punto a quale
significa che abbiamo dedotto che restituiamo a
numero che a sua volta significa che possiamo
dedurre che il processo è una funzione che
prende una cosa che restituisce un numero
che a sua volta significa che quando chiamiamo
processo possiamo dedurre che n è un numero
e così vedi come scrivi
scorrere attraverso solo poche annotazioni e
allora possiamo fluire attraverso il codice
una volta che sappiamo cosa sta succedendo farmi provare
per mostrare qui ciò che succede anche
per esempio diciamo che aggiungo un extra
proprietà per il mio tipo di interfaccia qui ora
noterai che ho degli errori qui
dice che il processo è manca uno dei
uno dei parametri e potrei risolvere
aggiungendo dal parametro C ma I
potrebbe anche indicare invece che C è un
parametro opzionale quindi questo è un modello
questo è molto comune in JavaScript dove
prendi dire borse di opzioni che sono a
un sacco di opzioni ma in realtà non lo fai
Devo specificare tutti loro giusto così
qui stiamo dicendo che a e B lo sono
obbligatorio ma C è facoltativo se do un
C deve essere un bool se do una C che
non è un bool ora è un errore, quindi anche noi
possiamo in qualche modo esprimere alcuni dei
parti più complesse di ciò che accade
in JavaScript fammi provare effettivamente
prendi questo pezzo di codice qui sono solo
andando a copiarlo e poi passiamo
allo studio visivo e prendiamoci
un file dattiloscritto vuoto così ora parte di
dattiloscritto la distribuzione è un plugin
per visual studio che usa il compilatore
e il servizio linguistico per accendere tutti
queste strutture intelligenti nell’IDE
come ho detto questa roba è tutto open source
quindi puoi usarlo altrove dove
hai visto un esempio che sto usando nel web
browser che qualcuno potrebbe costruire un
plug-in di eclipse e fare la stessa cosa
Sto per incollarlo qui e
quindi continua a giocare con il nostro codice in
Qui
quindi una cosa che puoi esprimere
le labbra nei tipi sono i metodi così ora siamo
dicendo che la cosa ha proprietà a e B
di tipo numero e un metodo foo così ora
quando faccio il completamento dell’istruzione vedi
abbiamo un foo e quando apro ricci
mi dice quale sia la firma di quello
ragazzo è e così via e di nuovo qui possiamo
oltre a questo ora torniamo a
stringa perché foo restituisce la storia noi
in realtà ti permettono anche di esprimere
sovraccarichi quindi posso dire che c’è un dado
c’è davvero un metodo che è foo
quando lo dai una stringa restituisce a
stringa e quando gli dai un numero,
restituisce un numero che accade molto spesso
in JavaScript per esempio mi piace
pensa a jQuery e ad un oggetto dollaro
ha sette diversi sovraccarichi che tu
può se gli dai una funzione allora
fa questo se gli dai una stringa
lo fa se gli dai un sacchetto per oggetti
fa questa altra cosa e così via e
quindi è importante essere in grado di modellare
al sistema di tipi in modo che possiamo seguire
e quando dici che punto su quel dare
si le informazioni sul tipo di nuovo a destra in modo
ora se guardiamo qui se dico X dot foo
vedrai che ora ce ne sono due
sovraccarichi sono oh questo è davvero e
comunque ah
quindi se ti do un numero qui vai
quindi elaborare ora restituisce un numero ora
questa roba qui in realtà R è davvero la
come scrivere questo, ma così foo quello che sono
davvero dicendo qui con questi due
sovraccarico è che c’è una proprietà foo
che ha due possibili firme di chiamata
uno che prende una stringa e restituisce a
quantità di stringhe ci vuole un numero e
restituisce un numero ma posso descriverlo
ulteriori cose sulla mia funzione per
esempio ha anche una proprietà data così
e questa è di nuovo roba che succede così
ora quando dico foo dot lo vedrai
c’è una proprietà dei dati, ma posso anche
chiamalo con due diversi sovraccarichi e
così posso modellare tutte queste cose pazze
che si verificano nelle librerie JavaScript in
Infatti, per completezza, lasciami fare
aggiungo un altro paio qui potrei potrei
ora definisci anche che quella cosa può essere a
funzione di costruzione che prende una stringa
e restituisce elementi e quando indicizzi
in esso ottieni le date e così via e
ora cose così folli quando dico nuova X qui
dice oh devi darmi una stringa e
quando si fa poi ho intenzione di tornare e
menta ecc. ecc., quindi possiamo fondamentalmente modellare
tutte queste cose che accadono nel
JavaScript jQuery Dom tutti in tutto il
quadri okay lasciami sbarazzarsi di questo
roba e prova a incollare in qualche altro
ecco un esempio un po ‘più avanzato di
digitare inferenza una funzione che si chiude
su una variabile locale e restituisce un
oggetto con un sacco di funzioni
proprietà che usano quello locale e
in questo modo si ottiene la privacy in
JavaScript è un modello molto comune
giusto se tu se guardi in questo pezzo
di codice l’unica cosa che differisce
da JavaScript normale è questo
annotazione qui che dice che questo
la funzione prende un numero ma possiamo dedurre
tutti i tipi da questo così
se si passa il mouse sopra la dichiarazione di ritorno
qui vedrete che abbiamo dedotto che
questo restituisce una cosa che ha tre
proprietà che sono ciascuna di una funzione
tipo che ha determinati tipi di argomenti e
così via e a sua volta fare accumulatore
quindi è una funzione che prende no
argomenti che restituiscono un oggetto letterale
contenente tre funzioni che eccetera
ecc. ecc. , così possiamo riordinare tutto
su e ora quando dico VAR a fare un uguale
accumulatore e poi un punto che vedrai
che c’è un annuncio qui e quello di cui ho bisogno
passare un numero cinque e così via
ora questo mostra come possiamo dedurre
codice che stai scrivendo ma a volte
inferenza, vuoi inferenze per entrare
l’altra direzione che puoi, per esempio
Ho una dichiarazione di un’interfaccia
che vuoi andare all’attuazione e ora
davvero ti piacerebbe fare inferenze
da quello sul codice che sei
che stai scrivendo, diciamo che il mio
fare la funzione di accumulatore qui è
qualcosa che dovrebbe restituire un
bene l’ accumulatore lo vedrai
tutto funziona ora perché in realtà
avere una tipizzazione strutturale qui, quindi il semplice
fatto di scrivere un oggetto letterale che
ha la forma giusta è un’implementazione
di quell’interfaccia non è necessario
per prima cosa dichiari di averlo implementato ma
ma l’altra cosa è davvero fantastica
è che se ho fatto un errore qui come
digitato nel torto
nome della proprietà quindi mi dice che cosa è
sbagliato mi dice che hey sei
la proprietà mancante viene aggiunta dall’accumulatore
ora è qui che gli strumenti diventano veramente
davvero utile immagina che fosse così
un oggetto letterale di 500 righe e fidatevi di me
Ne ho visti molti in JavaScript
codice e c’è qualcosa di sbagliato in
c’è da qualche parte come diavolo fai a te
capirlo destra voglio dire che è quello che
gli strumenti dovrebbero fare per te e
questo è ciò che noi facciamo qui
va bene
un altro posto dove questo tipo di
tipizzazione contestuale che è interessante è ben
in realtà dovrei dimostrare che anche qui
anche se mi liberassi di quel tipo
annotazione che noterai che possiamo ancora
dedurre che il valore è un numero perché
hai detto che stai tornando a
accumulatore e accumulatore ha un ADD
funzione che richiede un numero e
quindi possiamo collegarlo e ancora
scorrere i tipi nell’altro nell’altro
direzione giusta questo risulta essere
utile ad esempio se dico un documento
punto sul mousemove molo che è uno di
gli eventi che puoi gestire sono uguali
funzione di E e quindi aprire ricci
punto e noterete che in realtà
sapere cos’è E qui e il modo in cui lo conosciamo
è perché sappiamo che cosa documento è
il documento è il documento del documento radice
ha una mossa non rimbalzante che prende il mouse
evento e restituisce qualsiasi e quindi noi
può spingere le informazioni sul tipo in E come
un evento del mouse e quindi possiamo dare
hai completato la dichiarazione su E quando tu
dì punto e così tanta deduzione
andare sul bello è che posso
in realtà vai alla definizione di Mouse
muoviti e guarda cosa è questa cosa e
che ti salta in questo particolare
caso un file chiamato Lib DTS e questo è
ottomila righe di dattiloscritto
dichiarazioni che dichiarano l’intero
struttura del DOM e JavaScript
libreria di runtime questo è in realtà
generato dai file IDL che sono
standardizzato in modo tale che sappiamo che è corretto
e l’ informazione sul tipo è in realtà
disponibile è solo quello JavaScript
non ha modo di trasmetterlo
informazioni a voi altro
poi in fase di esecuzione, quando è troppo tardi destra
quindi qui possiamo vedere che è Mousemove
la cosa che prende un evento del mouse e
possiamo effettivamente navigare e e
controlla tutte queste cose e poi
vedere quali sono le loro forme ora
cosa che è veramente pulita di questo è
che possiamo fornire questo file proprio come un
file allegato sul lato e una volta
avere queste informazioni le luci degli attrezzi
e possiamo farlo per qualsiasi JavaScript
biblioteca là fuori così noi e noi in realtà
fai questo per nodejs e lo facciamo per
jQuery nella distribuzione dattiloscritto così
così come un file aggiuntivo che possiamo
fornire le informazioni mancanti a destra
e quindi illuminare gli strumenti in base a
su quello e penso che sia semplicemente super
ok prezioso
quindi fammi vedere dove voglio
per andare da qui lasciami tornare e giusto
sorta di riassumere un po ‘sul
digitare script qui quindi in pratica cosa
cosa fa il dattiloscritto?
formalizza il sistema di tipi di script Java e
fornisce una visione statica di esso, ma lo siamo
non provare a inventare un nuovo sistema di tipi
in realtà ci stiamo piegando all’indietro verso
rimanere fedeli a ciò che realmente è script Java
sistema di tipo si vede che facciamo un sacco di
tipo di inferenza e tipizzazione strutturale e
dentro e là e e la realtà è quella
quando scrivi il codice dattiloscritto
in realtà finiscono per scrivere pochissimi tipi
annotazioni e quindi da cui flettiamo
da da lì, come ho già detto che funziona con
librerie JavaScript esistenti e per
il sistema di tipi geek là fuori questo è
non un tipo di sistema di tipo provvisoriamente sicuro
perché javascript non è in un certo senso
provate a digitare sicuro mentre lo fate prima
devi definire cosa intendi veramente
ma ma il punto qui è che
non è un sistema di tipi per il tradizionale
sake di sistemi di tipo come le prestazioni
o come una rigida validazione, piuttosto è un
digita il sistema che ti aiuta a scrivere il codice
e questo riflette che conosci la realtà
se si vuole, ma è facoltativo e e
non devi usarlo ma quando lo fai
usalo, lo strumento può aiutarti a nascere
vorrei provare a tornare indietro e vi mostrerà
alcune delle altre caratteristiche che sono
disponibile volevo mostrare classi e
moduli e torneremo al
parco giochi perché è istruttivo
vedere il codice generato dal compilatore
quindi dattiloscritto supporta le classi così posso
dichiarare il punto di classe per esempio qui e
dire che ha due campi dispiace mia digitazione è
X colon di colore non molto grande e Y colon
numero come questo e tu vedi che noi
generare il codice che è sorta di
tipico per scrivere classi dove
hai una chiusura in cui hai un
funzione costruttore che poi restituiamo
fuori dal fuori della chiusura e ora
può salvare il nostro P uguale al nuovo punto e ora
sappiamo che su P c’è una X e una ay
in modo che possiamo darvi il completamento delle istruzioni
quindi puoi dire che px è uguale a 10 P punti y
è uguale a 20 e così via va bene adesso, naturalmente
sarebbe bello poter dare il
argomenti al mio punto qui, ma se lo faccio io
ricevi un errore perché non lo abbiamo ancora fatto
ho scritto un costruttore ma potremmo andare
scrivi un costruttore di X numero di due punti
virgola numero di due punti Y e qui possiamo
dì questo punto X e di nuovo vedi che otteniamo
completamento delle dichiarazioni su questo perché noi
sapere dove sei in questo punto y è uguale a y
e così via ora questa sintassi di classe di
il modo è allineato con lo script echo
sei attuali proposte per le classi così
così la classe e le estensioni del modulo che
vedi in dattiloscritto sono in realtà in a
senso di anteprima di ciò che sta arrivando
ECMO Script 6 ma poi in cima a quello noi
avere una formattazione statica facoltativa a strati
che non fa parte di ciò che fa eco
lo script 6 lo sta facendo ovviamente
può avere metodi in classi, quindi facciamolo
scrivi un metodo dist qui e diciamo
qui vogliamo tornare dot matematica e
di nuovo qui vedi che ottengo una dichiarazione
completamento su tutta la roba che è
disponibile nel runtime standard
libreria quindi voglio restituire questo punto X
volte questo punto X più questo punto Y volte
questo punto Y
per esempio per mio padre un po ‘più bello
va bene così una cosa che vedi qui è quella
le variabili di istanza vanno su questo ma
i metodi vanno sul prototipo e questo è
esattamente come gli script Java o Eggman
lo script sei prevede di fare lezioni e
questo è fondamentalmente il modello tipico
che le persone li usano e scrivono
consentiamo prototipi di catene in JavaScript
alcune altre cose nelle classi qui per
esempio potrei dichiarare un campo statico
l’origine statica equivale al nuovo punto zero
comma zero per esempio e te ne accorgerai
ora che la statistica va al costruttore
Metodi funzione dell’oggetto vanno in
le variabili di istanza del prototipo vanno su
istanza e così via e ora noi
capire cosa significa questo quando dico
punto punto vedi che ottengo un’origine
membro su punto ok, permettiamo anche consentire
per scrivere membri privati ma ma
con una svolta così potrei dire per esempio
colore oops privato tenere su stringa come
così e ora quaggiù se dico questo punto
il colore è uguale a rosso vedrai che noi
genera il codice e vedi questo
completamento delle istruzioni su questo mostra il
membro di colore ma se vado qui e
dì P punto vedrai che non c’è
membro chiamante su P perché è privato
quindi ti limitiamo ad accedere solo all’interno
la classe se dichiari le cose
privato però nel codice generato noi
semplicemente basta generare un membro normale
chiamato colore perché non c’è modo di
avere membri privati in JavaScript a
almeno non attualmente quelli echo Script sei
rotola con nomi privati che potremmo
Destinatari di nomi privati per questo tipo di
generazione di codice e forse fare a
lavoro migliore ma ora facciamo il meglio
possiamo andare bene
un paio di altre caratteristiche pulite noi
supporta ciò che chiamiamo automatico
proprietà questo pad
di dichiarare campi prendendo costruttore
argomenti con lo stesso nome di duro
come proprietà e poi dicendo questo
dot blot è uguale a blah è super super
comune quindi abbiamo una bella abbreviazione per
quello dove invece puoi semplicemente sul
argomenti del costruttore un pubblico qui e
pubblico qui e poi automaticamente
iniettare proprietà con quei nomi e
iniettare il codice per inizializzare quelli
proprietà supportiamo anche un altro eco
funzione di scrip sei che è l’impostazione predefinita
valore di argomento in modo da poter dare questi
argomenti valori predefiniti solo dicendo
uguale a qualcosa e quindi iniettiamo il
codice corretto per verificare se sono
non definito e così via e ora di
Ovviamente il tipo di sistema oops il tipo
il sistema ora sa che è permesso
per omettere gli argomenti nella chiamata inter
quindi non abbiamo un aspetto rosso su quello
okay, va bene, dovrei anche mostrarlo
che ovviamente supportiamo l’ereditarietà
per le classi proviamo a dichiarare la classe
il punto 3d estende il punto come questo e
allora facciamo solo dare un’occhiata a ciò che
è successo nel nostro codice generato così noi
abbiamo ancora la nostra lezione di punti qui
e ora abbiamo anche un punto 3d e tu
nota che il codice gen per quello è un
un po ‘diverso generiamo un
chiusura della funzione che prende la base
classe come argomento e quindi chiamiamo a
l’aiutante si estende che imposta il
prototipo di catena nel modo in cui si suppone
fare in JavaScript è per questo che le classi
sono difficili in JavaScript perché lo sei
dovrebbe fare tutte queste cose folli
proprio questo metodo viene iniettato
nel codice sorgente generato solo se
ci sono classi derivate di classe in questo
file e questa è l’unica volta che ci iniettiamo
codice che non hai scritto nel
file di output altrimenti il codice che ottieni
è semplicemente il metodo corpi che tu
ha scritto così non esiste una libreria di runtime o
nuove classi di raccolta o blah blah blah
o qualsiasi cosa associata al dattiloscritto
si tratta semplicemente JavaScript I ok
potrei scrivere qui a me stesso
costruttore che prende X : numero I sono un
y: numero virgola dire pubblico aggiungi un extra
proprietà z : numero come quello e poi
in qui dì chiamata super di X virgola Y per
esempio e ora vedi che generiamo
il codice appropriato per effettuare una chiamata
al super costruttore ecc ecc sì sì
questo è un corso che volevo mostrare
il prossimo è i moduli proviamo a farlo davvero
fammi provare e prendi un piccolo frammento di
codice qui sopra cosa volevo mostrare
prima, infatti, la funzione della freccia è così
lasciami andare nella cassetta degli attrezzi e lasciami afferrare
tracker qui andiamo bene fammi incollare
che qui ok, ecco un piccolo pezzo
di codice scorri questo in modo da poter vedere
quello che sta succedendo qui è un po ‘di classe
che dichiara un’istanza del contatore
variabile e quindi ha un metodo di avvio
e nel metodo di avvio abbiamo catturato il
onmousemove evento e avere un po ‘
gestore che incrementa il nostro contatore e
poi fa un registro di consultazione del contatore
quindi proviamo a eseguirlo in modo che tu possa
effettivamente eseguire l’output qui nel
parco giochi cerchiamo di far apparire gli strumenti F12
e vai alla finestra della console e poi a noi
vedi che hmm c’è c’è qualcosa
sbagliato con il nostro codice stiamo ottenendo un
un sacco di Nan uscirà da questo se torneremo indietro
e guarda cosa sta succedendo qui il
problema che abbiamo qui e se avessi
in realtà sto scrivendo questo codice in noi
avrei già visto cosa cosa
il problema era, ma se ci soffermiamo su questo
ora puoi vedere che questo è di tipo qualsiasi
il che significa che non conosciamo il tipo di
questo qui e quindi avremmo
ottenuto il completamento dell’istruzione per mostrare
conta e così via, ma la ragione è a
problema o la ragione è di tipo
c’è che non si sa mai cosa
stai per entrare in una chiamata di funzione
e a volte hai intenzione di ottenere il
sbagliato questo ad esempio in un tappetino
evento si ottiene l’elemento che la mossa
si è verificato su di te non capisci questo
il contesto circostante ora di tutti
ottenuto un po ‘da questo problema e ha ottenuto
la gente ne ha ottenuto abbastanza
che ci sia una proposta nello script Egmore
sei per supportare la cosiddetta freccia
funzioni o chiamato Bob Wian C
lambda funziona così potrei invece
scrivi questo codice come e freccia armata e
quindi in una funzione lambda questo è sempre
del tipo del contesto circostante
o è in senso lessicale che significa che io
ottenere la funzione esterna e
il modo in cui generiamo il codice è quello che facciamo
la piccola cosa cattiva che normalmente
hanno a che fare, dove si dice che equivale bar
questo e poi quel punto dentro il tuo
funzione o qualunque cosa possiamo semplicemente codificare
generalo per te invece qui
ciò che è interessante va bene e andiamo
in realtà appena sorta di correre e dimostrare di
noi stessi che che ora funziona sì
stiamo vedendo cosa avrebbero dovuto vedere
penso che sia interessante anche se nella mia
piccolo topo muoversi qui diciamo che io
non si riferiva a quello esteriore allora
noterai che non lo generiamo
quella chiusura quindi la iniettiamo solo se tu
in realtà lo faccio e poi lo riscriviamo a
underbar questo invece va bene ora l’altro
cosa supportiamo in dattiloscritto è
moduli diciamo che volevo mettere questo
classe in un modulo che potrei scrivere qui
modulo aperto riccio e qui vicino vicino
whoops ricci, naturalmente, vogliamo dare
questo modulo un nome o chiamalo modulo
utils e vedrai che mentre noi
generare di nuovo per un modulo è a
chiusura delle funzioni dove siamo allora per
tutte le cose che esportate
il modulo se dico tracker di classe di esportazione
quindi creiamo una proprietà sul modulo
oggetto per ciascuno degli articoli esportati in
questo è anche un modello molto tipico
in JavaScript e ora ovviamente noi
prendi gli squigglies rossi perché c’è
nessun tracker nell’ambito globale è ora
utilizza punto e se dico punto vedi
che c’è un tracker lì dentro e
quello è quello che quello che noi
voglio dire che posso davvero andare in profondità con
queste cose
Acme doc o dot utils e tu ci vediamo
basta chiudere le chiusure delle funzioni
sorta di fuori dallo schermo lì e ora io
devo fare riferimento ad esso come un comico o
dot utils ma noterete che lo facciamo
rintracciarlo nel sistema di tipi in modo che lo sappiamo
che il nome di questo tipo è accurato
utils Accord infatti abbiamo consentono anche
per importare i moduli quindi posso dire di importare AC
u è uguale a Acme o dot util, per esempio
e poi qui posso usare la stenografia
per questo un Cu e se guardi in basso
qui vedrai che cosa abbiamo
generato è solo una variabile che afferra
quell’oggetto modulo e poi lo usi
per fare riferimento invece a questi moduli noi
chiama i moduli interni e sono
sono molto tipici come jQuery per
esempio è un esempio di un modulo chiamato
scrittura del dollaro che ha un sacco di
roba in esso um
c’è un altro tipo di moduli che sono
che sono in uso comune là fuori chiamato
i moduli GS comuni e i nodijs li utilizzano
e quelli sono fondamentalmente come fonte
file che vengono caricati in modo dinamico a
runtime e hanno la capacità di dichiarare
le loro esigenze in termini di altro
moduli e dichiarano le loro esportazioni in termini
di un oggetto di esportazione e supportiamo
quelli quindi lascia che provi effettivamente a chiudere
giù nel parco giochi qui e poi andiamo
torna nello studio visivo e proviamo
per aprire un server TS qui e lasciami
prova a scrivere una piccola nota di due moduli
applicazione server così prima cosa sono
sto per importare a
fare riferimento a questa tipizzazione statica del nodo
punto J S che si trova in un file di dichiarazione
chiamato nodo punto d TS e io semplicemente posto
un riferimento nel mio nel mio file sorgente
che dice al compilatore che quando tu
compilare questo file include anche quello
altro file nella compilation e ora
Posso dire import HTTP uguale a
modulo HTTP che è uno dei
moduli definiti dal nodo e infatti se io
vai alla definizione di questo ragazzo che vedrai
che salta
nelle informazioni di tipo statico aggiunto
file per HTTP e questo è quello che è
da cui si alimenta per dare
la collina di completamento di dichiarazione di me va bene così lascia
ora provo a scrivere una funzione qui
funzione di esportazione semplice server che prende
un codice di porta sul numero virgola messaggio su
stringa così e qui diciamo noi
voglio chiamare HTTP dot creare server e
vedi che otteniamo il completamento dell’istruzione
il nodo qui crea server interno è un
cosa che richiede una funzione di callback
che ha due parametri richiesti e
risposta quindi posso dare a quei ragazzi e
allora qui
Posso scrivere il corpo del mio codice
ora ho intenzione di incollare in alcuni
roba qui così così non devi guardare
io scrivo, ma nota una cosa
quando scrivo il punto risultato, otteniamo effettivamente
completamento delle dichiarazioni su questo, quindi galleggiamo
i tipi dalla dichiarazione di creare
server nella funzione di callback
perché sappiamo quali sono i tipi di quelli
gli argomenti di callback sono e quindi possiamo
scorre tutto senza che tu debba
dichiaralo esplicitamente ovunque va bene
torna qui e dì punto ascolta
1337 prima non dispiace per il porto che era
l’ argomento per cui siamo passati bene così
questo è il primo modulo del nostro
piccolo server fammi creare un altro vedere
qui qui apro un altro file vuoto e
ora creiamo un modulo che usa il
modulo che abbiamo appena scritto così sto andando
per dire import server oops
il server è uguale al modulo del server e ora I
effettivamente hanno riferito che il modulo
Ho appena scritto e quindi se dico il punto del server
ora ottengo effettivamente il completamento dell’istruzione
sul modulo che ho appena scritto così posso
ora chiama il server semplice e dice
devi passare un numero di porta così 1337
virgola ciao vai per esempio e poi
diciamo anche solo diciamo il punto log della console
di ascoltare piace così là e andiamo
salva quel ragazzo tutto bene e ora lasciami fare
saltare fuori e utilizzare effettivamente il
compilatore da riga di comando quindi passeremo a
nodo R mi dispiace nodo demo e qui dentro
vedrai ora che abbiamo i nostri tre
file che il file di dichiarazione del nodo e
i due file dattiloscritti che ho scritto
ora posso semplicemente dirlo per compilare
ciao TS, non ho nemmeno bisogno di dirlo
sul server punto TS perché il compilatore
traccia automaticamente tutto il mio
importazioni e tutti i riferimenti che io
avere e trovare l’intero grafico dei file
che deve essere compilato e poi
compilare quelli così se guardiamo al
l’output che è stato generato ora lo abbiamo
due file ciao punto j e il nostro
server pieni di energia potremmo solo un po ‘
dai un’occhiata qui server js se siamo fianchi
proviamo a dare un’occhiata a questo e
vedrai che il codice è lì dentro
è il codice che ho scritto con la mia importazione
cambiato in un bisogno e se scriviamo
ciao punto J che vedrai di nuovo è
praticamente lo stesso codice, facciamolo
prova ad eseguire un nodo su questo server in modo nodo
Ciao
e sta ascoltando e ora andiamo a
ah liberati di questo ragazzo lì e poi
andiamo al localhost 1337 lì e noi
dovresti vedere ciao vai lì andiamo sì
ok, quindi è un po ‘sulle classi
e i moduli ah potrei solo rapidamente
riassumi qui quello che fondamentalmente tu
so che queste sono le cose che ci permettono
per fare sviluppo di applicazioni scalabili giusto e
ed è così che scrivi
applicazioni veramente grandi e strumenti
questo capisce cosa sono i contratti
sono tra diversi moduli e hanno
sono fatti rispettare così trovi gli errori
prima di eseguire la tua app al posto di
mentre lo stai facendo
siamo allineati con l’emergere
standard così come ho detto prima classi
le funzioni della freccia dei moduli sono tutte le cose
che sono proposti per equi script sei
che stiamo prendendo ispirazione da e
supportiamo i due popolari moduli
sistemi che sono là fuori comuni
fantastico che viene utilizzato da nodejs e quindi
Moduli AMD che probabilmente sono i più
caricatore comune ci vuole punto dot Jas
e questo è usato per il modulo asincrono
caricamento in un browser e supportiamo entrambi
di quelli va bene l’ultima cosa che volevo
spettacolo era solo alcune applicazioni più grandi
perché abbiamo fatto un sacco di
piccole cose qui , proviamo a caricare
su alcuni dei nostri campioni la prima cosa che sono
andando ad aprire è vediamo la barra demo
scheda immagine questo è uno dei campioni
quello che includiamo e carichiamo solo
punto su app – sì quindi questo è un multi
applicazione nodejs del modulo che utilizza
MongoDB e il framework Express così
qui vedi che importiamo i moduli
da vari luoghi vengono HTTP e URL
dal nodo DB è in realtà un modulo che
abbiamo scritto che possiamo navigare e guardare
e qui lo vedi a turno
utilizza MongoDB modo da poter navigare in
e controlla la tipizzazione statica di
un MongoDB qui vedi che abbiamo aperto
e creare un server per creare una connessione
ad esso e poi solo per comodità
abbiamo definito alcuni tipi di interfaccia
rappresentano le entità che siamo
memorizzazione nel database perché sono
tutto dello stesso tipo ed è davvero
in realtà conveniente avere una dichiarazione
completamento e validazione su questi
entità che noi che stavamo mettendo
cosa giusta nel database e
poi abbiamo anche scritto un aiuto
funzioni come ottenere l’utente qui che prende
un ID e quindi ti chiama in modo asincrono
indietro quando viene prelevato dall’utente dal
database e qui vedi che usiamo il
file di interfaccia che noi che abbiamo solo
dichiarato ora possiamo usare l’IDE per
navigare in questa applicazione più ampia possibile per
esempio trova tutti i riferimenti di ottenere utente
e vedrai che qui è il
Dichiarazione di esso e poi ci sono due
i riferimenti nell’app qui sono uno
quello che penso sia interessante se tu
guarda questo
la disfunzione qui è di tipo zero
annotazioni in questa funzione, ma sappiamo
tutti i segreti a riguardo perché app
altrove è tipizzato come di tipo
Express server sappiamo che Express
il server ha un metodo get che lo prende
ha un sacco di sovraccarichi e uno di loro
è uno che accetta una funzione
ritorna che ha due argomenti
richiesta e risposta e quindi possiamo dedurre
quali sono i loro tipi sappiamo cosa sono
tipo di utente è quello che abbiamo dichiarato
sopra nel modulo database e così quando
siamo qui se dico che la richiesta ti punisce
vedi che ottengo il completamento dell’istruzione se io
dì punto utente vedi che ottengo
completamento dell’affermazione quindi sappiamo tutto di
questa roba senza aver bisogno di dichiarare
più e più volte è dedotto dal
codice ora nell’interesse del tempo non lo sono
andare a correre in realtà questo ho intenzione
per provare e cambiare e mostrarti un altro
piccolo campione R che è uno chiamato
nave da guerra e proviamo a caricare quel ragazzo
qui e liberiamoci di questo tizio
e questo tizio si tratta di una piccola applicazione che
un’app browser che utilizza jQuery e
jQuery UI e vedrai che noi
riferito al Taiping per jQuery e
per l’ interfaccia utente di jQuery e lascia che ti mostri come
questo funziona allora perché il modello
tra queste due librerie è quello
L’interfaccia utente di jQuery è una libreria su cui si basa
all’inizio di jQuery in realtà è una sorta di scimmia
patch nell’oggetto dollaro e aggiunge
proprietà aggiuntive che sono per
Manipolazione dell’interfaccia utente quindi se guardiamo al dollaro
beh prima di tutto vedrai che noi ora
avere informazioni sul tipo per jQuery così noi
conosci i sette sovraccarichi di dollaro che siamo
andando a scegliere quello che prende un
stringa e poi stiamo andando a premere punto
su di esso e qui vedi tutte le cose
quello che puoi dire sul dollaro ora questo
è la roba che ti salva dall’avere
il foglio dei trucchi accanto a te o o
cercare in qualche documentazione HTML
giusto questo è quello che gli strumenti dovrebbero
fai per te se selezioniamo la classe R allora
possiamo effettivamente andare alla definizione di
quel ragazzo e tu vedi ora saltiamo dentro
il
file di dichiarazione jQuery che vedi qui
l’interfaccia principale per jQuery e ha
un passaggio pubblicitario infatti ha due sovraccarichi
di classe AD ora se torniamo diciamo
ne selezioniamo uno dall’interfaccia utente di jQuery
ad esempio trascinabile e diciamo
andiamo a definire quel tipo
noterai che saltiamo in a
file diverso che dichiara lo stesso
interfaccia così in interfacce dattiloscritte
sono aperti e possono essere file multipli
contribuire alla stessa interfaccia e
è così che abbiamo modellare questa nozione che uno
il modulo fa qualcosa e poi un altro
il modulo si basa su quel primo modulo di
aggiungendo cose ai suoi tipi e, quindi, noi
può modellarlo nel sistema tipo e
questo è solo super- utile, va bene lo scorso
la cosa che volevo mostrare è davvero grande
proietta il compilatore dattiloscritto stesso
fammi provare a caricarlo qui e
selezioneremo solo uno dei file
la compilazione del compilatore è di circa 26.000
linee di tipi di codice dattiloscritto qui io
caricato il file che contiene il file
definizioni astratte della classe dell’albero della sintassi
e io e come ho detto tutto questo è aperto
fonte quindi è ‘roba che si può
solo afferrare e guardare in cui possiamo navigare
qui per esempio vai alla definizione di
la classe di dichiarazione del caso che è a
classe che estende la dichiarazione e così
avanti e così posso navigare intorno al
intero compilatore ora hai visto che al
all’inizio di questo file faccio riferimento a un file
chiamato typescript es se andiamo al
soluzione Esplora in Visual Studio
vedi che in realtà abbiamo inferito il
tutto il progetto a cui sto lavorando qui
da quei riferimenti perché se andiamo
a-tipografica es vedrai che che nel
il riferimento al turno è un insieme di altri
file e attraverso questi riferimenti
compilatore può avere un quadro completo ed
quasi non importa quale file tu
aperto conosciamo il contesto e quindi
possiamo fornirti tutto il
informazioni appropriate così qui dentro
questo è il file principale per il dattiloscritto
compilatore c’è una classe chiamata
compilatore dattiloscritto che ha un prezzo ah
il compilatore dattiloscritto crea un’istanza a
parser possiamo andare al definito
missione del parser il parser intern
istanzia uno scanner che possiamo andare a
definizione di quel ragazzo e quindi è possibile
sorta di navigare molto facilmente e
vedere come il compilatore è costruito ciò che io
voleva mostrare però è è uno dei
cose davvero belle che puoi fare una volta
hai informazioni di tipo statico e
sono cose come i refactoring e uno
dei refactoring che supportiamo è rinominare
per esempio diciamo che qui nel
scanner Ho un campo chiamato
ha chiamato il numero di linea che ho dimenticato di
rinominare quello indietro alla linea dal
l’ultima demo che ho dato comunque c’è un campo
chiamato numero di linea se guardo tutti i
luoghi a cui questo ragazzo fa riferimento se io
vai a definire questo ragazzo quindi vado
per trovare riferimenti su questo ragazzo
vedrai che ci sono un sacco di
riferimenti nello scanner stesso e
poi ci sono alcuni sopra nel parser
che possiamo guardare ah e eccone uno
per esempio nel parser dove noi
fai riferimento a una linea ora qui sopra c’è
anche una proprietà chiamata linea ok quindi lasciami
prima tornare allo scanner e provare a
rinomina qui ah refactor rinomina e chiama
questa linea di ragazzi invece va bene se vado
di nuovo al parser si vede che ha
ora rinominato numero di linea qui a
linea ok ma ora cos’è veramente
interessante è ora ho due cose
chiamata linea uno proveniente dallo scanner
e poi ne ho uno che viene da questo
linea chiamata cosa che sto usando
qui come diritto locale diciamo questo
Ora dovevo rinominare la mia linea di scanner
torna al numero di linea ok ora se questo fosse
Codice JavaScript che sarebbe follemente
difficile da fare bene perché devi
guarda ogni riferimento alla linea in tutto
i file di origine e decidere al volo
è questo l’ uno o è quell’altro
ma questo è ciò che fanno gli ID per quanto ne sai tu
tutto il giorno giusto, loro perché attraverso
tipizzazione statica sappiamo la differenza in modo
fammi prendere questo file parser qui e
in realtà lo metto giù al e al
in basso e ora proviamo a farlo
mostra entrambi qui vedi quello
nel mio scanner qui vedi quello
non è collegato a questo, torniamo indietro e
pronunciare il nome del refactore
ora chiamiamolo questo numero tiranti
invece e vedrai che abbiamo ribattezzato
quel ragazzo ma non quel ragazzo perché noi
capire la differenza tra il
due così così eccoci qui è di nuovo uno
di quelle cose che fanno solo strumenti
incredibilmente prezioso quando stai scrivendo
applicazioni di grandi dimensioni va bene cosa finale
voglio mostrare è solo compilando il
compiler scusa ci andiamo
quindi qui è la fonte di tutto il
compilatore che noi che abbiamo appena preso un
guarda ora ho intenzione di provare a compilare
il compilatore ho intenzione di dirlo per mettere
l’output in un file chiamato tsks quindi
Ho intenzione di dirlo per generare anche
generare dichiarazioni e sto andando a
compila dattiloscritto e così sta andando
per produrre prima due file che sta per
produrre il compilatore in un file chiamato
tsj s e sarà semplicemente chiaro
JavaScript poi andrà anche a
produrre un file di dichiarazione che
rappresenta l’interfaccia esterna del
compilatore quindi se guardiamo a ciò che abbiamo visto
quello che abbiamo qui lo vedrai lì
ci sono due file prodotti
tsj s e poi TS d TS e questo è il
file di dichiarazione per il compilatore e
ora se lo carico su nel
ambiente di sviluppo qui vediamo
va e basta e basta
liberati del parser e qui vedi
fondamentalmente l’ estratto pubblico di tutti
le cose dichiarate nel compilatore
qualcuno che usa il compilatore come servizio
potrebbe usare e così ora posso in un certo senso
continuare la catena del mio modulare
sviluppo posso prendere il mio dattiloscritto
compilatore eseguirlo attraverso il mio minify o fare
qualunque cosa è che io faccio il mio ufficio cater
prima di spedirlo e poi posso continuare
su con il file di dichiarazione e quello
è davvero ciò che rappresenta il mio esterno
interfaccia giusta e così vedi come te
può creare manualmente i file di dichiarazione
per JavaScript esistente ma se tu
in dattiloscritto possiamo fare il
dichiarazione dei file automaticamente
va bene, penso che sia tanto quanto me
avere tempo per aver voluto solo brevemente
riassunto guardando ciò che è incluso
compilatore open source dattiloscritto scritto
in dattiloscritto utensili ci sono a
campo di gioco ospitato dal browser che utilizza
questi servizi e perché è aperto
fonte a cui chiunque può creare plugin
altri ambienti di editing ne abbiamo creato uno
per studio visivo che includiamo noi
includere statico
digitazioni di un gruppo del popolare
librerie là fuori come nodejs e
jquery e anche un sacco di campioni e a
specifica del linguaggio formale così come io
iniziato a dire scala dell’applicazione
lo sviluppo di javascript è difficile, spero
Ti ho mostrato qui come dattiloscritto
rende più facile e mi piacerebbe che tu lo facessi
vai a dare un’occhiata a te stesso
dattiloscritto o scaricati play
con esso e facci sapere cosa ne pensi
grazie
tu
collega a Microsoft e sono qui per parlare
a proposito di dattiloscritto che è un progetto
abbiamo lavorato per gli ultimi due
due anni e mezzo è così dattiloscritto
sulla soluzione di un problema che abbiamo
sempre più sentito dal nostro
i clienti che conosci in particolare
gli ultimi cinque anni i clienti e anche
i team interni continuano a dirci come
è difficile scrivere applicazioni di grandi dimensioni
in JavaScript diversi motivi tu sai
uno è che quel javascript davvero
non è mai stato progettato per scrivere in grande
applicazioni lo sapevi che era così
è stato un po ‘come originariamente previsto per
questi dieci gestori di eventi di linea e ora
stiamo scrivendo diecimila o cento
migliaia di app di linea in esso e il
il linguaggio non ne ha davvero
strutturazione di applicazioni su larga scala
concetti come classi o moduli e
inoltre è interamente digitato in modo dinamico
il che significa che non esiste un tipo statico
informazioni al di fuori delle quali possiamo alimentare
utensili intelligenti e se pensi
su ciò che alimenta il
ID intelligenti che tutti noi usiamo oggi
è davvero un tipo di informazione statica che
rende possibile eseguire il completamento del codice
rifacimenti sicuri che trovano tutti i riferimenti
vai alla definizione eccetera eccetera così
due due anni e mezzo fa, dove noi
stavano pensando a dove andremo dopo
con gli strumenti di sviluppo JavaScript noi
pensavo che sarebbe stato davvero pulito se avessimo potuto
rafforzare JavaScript ma con quella chiave
concetti che mancano per
sviluppo su larga scala come le classi
moduli digitando staticamente ma ma
azioni ma ma per farlo in un modo che
non sacrifica la cosa inerente
questo rende JavaScript così interessante
cioè standard aperti multipiattaforma web e
così via e ed è questo che cosa
dattiloscritto è un linguaggio per
sviluppo di JavaScript in scala applicativa
quindi è un linguaggio per il
o JavaScript della scala di applicazione
sviluppo al livello successivo o più
la descrizione tecnica è dattiloscritto è a
superset di JavaScript che compila
JavaScript semplice e lo fa
compilatore stesso e il codice che esso
produce funziona su qualsiasi browser su qualsiasi host
qualsiasi sistema operativo e il compilatore
e i servizi linguistici associati e
biblioteca Taipings e così via sono tutti
open source abbiamo inserito questo progetto
l’aperto circa due giorni fa e ciò che io
sono qui fondamentalmente lo sai
disponibile pubblicamente in installazione di esso
quello che proveremo a suonare
con ora così dattiloscritto inizia con
JavaScript tutto il codice JavaScript è valido
codice dattiloscritto perché siamo puri
superset di JavaScript e questo significa
che puoi semplicemente copiare e incollare
JavaScript in un file dattiloscritto e
quindi lavorare con esso là significa anche
quel dattiloscritto funziona con tutto il
quadri e librerie esistenti che
sono disponibili là fuori oggi come
nodecore o sottolineatura backbone jQuery
prototipo etc etc ce ne sono molti
ne arrivano di nuovi praticamente ogni giorno
quindi la cosa che aggiungiamo sopra è
classi di tipizzazione statiche opzionali e
moduli braccio e quelli sono davvero una sorta di
le cose che ci permettono quindi di
costruire grandi strumenti perché sono i
Mancano cose che alimentano il
IDE oggi braccio
la cosa bella però è che c’è
a costo zero tutto questo tutto il dattiloscritto
è puramente uno strumento del tempo di sviluppo una volta
ti accolli e ti viene lasciato in chiaro
JavaScript e non c’è runtime
componente che deve essere presente in
Per eseguire il codice generatore
Infatti compiliamo semplicemente due idiomatiche
JavaScript il JavaScript che vorresti
hai scritto se volevi emulare
classi o o modulo
e il codice finale funziona come ho detto in qualsiasi
browser qualsiasi host su qualsiasi sistema operativo, quindi facciamolo
cerchiamo in realtà di fare un po ‘di
provare le canzoni e vedere che cosa questo assomiglia a
l’azione qui è il sito web dattiloscritto
beh, in realtà è una copia locale che ho
nel caso in cui abbiamo perso la connettività, ma
ma questo è quello che sembra e noi siamo
andando a giocare con dattiloscritto in
il campo da gioco dattiloscritto che è
fondamentalmente una pagina web dove puoi dove
è possibile digitare a macchina e vedere la
output compilato in una finestra su
lato ho intenzione di passare qui e afferrare
la mia prima piccola demo e quindi qui vedi
alcuni alcuni JavaScript e qui vedi
l’ output compilato che capita di essere
esattamente lo stesso perché siamo solo un
superset di JavaScript ora se si guarda
a questo codice c’è qualcosa di divertente
riguardo a questo codice, voglio dire, sono come
prendendo un parametro X e sto aggiungendo a
proprietà o impostazione di una proprietà ma
Lo sto anche mettendo insieme ma hey
questo è JavaScript valido solo così
capita di non essere significativo ma lo è
valido ora ora sarebbe bello e andiamo
diciamo per esempio che sapevo che X era
sta per essere una stringa che sarebbe sicuramente
bello se potessi in qualche modo indicarlo
e sai che non è come siamo
inventando qualcosa di nuovo in questo senso
sapere ad esempio se usi uno strumento come
Chiusura di Google dove metti tipo
annotazioni nei commenti ci sono
sono strumenti in grado di controllare queste cose
per te ma avendo il tuo sistema di tipo
nei commenti non è particolarmente
favorevoli alla leggibilità del codice né
è particolarmente espressivo, lo sai
ci sono un sacco di cose che tu
non posso dire in questi commenti e tu
non posso metterli in tutti i posti che
ti piacerebbe metterli così cosa
dattiloscritto invece ti permette
mettere annotazioni di tipo nel tuo codice così
Posso dire che X è di tipo stringa e quando io
fai in modo che vedi che il nostro IDE inizia a
illuminare dovrei dire che quello che
si sta alimentando sotto questa casella di modifica
che sto digitando è il dattiloscritto
compilatore e il linguaggio dattiloscritto
servizio
perché il dattiloscritto è scritto in
dattiloscritto e quando lo compili tu
ottenere Javascript e si può solo usare quella
ovunque e così è quello che siamo ciò che
stiamo facendo qui e quindi la prima cosa
si vede è che otteniamo qualcosa qui
quello dice che non ci sono proprietà del nome su
digita una stringa che è vera lì
non vediamo anche se passiamo il mouse su V
che abbiamo inferito quella stringa più
string è una stringa e quindi V è di
digita la stringa e vediamo che l’avviso è a
cosa che prende una stringa e ritorna
nulla e quindi è valido per passare V
ad esso ora lasciami provare a sbarazzarmene
linea ed errore qui e proviamo uno di
l’altro numero di tipi primitivi per
esempio e ora vediamo che siamo
inferendo che il numero più il numero è a
numero e ora stiamo cercando di passare a
numero a un metodo che si aspetta una stringa
e che a sua volta è anche un errore così così
eccone altri che conosci
il controllo statico dei tipi si verifica
proviamo a usare un bool e passo e ora
vediamo che l’ operatore plus non può essere
applicato a bool
beh, in realtà lo può fare in JavaScript
solo così capita che non si ottiene un
risultato significativo giusto e così in a
sentire di cosa si tratta sta provando a
per sottrarre quel sottoinsieme significativo di
Java il sottoinsieme semantico di JavaScript
questo ha un senso e questo è fondamentalmente
cosa cosa cosa cosa stiamo facendo qui
in questo momento permettiamo anche di più
tipi complicati come una gara per
esempio posso dire che X è una stringa
array e ora quando indicizzo in X e
premi punto che vedi che lo sappiamo
ci sono stringhe e quindi possiamo
mostra tutti i metodi che sono
disponibile su stringa e non solo loro
nomi ma anche le loro firme quindi noi
può vedere che l’ app di codice di assistenza è una cosa
che prende un indice e che è il numero
e restituisce un numero e così via altro
i modelli tipici che sono interessanti sono
potremmo dire che X è una funzione che richiede
nessun argomento e restituisce una stringa e
ora quando lo chiamiamo e diciamo di nuovo punto
vedi che otteniamo il completamento dell’istruzione ma
ovviamente una cosa è davvero
è interessante avere la capacità di
descrivere una forma di oggetto qui per
esempio sto dicendo che whoops that my
la funzione accetta una X che è un oggetto
che ha una proprietà A e una B e ora
quando dico X dot vedete che otteniamo
completamento delle istruzioni qui X a XB e così via
avanti ora potrei anche voler dare un
nome a questo tipo strutturale o questo
tipo anonimo quindi vedi che puoi scrivere
tipi solo in linea ma ovviamente puoi
anche il nome li penso di avere questo
piccolo esempio qui che ti mostra come
potresti scrivere un’interfaccia con
due proprietà in esso è davvero giusta
interfacciare qui penso più come sto
scrivere un tipo di oggetto il cui nome è
cosa e ha due proprietà e lascia
ora provo ad esempio e dico bar n
equivale al processo di due punti 10 virgola B
colon ciao
per esempio ora vale un paio di cose
notando qui prima di tutto se sei stato
seguendo oltre nel generato
JavaScript si vede che il JavaScript
generiamo è davvero solo il
JavaScript che scrivi – il tipo
annotazioni e – la dichiarazione del tipo
così tutti che è lì si sa per
convalida e IDE e utensili sake e
quindi si ricompila ora
l’altra cosa che noterai qui se noi
se proviamo a guardare un po ‘di questo
programma quindi abbiamo definito a essere un
numero e qui restituiamo X punto a quale
significa che abbiamo dedotto che restituiamo a
numero che a sua volta significa che possiamo
dedurre che il processo è una funzione che
prende una cosa che restituisce un numero
che a sua volta significa che quando chiamiamo
processo possiamo dedurre che n è un numero
e così vedi come scrivi
scorrere attraverso solo poche annotazioni e
allora possiamo fluire attraverso il codice
una volta che sappiamo cosa sta succedendo farmi provare
per mostrare qui ciò che succede anche
per esempio diciamo che aggiungo un extra
proprietà per il mio tipo di interfaccia qui ora
noterai che ho degli errori qui
dice che il processo è manca uno dei
uno dei parametri e potrei risolvere
aggiungendo dal parametro C ma I
potrebbe anche indicare invece che C è un
parametro opzionale quindi questo è un modello
questo è molto comune in JavaScript dove
prendi dire borse di opzioni che sono a
un sacco di opzioni ma in realtà non lo fai
Devo specificare tutti loro giusto così
qui stiamo dicendo che a e B lo sono
obbligatorio ma C è facoltativo se do un
C deve essere un bool se do una C che
non è un bool ora è un errore, quindi anche noi
possiamo in qualche modo esprimere alcuni dei
parti più complesse di ciò che accade
in JavaScript fammi provare effettivamente
prendi questo pezzo di codice qui sono solo
andando a copiarlo e poi passiamo
allo studio visivo e prendiamoci
un file dattiloscritto vuoto così ora parte di
dattiloscritto la distribuzione è un plugin
per visual studio che usa il compilatore
e il servizio linguistico per accendere tutti
queste strutture intelligenti nell’IDE
come ho detto questa roba è tutto open source
quindi puoi usarlo altrove dove
hai visto un esempio che sto usando nel web
browser che qualcuno potrebbe costruire un
plug-in di eclipse e fare la stessa cosa
Sto per incollarlo qui e
quindi continua a giocare con il nostro codice in
Qui
quindi una cosa che puoi esprimere
le labbra nei tipi sono i metodi così ora siamo
dicendo che la cosa ha proprietà a e B
di tipo numero e un metodo foo così ora
quando faccio il completamento dell’istruzione vedi
abbiamo un foo e quando apro ricci
mi dice quale sia la firma di quello
ragazzo è e così via e di nuovo qui possiamo
oltre a questo ora torniamo a
stringa perché foo restituisce la storia noi
in realtà ti permettono anche di esprimere
sovraccarichi quindi posso dire che c’è un dado
c’è davvero un metodo che è foo
quando lo dai una stringa restituisce a
stringa e quando gli dai un numero,
restituisce un numero che accade molto spesso
in JavaScript per esempio mi piace
pensa a jQuery e ad un oggetto dollaro
ha sette diversi sovraccarichi che tu
può se gli dai una funzione allora
fa questo se gli dai una stringa
lo fa se gli dai un sacchetto per oggetti
fa questa altra cosa e così via e
quindi è importante essere in grado di modellare
al sistema di tipi in modo che possiamo seguire
e quando dici che punto su quel dare
si le informazioni sul tipo di nuovo a destra in modo
ora se guardiamo qui se dico X dot foo
vedrai che ora ce ne sono due
sovraccarichi sono oh questo è davvero e
comunque ah
quindi se ti do un numero qui vai
quindi elaborare ora restituisce un numero ora
questa roba qui in realtà R è davvero la
come scrivere questo, ma così foo quello che sono
davvero dicendo qui con questi due
sovraccarico è che c’è una proprietà foo
che ha due possibili firme di chiamata
uno che prende una stringa e restituisce a
quantità di stringhe ci vuole un numero e
restituisce un numero ma posso descriverlo
ulteriori cose sulla mia funzione per
esempio ha anche una proprietà data così
e questa è di nuovo roba che succede così
ora quando dico foo dot lo vedrai
c’è una proprietà dei dati, ma posso anche
chiamalo con due diversi sovraccarichi e
così posso modellare tutte queste cose pazze
che si verificano nelle librerie JavaScript in
Infatti, per completezza, lasciami fare
aggiungo un altro paio qui potrei potrei
ora definisci anche che quella cosa può essere a
funzione di costruzione che prende una stringa
e restituisce elementi e quando indicizzi
in esso ottieni le date e così via e
ora cose così folli quando dico nuova X qui
dice oh devi darmi una stringa e
quando si fa poi ho intenzione di tornare e
menta ecc. ecc., quindi possiamo fondamentalmente modellare
tutte queste cose che accadono nel
JavaScript jQuery Dom tutti in tutto il
quadri okay lasciami sbarazzarsi di questo
roba e prova a incollare in qualche altro
ecco un esempio un po ‘più avanzato di
digitare inferenza una funzione che si chiude
su una variabile locale e restituisce un
oggetto con un sacco di funzioni
proprietà che usano quello locale e
in questo modo si ottiene la privacy in
JavaScript è un modello molto comune
giusto se tu se guardi in questo pezzo
di codice l’unica cosa che differisce
da JavaScript normale è questo
annotazione qui che dice che questo
la funzione prende un numero ma possiamo dedurre
tutti i tipi da questo così
se si passa il mouse sopra la dichiarazione di ritorno
qui vedrete che abbiamo dedotto che
questo restituisce una cosa che ha tre
proprietà che sono ciascuna di una funzione
tipo che ha determinati tipi di argomenti e
così via e a sua volta fare accumulatore
quindi è una funzione che prende no
argomenti che restituiscono un oggetto letterale
contenente tre funzioni che eccetera
ecc. ecc. , così possiamo riordinare tutto
su e ora quando dico VAR a fare un uguale
accumulatore e poi un punto che vedrai
che c’è un annuncio qui e quello di cui ho bisogno
passare un numero cinque e così via
ora questo mostra come possiamo dedurre
codice che stai scrivendo ma a volte
inferenza, vuoi inferenze per entrare
l’altra direzione che puoi, per esempio
Ho una dichiarazione di un’interfaccia
che vuoi andare all’attuazione e ora
davvero ti piacerebbe fare inferenze
da quello sul codice che sei
che stai scrivendo, diciamo che il mio
fare la funzione di accumulatore qui è
qualcosa che dovrebbe restituire un
bene l’ accumulatore lo vedrai
tutto funziona ora perché in realtà
avere una tipizzazione strutturale qui, quindi il semplice
fatto di scrivere un oggetto letterale che
ha la forma giusta è un’implementazione
di quell’interfaccia non è necessario
per prima cosa dichiari di averlo implementato ma
ma l’altra cosa è davvero fantastica
è che se ho fatto un errore qui come
digitato nel torto
nome della proprietà quindi mi dice che cosa è
sbagliato mi dice che hey sei
la proprietà mancante viene aggiunta dall’accumulatore
ora è qui che gli strumenti diventano veramente
davvero utile immagina che fosse così
un oggetto letterale di 500 righe e fidatevi di me
Ne ho visti molti in JavaScript
codice e c’è qualcosa di sbagliato in
c’è da qualche parte come diavolo fai a te
capirlo destra voglio dire che è quello che
gli strumenti dovrebbero fare per te e
questo è ciò che noi facciamo qui
va bene
un altro posto dove questo tipo di
tipizzazione contestuale che è interessante è ben
in realtà dovrei dimostrare che anche qui
anche se mi liberassi di quel tipo
annotazione che noterai che possiamo ancora
dedurre che il valore è un numero perché
hai detto che stai tornando a
accumulatore e accumulatore ha un ADD
funzione che richiede un numero e
quindi possiamo collegarlo e ancora
scorrere i tipi nell’altro nell’altro
direzione giusta questo risulta essere
utile ad esempio se dico un documento
punto sul mousemove molo che è uno di
gli eventi che puoi gestire sono uguali
funzione di E e quindi aprire ricci
punto e noterete che in realtà
sapere cos’è E qui e il modo in cui lo conosciamo
è perché sappiamo che cosa documento è
il documento è il documento del documento radice
ha una mossa non rimbalzante che prende il mouse
evento e restituisce qualsiasi e quindi noi
può spingere le informazioni sul tipo in E come
un evento del mouse e quindi possiamo dare
hai completato la dichiarazione su E quando tu
dì punto e così tanta deduzione
andare sul bello è che posso
in realtà vai alla definizione di Mouse
muoviti e guarda cosa è questa cosa e
che ti salta in questo particolare
caso un file chiamato Lib DTS e questo è
ottomila righe di dattiloscritto
dichiarazioni che dichiarano l’intero
struttura del DOM e JavaScript
libreria di runtime questo è in realtà
generato dai file IDL che sono
standardizzato in modo tale che sappiamo che è corretto
e l’ informazione sul tipo è in realtà
disponibile è solo quello JavaScript
non ha modo di trasmetterlo
informazioni a voi altro
poi in fase di esecuzione, quando è troppo tardi destra
quindi qui possiamo vedere che è Mousemove
la cosa che prende un evento del mouse e
possiamo effettivamente navigare e e
controlla tutte queste cose e poi
vedere quali sono le loro forme ora
cosa che è veramente pulita di questo è
che possiamo fornire questo file proprio come un
file allegato sul lato e una volta
avere queste informazioni le luci degli attrezzi
e possiamo farlo per qualsiasi JavaScript
biblioteca là fuori così noi e noi in realtà
fai questo per nodejs e lo facciamo per
jQuery nella distribuzione dattiloscritto così
così come un file aggiuntivo che possiamo
fornire le informazioni mancanti a destra
e quindi illuminare gli strumenti in base a
su quello e penso che sia semplicemente super
ok prezioso
quindi fammi vedere dove voglio
per andare da qui lasciami tornare e giusto
sorta di riassumere un po ‘sul
digitare script qui quindi in pratica cosa
cosa fa il dattiloscritto?
formalizza il sistema di tipi di script Java e
fornisce una visione statica di esso, ma lo siamo
non provare a inventare un nuovo sistema di tipi
in realtà ci stiamo piegando all’indietro verso
rimanere fedeli a ciò che realmente è script Java
sistema di tipo si vede che facciamo un sacco di
tipo di inferenza e tipizzazione strutturale e
dentro e là e e la realtà è quella
quando scrivi il codice dattiloscritto
in realtà finiscono per scrivere pochissimi tipi
annotazioni e quindi da cui flettiamo
da da lì, come ho già detto che funziona con
librerie JavaScript esistenti e per
il sistema di tipi geek là fuori questo è
non un tipo di sistema di tipo provvisoriamente sicuro
perché javascript non è in un certo senso
provate a digitare sicuro mentre lo fate prima
devi definire cosa intendi veramente
ma ma il punto qui è che
non è un sistema di tipi per il tradizionale
sake di sistemi di tipo come le prestazioni
o come una rigida validazione, piuttosto è un
digita il sistema che ti aiuta a scrivere il codice
e questo riflette che conosci la realtà
se si vuole, ma è facoltativo e e
non devi usarlo ma quando lo fai
usalo, lo strumento può aiutarti a nascere
vorrei provare a tornare indietro e vi mostrerà
alcune delle altre caratteristiche che sono
disponibile volevo mostrare classi e
moduli e torneremo al
parco giochi perché è istruttivo
vedere il codice generato dal compilatore
quindi dattiloscritto supporta le classi così posso
dichiarare il punto di classe per esempio qui e
dire che ha due campi dispiace mia digitazione è
X colon di colore non molto grande e Y colon
numero come questo e tu vedi che noi
generare il codice che è sorta di
tipico per scrivere classi dove
hai una chiusura in cui hai un
funzione costruttore che poi restituiamo
fuori dal fuori della chiusura e ora
può salvare il nostro P uguale al nuovo punto e ora
sappiamo che su P c’è una X e una ay
in modo che possiamo darvi il completamento delle istruzioni
quindi puoi dire che px è uguale a 10 P punti y
è uguale a 20 e così via va bene adesso, naturalmente
sarebbe bello poter dare il
argomenti al mio punto qui, ma se lo faccio io
ricevi un errore perché non lo abbiamo ancora fatto
ho scritto un costruttore ma potremmo andare
scrivi un costruttore di X numero di due punti
virgola numero di due punti Y e qui possiamo
dì questo punto X e di nuovo vedi che otteniamo
completamento delle dichiarazioni su questo perché noi
sapere dove sei in questo punto y è uguale a y
e così via ora questa sintassi di classe di
il modo è allineato con lo script echo
sei attuali proposte per le classi così
così la classe e le estensioni del modulo che
vedi in dattiloscritto sono in realtà in a
senso di anteprima di ciò che sta arrivando
ECMO Script 6 ma poi in cima a quello noi
avere una formattazione statica facoltativa a strati
che non fa parte di ciò che fa eco
lo script 6 lo sta facendo ovviamente
può avere metodi in classi, quindi facciamolo
scrivi un metodo dist qui e diciamo
qui vogliamo tornare dot matematica e
di nuovo qui vedi che ottengo una dichiarazione
completamento su tutta la roba che è
disponibile nel runtime standard
libreria quindi voglio restituire questo punto X
volte questo punto X più questo punto Y volte
questo punto Y
per esempio per mio padre un po ‘più bello
va bene così una cosa che vedi qui è quella
le variabili di istanza vanno su questo ma
i metodi vanno sul prototipo e questo è
esattamente come gli script Java o Eggman
lo script sei prevede di fare lezioni e
questo è fondamentalmente il modello tipico
che le persone li usano e scrivono
consentiamo prototipi di catene in JavaScript
alcune altre cose nelle classi qui per
esempio potrei dichiarare un campo statico
l’origine statica equivale al nuovo punto zero
comma zero per esempio e te ne accorgerai
ora che la statistica va al costruttore
Metodi funzione dell’oggetto vanno in
le variabili di istanza del prototipo vanno su
istanza e così via e ora noi
capire cosa significa questo quando dico
punto punto vedi che ottengo un’origine
membro su punto ok, permettiamo anche consentire
per scrivere membri privati ma ma
con una svolta così potrei dire per esempio
colore oops privato tenere su stringa come
così e ora quaggiù se dico questo punto
il colore è uguale a rosso vedrai che noi
genera il codice e vedi questo
completamento delle istruzioni su questo mostra il
membro di colore ma se vado qui e
dì P punto vedrai che non c’è
membro chiamante su P perché è privato
quindi ti limitiamo ad accedere solo all’interno
la classe se dichiari le cose
privato però nel codice generato noi
semplicemente basta generare un membro normale
chiamato colore perché non c’è modo di
avere membri privati in JavaScript a
almeno non attualmente quelli echo Script sei
rotola con nomi privati che potremmo
Destinatari di nomi privati per questo tipo di
generazione di codice e forse fare a
lavoro migliore ma ora facciamo il meglio
possiamo andare bene
un paio di altre caratteristiche pulite noi
supporta ciò che chiamiamo automatico
proprietà questo pad
di dichiarare campi prendendo costruttore
argomenti con lo stesso nome di duro
come proprietà e poi dicendo questo
dot blot è uguale a blah è super super
comune quindi abbiamo una bella abbreviazione per
quello dove invece puoi semplicemente sul
argomenti del costruttore un pubblico qui e
pubblico qui e poi automaticamente
iniettare proprietà con quei nomi e
iniettare il codice per inizializzare quelli
proprietà supportiamo anche un altro eco
funzione di scrip sei che è l’impostazione predefinita
valore di argomento in modo da poter dare questi
argomenti valori predefiniti solo dicendo
uguale a qualcosa e quindi iniettiamo il
codice corretto per verificare se sono
non definito e così via e ora di
Ovviamente il tipo di sistema oops il tipo
il sistema ora sa che è permesso
per omettere gli argomenti nella chiamata inter
quindi non abbiamo un aspetto rosso su quello
okay, va bene, dovrei anche mostrarlo
che ovviamente supportiamo l’ereditarietà
per le classi proviamo a dichiarare la classe
il punto 3d estende il punto come questo e
allora facciamo solo dare un’occhiata a ciò che
è successo nel nostro codice generato così noi
abbiamo ancora la nostra lezione di punti qui
e ora abbiamo anche un punto 3d e tu
nota che il codice gen per quello è un
un po ‘diverso generiamo un
chiusura della funzione che prende la base
classe come argomento e quindi chiamiamo a
l’aiutante si estende che imposta il
prototipo di catena nel modo in cui si suppone
fare in JavaScript è per questo che le classi
sono difficili in JavaScript perché lo sei
dovrebbe fare tutte queste cose folli
proprio questo metodo viene iniettato
nel codice sorgente generato solo se
ci sono classi derivate di classe in questo
file e questa è l’unica volta che ci iniettiamo
codice che non hai scritto nel
file di output altrimenti il codice che ottieni
è semplicemente il metodo corpi che tu
ha scritto così non esiste una libreria di runtime o
nuove classi di raccolta o blah blah blah
o qualsiasi cosa associata al dattiloscritto
si tratta semplicemente JavaScript I ok
potrei scrivere qui a me stesso
costruttore che prende X : numero I sono un
y: numero virgola dire pubblico aggiungi un extra
proprietà z : numero come quello e poi
in qui dì chiamata super di X virgola Y per
esempio e ora vedi che generiamo
il codice appropriato per effettuare una chiamata
al super costruttore ecc ecc sì sì
questo è un corso che volevo mostrare
il prossimo è i moduli proviamo a farlo davvero
fammi provare e prendi un piccolo frammento di
codice qui sopra cosa volevo mostrare
prima, infatti, la funzione della freccia è così
lasciami andare nella cassetta degli attrezzi e lasciami afferrare
tracker qui andiamo bene fammi incollare
che qui ok, ecco un piccolo pezzo
di codice scorri questo in modo da poter vedere
quello che sta succedendo qui è un po ‘di classe
che dichiara un’istanza del contatore
variabile e quindi ha un metodo di avvio
e nel metodo di avvio abbiamo catturato il
onmousemove evento e avere un po ‘
gestore che incrementa il nostro contatore e
poi fa un registro di consultazione del contatore
quindi proviamo a eseguirlo in modo che tu possa
effettivamente eseguire l’output qui nel
parco giochi cerchiamo di far apparire gli strumenti F12
e vai alla finestra della console e poi a noi
vedi che hmm c’è c’è qualcosa
sbagliato con il nostro codice stiamo ottenendo un
un sacco di Nan uscirà da questo se torneremo indietro
e guarda cosa sta succedendo qui il
problema che abbiamo qui e se avessi
in realtà sto scrivendo questo codice in noi
avrei già visto cosa cosa
il problema era, ma se ci soffermiamo su questo
ora puoi vedere che questo è di tipo qualsiasi
il che significa che non conosciamo il tipo di
questo qui e quindi avremmo
ottenuto il completamento dell’istruzione per mostrare
conta e così via, ma la ragione è a
problema o la ragione è di tipo
c’è che non si sa mai cosa
stai per entrare in una chiamata di funzione
e a volte hai intenzione di ottenere il
sbagliato questo ad esempio in un tappetino
evento si ottiene l’elemento che la mossa
si è verificato su di te non capisci questo
il contesto circostante ora di tutti
ottenuto un po ‘da questo problema e ha ottenuto
la gente ne ha ottenuto abbastanza
che ci sia una proposta nello script Egmore
sei per supportare la cosiddetta freccia
funzioni o chiamato Bob Wian C
lambda funziona così potrei invece
scrivi questo codice come e freccia armata e
quindi in una funzione lambda questo è sempre
del tipo del contesto circostante
o è in senso lessicale che significa che io
ottenere la funzione esterna e
il modo in cui generiamo il codice è quello che facciamo
la piccola cosa cattiva che normalmente
hanno a che fare, dove si dice che equivale bar
questo e poi quel punto dentro il tuo
funzione o qualunque cosa possiamo semplicemente codificare
generalo per te invece qui
ciò che è interessante va bene e andiamo
in realtà appena sorta di correre e dimostrare di
noi stessi che che ora funziona sì
stiamo vedendo cosa avrebbero dovuto vedere
penso che sia interessante anche se nella mia
piccolo topo muoversi qui diciamo che io
non si riferiva a quello esteriore allora
noterai che non lo generiamo
quella chiusura quindi la iniettiamo solo se tu
in realtà lo faccio e poi lo riscriviamo a
underbar questo invece va bene ora l’altro
cosa supportiamo in dattiloscritto è
moduli diciamo che volevo mettere questo
classe in un modulo che potrei scrivere qui
modulo aperto riccio e qui vicino vicino
whoops ricci, naturalmente, vogliamo dare
questo modulo un nome o chiamalo modulo
utils e vedrai che mentre noi
generare di nuovo per un modulo è a
chiusura delle funzioni dove siamo allora per
tutte le cose che esportate
il modulo se dico tracker di classe di esportazione
quindi creiamo una proprietà sul modulo
oggetto per ciascuno degli articoli esportati in
questo è anche un modello molto tipico
in JavaScript e ora ovviamente noi
prendi gli squigglies rossi perché c’è
nessun tracker nell’ambito globale è ora
utilizza punto e se dico punto vedi
che c’è un tracker lì dentro e
quello è quello che quello che noi
voglio dire che posso davvero andare in profondità con
queste cose
Acme doc o dot utils e tu ci vediamo
basta chiudere le chiusure delle funzioni
sorta di fuori dallo schermo lì e ora io
devo fare riferimento ad esso come un comico o
dot utils ma noterete che lo facciamo
rintracciarlo nel sistema di tipi in modo che lo sappiamo
che il nome di questo tipo è accurato
utils Accord infatti abbiamo consentono anche
per importare i moduli quindi posso dire di importare AC
u è uguale a Acme o dot util, per esempio
e poi qui posso usare la stenografia
per questo un Cu e se guardi in basso
qui vedrai che cosa abbiamo
generato è solo una variabile che afferra
quell’oggetto modulo e poi lo usi
per fare riferimento invece a questi moduli noi
chiama i moduli interni e sono
sono molto tipici come jQuery per
esempio è un esempio di un modulo chiamato
scrittura del dollaro che ha un sacco di
roba in esso um
c’è un altro tipo di moduli che sono
che sono in uso comune là fuori chiamato
i moduli GS comuni e i nodijs li utilizzano
e quelli sono fondamentalmente come fonte
file che vengono caricati in modo dinamico a
runtime e hanno la capacità di dichiarare
le loro esigenze in termini di altro
moduli e dichiarano le loro esportazioni in termini
di un oggetto di esportazione e supportiamo
quelli quindi lascia che provi effettivamente a chiudere
giù nel parco giochi qui e poi andiamo
torna nello studio visivo e proviamo
per aprire un server TS qui e lasciami
prova a scrivere una piccola nota di due moduli
applicazione server così prima cosa sono
sto per importare a
fare riferimento a questa tipizzazione statica del nodo
punto J S che si trova in un file di dichiarazione
chiamato nodo punto d TS e io semplicemente posto
un riferimento nel mio nel mio file sorgente
che dice al compilatore che quando tu
compilare questo file include anche quello
altro file nella compilation e ora
Posso dire import HTTP uguale a
modulo HTTP che è uno dei
moduli definiti dal nodo e infatti se io
vai alla definizione di questo ragazzo che vedrai
che salta
nelle informazioni di tipo statico aggiunto
file per HTTP e questo è quello che è
da cui si alimenta per dare
la collina di completamento di dichiarazione di me va bene così lascia
ora provo a scrivere una funzione qui
funzione di esportazione semplice server che prende
un codice di porta sul numero virgola messaggio su
stringa così e qui diciamo noi
voglio chiamare HTTP dot creare server e
vedi che otteniamo il completamento dell’istruzione
il nodo qui crea server interno è un
cosa che richiede una funzione di callback
che ha due parametri richiesti e
risposta quindi posso dare a quei ragazzi e
allora qui
Posso scrivere il corpo del mio codice
ora ho intenzione di incollare in alcuni
roba qui così così non devi guardare
io scrivo, ma nota una cosa
quando scrivo il punto risultato, otteniamo effettivamente
completamento delle dichiarazioni su questo, quindi galleggiamo
i tipi dalla dichiarazione di creare
server nella funzione di callback
perché sappiamo quali sono i tipi di quelli
gli argomenti di callback sono e quindi possiamo
scorre tutto senza che tu debba
dichiaralo esplicitamente ovunque va bene
torna qui e dì punto ascolta
1337 prima non dispiace per il porto che era
l’ argomento per cui siamo passati bene così
questo è il primo modulo del nostro
piccolo server fammi creare un altro vedere
qui qui apro un altro file vuoto e
ora creiamo un modulo che usa il
modulo che abbiamo appena scritto così sto andando
per dire import server oops
il server è uguale al modulo del server e ora I
effettivamente hanno riferito che il modulo
Ho appena scritto e quindi se dico il punto del server
ora ottengo effettivamente il completamento dell’istruzione
sul modulo che ho appena scritto così posso
ora chiama il server semplice e dice
devi passare un numero di porta così 1337
virgola ciao vai per esempio e poi
diciamo anche solo diciamo il punto log della console
di ascoltare piace così là e andiamo
salva quel ragazzo tutto bene e ora lasciami fare
saltare fuori e utilizzare effettivamente il
compilatore da riga di comando quindi passeremo a
nodo R mi dispiace nodo demo e qui dentro
vedrai ora che abbiamo i nostri tre
file che il file di dichiarazione del nodo e
i due file dattiloscritti che ho scritto
ora posso semplicemente dirlo per compilare
ciao TS, non ho nemmeno bisogno di dirlo
sul server punto TS perché il compilatore
traccia automaticamente tutto il mio
importazioni e tutti i riferimenti che io
avere e trovare l’intero grafico dei file
che deve essere compilato e poi
compilare quelli così se guardiamo al
l’output che è stato generato ora lo abbiamo
due file ciao punto j e il nostro
server pieni di energia potremmo solo un po ‘
dai un’occhiata qui server js se siamo fianchi
proviamo a dare un’occhiata a questo e
vedrai che il codice è lì dentro
è il codice che ho scritto con la mia importazione
cambiato in un bisogno e se scriviamo
ciao punto J che vedrai di nuovo è
praticamente lo stesso codice, facciamolo
prova ad eseguire un nodo su questo server in modo nodo
Ciao
e sta ascoltando e ora andiamo a
ah liberati di questo ragazzo lì e poi
andiamo al localhost 1337 lì e noi
dovresti vedere ciao vai lì andiamo sì
ok, quindi è un po ‘sulle classi
e i moduli ah potrei solo rapidamente
riassumi qui quello che fondamentalmente tu
so che queste sono le cose che ci permettono
per fare sviluppo di applicazioni scalabili giusto e
ed è così che scrivi
applicazioni veramente grandi e strumenti
questo capisce cosa sono i contratti
sono tra diversi moduli e hanno
sono fatti rispettare così trovi gli errori
prima di eseguire la tua app al posto di
mentre lo stai facendo
siamo allineati con l’emergere
standard così come ho detto prima classi
le funzioni della freccia dei moduli sono tutte le cose
che sono proposti per equi script sei
che stiamo prendendo ispirazione da e
supportiamo i due popolari moduli
sistemi che sono là fuori comuni
fantastico che viene utilizzato da nodejs e quindi
Moduli AMD che probabilmente sono i più
caricatore comune ci vuole punto dot Jas
e questo è usato per il modulo asincrono
caricamento in un browser e supportiamo entrambi
di quelli va bene l’ultima cosa che volevo
spettacolo era solo alcune applicazioni più grandi
perché abbiamo fatto un sacco di
piccole cose qui , proviamo a caricare
su alcuni dei nostri campioni la prima cosa che sono
andando ad aprire è vediamo la barra demo
scheda immagine questo è uno dei campioni
quello che includiamo e carichiamo solo
punto su app – sì quindi questo è un multi
applicazione nodejs del modulo che utilizza
MongoDB e il framework Express così
qui vedi che importiamo i moduli
da vari luoghi vengono HTTP e URL
dal nodo DB è in realtà un modulo che
abbiamo scritto che possiamo navigare e guardare
e qui lo vedi a turno
utilizza MongoDB modo da poter navigare in
e controlla la tipizzazione statica di
un MongoDB qui vedi che abbiamo aperto
e creare un server per creare una connessione
ad esso e poi solo per comodità
abbiamo definito alcuni tipi di interfaccia
rappresentano le entità che siamo
memorizzazione nel database perché sono
tutto dello stesso tipo ed è davvero
in realtà conveniente avere una dichiarazione
completamento e validazione su questi
entità che noi che stavamo mettendo
cosa giusta nel database e
poi abbiamo anche scritto un aiuto
funzioni come ottenere l’utente qui che prende
un ID e quindi ti chiama in modo asincrono
indietro quando viene prelevato dall’utente dal
database e qui vedi che usiamo il
file di interfaccia che noi che abbiamo solo
dichiarato ora possiamo usare l’IDE per
navigare in questa applicazione più ampia possibile per
esempio trova tutti i riferimenti di ottenere utente
e vedrai che qui è il
Dichiarazione di esso e poi ci sono due
i riferimenti nell’app qui sono uno
quello che penso sia interessante se tu
guarda questo
la disfunzione qui è di tipo zero
annotazioni in questa funzione, ma sappiamo
tutti i segreti a riguardo perché app
altrove è tipizzato come di tipo
Express server sappiamo che Express
il server ha un metodo get che lo prende
ha un sacco di sovraccarichi e uno di loro
è uno che accetta una funzione
ritorna che ha due argomenti
richiesta e risposta e quindi possiamo dedurre
quali sono i loro tipi sappiamo cosa sono
tipo di utente è quello che abbiamo dichiarato
sopra nel modulo database e così quando
siamo qui se dico che la richiesta ti punisce
vedi che ottengo il completamento dell’istruzione se io
dì punto utente vedi che ottengo
completamento dell’affermazione quindi sappiamo tutto di
questa roba senza aver bisogno di dichiarare
più e più volte è dedotto dal
codice ora nell’interesse del tempo non lo sono
andare a correre in realtà questo ho intenzione
per provare e cambiare e mostrarti un altro
piccolo campione R che è uno chiamato
nave da guerra e proviamo a caricare quel ragazzo
qui e liberiamoci di questo tizio
e questo tizio si tratta di una piccola applicazione che
un’app browser che utilizza jQuery e
jQuery UI e vedrai che noi
riferito al Taiping per jQuery e
per l’ interfaccia utente di jQuery e lascia che ti mostri come
questo funziona allora perché il modello
tra queste due librerie è quello
L’interfaccia utente di jQuery è una libreria su cui si basa
all’inizio di jQuery in realtà è una sorta di scimmia
patch nell’oggetto dollaro e aggiunge
proprietà aggiuntive che sono per
Manipolazione dell’interfaccia utente quindi se guardiamo al dollaro
beh prima di tutto vedrai che noi ora
avere informazioni sul tipo per jQuery così noi
conosci i sette sovraccarichi di dollaro che siamo
andando a scegliere quello che prende un
stringa e poi stiamo andando a premere punto
su di esso e qui vedi tutte le cose
quello che puoi dire sul dollaro ora questo
è la roba che ti salva dall’avere
il foglio dei trucchi accanto a te o o
cercare in qualche documentazione HTML
giusto questo è quello che gli strumenti dovrebbero
fai per te se selezioniamo la classe R allora
possiamo effettivamente andare alla definizione di
quel ragazzo e tu vedi ora saltiamo dentro
il
file di dichiarazione jQuery che vedi qui
l’interfaccia principale per jQuery e ha
un passaggio pubblicitario infatti ha due sovraccarichi
di classe AD ora se torniamo diciamo
ne selezioniamo uno dall’interfaccia utente di jQuery
ad esempio trascinabile e diciamo
andiamo a definire quel tipo
noterai che saltiamo in a
file diverso che dichiara lo stesso
interfaccia così in interfacce dattiloscritte
sono aperti e possono essere file multipli
contribuire alla stessa interfaccia e
è così che abbiamo modellare questa nozione che uno
il modulo fa qualcosa e poi un altro
il modulo si basa su quel primo modulo di
aggiungendo cose ai suoi tipi e, quindi, noi
può modellarlo nel sistema tipo e
questo è solo super- utile, va bene lo scorso
la cosa che volevo mostrare è davvero grande
proietta il compilatore dattiloscritto stesso
fammi provare a caricarlo qui e
selezioneremo solo uno dei file
la compilazione del compilatore è di circa 26.000
linee di tipi di codice dattiloscritto qui io
caricato il file che contiene il file
definizioni astratte della classe dell’albero della sintassi
e io e come ho detto tutto questo è aperto
fonte quindi è ‘roba che si può
solo afferrare e guardare in cui possiamo navigare
qui per esempio vai alla definizione di
la classe di dichiarazione del caso che è a
classe che estende la dichiarazione e così
avanti e così posso navigare intorno al
intero compilatore ora hai visto che al
all’inizio di questo file faccio riferimento a un file
chiamato typescript es se andiamo al
soluzione Esplora in Visual Studio
vedi che in realtà abbiamo inferito il
tutto il progetto a cui sto lavorando qui
da quei riferimenti perché se andiamo
a-tipografica es vedrai che che nel
il riferimento al turno è un insieme di altri
file e attraverso questi riferimenti
compilatore può avere un quadro completo ed
quasi non importa quale file tu
aperto conosciamo il contesto e quindi
possiamo fornirti tutto il
informazioni appropriate così qui dentro
questo è il file principale per il dattiloscritto
compilatore c’è una classe chiamata
compilatore dattiloscritto che ha un prezzo ah
il compilatore dattiloscritto crea un’istanza a
parser possiamo andare al definito
missione del parser il parser intern
istanzia uno scanner che possiamo andare a
definizione di quel ragazzo e quindi è possibile
sorta di navigare molto facilmente e
vedere come il compilatore è costruito ciò che io
voleva mostrare però è è uno dei
cose davvero belle che puoi fare una volta
hai informazioni di tipo statico e
sono cose come i refactoring e uno
dei refactoring che supportiamo è rinominare
per esempio diciamo che qui nel
scanner Ho un campo chiamato
ha chiamato il numero di linea che ho dimenticato di
rinominare quello indietro alla linea dal
l’ultima demo che ho dato comunque c’è un campo
chiamato numero di linea se guardo tutti i
luoghi a cui questo ragazzo fa riferimento se io
vai a definire questo ragazzo quindi vado
per trovare riferimenti su questo ragazzo
vedrai che ci sono un sacco di
riferimenti nello scanner stesso e
poi ci sono alcuni sopra nel parser
che possiamo guardare ah e eccone uno
per esempio nel parser dove noi
fai riferimento a una linea ora qui sopra c’è
anche una proprietà chiamata linea ok quindi lasciami
prima tornare allo scanner e provare a
rinomina qui ah refactor rinomina e chiama
questa linea di ragazzi invece va bene se vado
di nuovo al parser si vede che ha
ora rinominato numero di linea qui a
linea ok ma ora cos’è veramente
interessante è ora ho due cose
chiamata linea uno proveniente dallo scanner
e poi ne ho uno che viene da questo
linea chiamata cosa che sto usando
qui come diritto locale diciamo questo
Ora dovevo rinominare la mia linea di scanner
torna al numero di linea ok ora se questo fosse
Codice JavaScript che sarebbe follemente
difficile da fare bene perché devi
guarda ogni riferimento alla linea in tutto
i file di origine e decidere al volo
è questo l’ uno o è quell’altro
ma questo è ciò che fanno gli ID per quanto ne sai tu
tutto il giorno giusto, loro perché attraverso
tipizzazione statica sappiamo la differenza in modo
fammi prendere questo file parser qui e
in realtà lo metto giù al e al
in basso e ora proviamo a farlo
mostra entrambi qui vedi quello
nel mio scanner qui vedi quello
non è collegato a questo, torniamo indietro e
pronunciare il nome del refactore
ora chiamiamolo questo numero tiranti
invece e vedrai che abbiamo ribattezzato
quel ragazzo ma non quel ragazzo perché noi
capire la differenza tra il
due così così eccoci qui è di nuovo uno
di quelle cose che fanno solo strumenti
incredibilmente prezioso quando stai scrivendo
applicazioni di grandi dimensioni va bene cosa finale
voglio mostrare è solo compilando il
compiler scusa ci andiamo
quindi qui è la fonte di tutto il
compilatore che noi che abbiamo appena preso un
guarda ora ho intenzione di provare a compilare
il compilatore ho intenzione di dirlo per mettere
l’output in un file chiamato tsks quindi
Ho intenzione di dirlo per generare anche
generare dichiarazioni e sto andando a
compila dattiloscritto e così sta andando
per produrre prima due file che sta per
produrre il compilatore in un file chiamato
tsj s e sarà semplicemente chiaro
JavaScript poi andrà anche a
produrre un file di dichiarazione che
rappresenta l’interfaccia esterna del
compilatore quindi se guardiamo a ciò che abbiamo visto
quello che abbiamo qui lo vedrai lì
ci sono due file prodotti
tsj s e poi TS d TS e questo è il
file di dichiarazione per il compilatore e
ora se lo carico su nel
ambiente di sviluppo qui vediamo
va e basta e basta
liberati del parser e qui vedi
fondamentalmente l’ estratto pubblico di tutti
le cose dichiarate nel compilatore
qualcuno che usa il compilatore come servizio
potrebbe usare e così ora posso in un certo senso
continuare la catena del mio modulare
sviluppo posso prendere il mio dattiloscritto
compilatore eseguirlo attraverso il mio minify o fare
qualunque cosa è che io faccio il mio ufficio cater
prima di spedirlo e poi posso continuare
su con il file di dichiarazione e quello
è davvero ciò che rappresenta il mio esterno
interfaccia giusta e così vedi come te
può creare manualmente i file di dichiarazione
per JavaScript esistente ma se tu
in dattiloscritto possiamo fare il
dichiarazione dei file automaticamente
va bene, penso che sia tanto quanto me
avere tempo per aver voluto solo brevemente
riassunto guardando ciò che è incluso
compilatore open source dattiloscritto scritto
in dattiloscritto utensili ci sono a
campo di gioco ospitato dal browser che utilizza
questi servizi e perché è aperto
fonte a cui chiunque può creare plugin
altri ambienti di editing ne abbiamo creato uno
per studio visivo che includiamo noi
includere statico
digitazioni di un gruppo del popolare
librerie là fuori come nodejs e
jquery e anche un sacco di campioni e a
specifica del linguaggio formale così come io
iniziato a dire scala dell’applicazione
lo sviluppo di javascript è difficile, spero
Ti ho mostrato qui come dattiloscritto
rende più facile e mi piacerebbe che tu lo facessi
vai a dare un’occhiata a te stesso
dattiloscritto o scaricati play
con esso e facci sapere cosa ne pensi
grazie
tu
Please follow and like us: