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 noi
sempre più sentito dal nostro
i clienti che conosci in particolare su
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 è quello che JavaScript in realtà
non è mai stato progettato per scrivere in grande
applicazioni lo sapevi che lo era
c’era un po ‘come in origine
destinato a questi 10 eventi di linea
gestori e ora stiamo scrivendo 10.000 o
100.000 app di linea in esso e nella lingua
in realtà non ha grandi dimensioni
concetti di strutturazione delle applicazioni come
classi o moduli e anche è
interamente digitato in modo dinamico che significa
non ci sono informazioni di tipo statico disattivate
di cui possiamo alimentare intelligente
utensili e se pensi a cosa
è che alimenta gli IDE intelligenti che
noi tutti usiamo oggi è davvero statico
digita le informazioni che lo rendono possibile
effettuare il refactoring sicuro del completamento del codice
trovare tutti i riferimenti vanno alla definizione
etc etc così due due anni e mezzo fa
dove stavamo pensando a dove siamo
andare avanti con lo sviluppo di JavaScript
strumenti pensavamo che sarebbe stato davvero pulito se
potremmo rafforzare JavaScript ma con
quei concetti chiave che mancano per
sviluppo su larga scala come le classi
moduli digitando staticamente ma ma
fare ma in questo modo
non sacrifica la cosa inerente
questo rende JavaScript così interessante, ad esempio
standard aperti multipiattaforma web e così via
avanti ed è questo che tipo
presa è che è un linguaggio per l’applicazione
scala lo sviluppo di JavaScript, quindi è a
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
pianura Javascript e lo fa in modo che il
compilatore stesso e il codice che esso
produce corse su qualsiasi browser su qualsiasi host
qualsiasi sistema operativo e il compilatore
e i servizi linguistici associati
le tipizzazioni di libreria e così via sono tutte
open source abbiamo messo questo progetto in
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 tipo di pausa funziona con tutto il
quadri e librerie esistenti che
sono disponibili là fuori oggi come
nodecore o sottolineatura backbone jQuery
prototipo etc etc ci sono un sacco di loro
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
Oggi invece la cosa interessante è che
c’è tutto a costo zero a
dattiloscritto è puramente un tempo di sviluppo
strumento una volta compilato sei rimasto
con un semplice JavaScript e non c’è
componente di runtime che deve essere
presente al fine di far funzionare il generatore
codice in realtà ci limitiamo a compilare
JavaScript idiomatico il JavaScript che
avresti scritto se volevi
emula classi o o moduli e il
il codice finale funziona come me
in qualsiasi browser qualsiasi host su qualsiasi sistema operativo così
proviamo a fare un po ‘
un po ‘di demo e vedere cosa sembra
come in azione ecco il dattiloscritto
sito web in realtà è una copia locale
abbiamo nel caso avessimo perso la connettività
ma ma questo è quello che sembra e
andremo a giocare con
dattiloscritto nel campo da gioco dattiloscritto
che è fondamentalmente una pagina web in cui tu
può dove puoi digitare dattiloscritto e
vedere l’output compilato in una finestra
sul lato ho intenzione di passare qui e
prendi la mia prima piccola demo e così qui
vedi alcuni JavaScript e qui
vedi l’output compilato che
capita di essere esattamente lo stesso perché
ora siamo solo un superset di JavaScript
se guardi questo codice c’è
qualcosa di divertente su questo codice, io
significa che sono come prendere un parametro X e
Sto aggiungendo una proprietà alla nostra impostazione a
proprietà ma lo sto anche pagando
insieme ma hey questo è valido
JavaScript lo capita proprio di non esserlo
significativo ma è valido ora ora
sarebbe bello diciamo per esempio quello
Sapevo che X sarebbe stata una stringa
sicuramente sarebbe bello se potessi in qualche modo
indicalo e sai che non è come
stiamo inventando qualcosa di nuovo in questo
Senta che tu sappia ad esempio se usi un
strumento come la chiusura di Google dove hai messo
digitare annotazioni nei commenti ci sono
ci sono strumenti che possono controllarli
cose per te ma per avere il tuo tipo
il sistema 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 tu
pilota ottieni JavaScript e tu puoi
basta usarlo ovunque e così via
cosa siamo ciò che stiamo facendo qui e così
la prima cosa che vedi è che otteniamo
qualcosa qui che dice che non c’è un nome
proprietà su tipo stringa che è quale
è vero non c’è anche noi vediamo se noi
passa il mouse sopra V che abbiamo dedotto
il clustering delle stringhe è una stringa e
quindi V è di tipo stringa e vediamo
quell’allarme è una cosa che prende un
stringa e restituisce vuoto e quindi esso
è valido per passarmi ora lasciami provare
per sbarazzarsi di quella linea ed errore qui
e proviamo uno degli altri primitivi
tipo numero per esempio e ora vediamo
ora stiamo deducendo quel numero più
il numero è un numero e ora stiamo provando
passare un numero ad un metodo che
si aspetta una stringa e che a sua volta è
anche un errore quindi eccoti un po ‘più di te
conoscere il controllo del tipo statico
proviamo ad usare un bool e
passo e ora vediamo quell’operatore +
non può essere applicato a bool bene
in realtà può in JavaScript è proprio così
succede che non si ottiene un significato
risultato giusto allora quindi in un certo senso cosa
si tratta di provare a sifonare
fuori quel sottoinsieme significativo di Java
sottoinsieme semantico di JavaScript che rende
senso e questo è fondamentalmente ciò che cosa
cosa stiamo facendo qui proprio ora noi
anche consentire sono tipi più complicati
come un rilancio, per esempio, posso dirlo
x è un array di stringhe e ora quando indicizzo
in X e premi punto che vedi che noi
sapere che ci sono stringhe e
quindi possiamo mostrarti tutto il
metodi disponibili su stringa e
non solo i loro nomi ma anche i loro
firme in modo che possiamo vedere quel codice di assistenza
a è 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 XA 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 nominarli credo di avere questo
piccolo esempio qui che ti mostra come
potresti scrivere un’interfaccia con
due proprietà in esso è davvero giusta
l’interfaccia qui la pensa più come sono
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 un paio di
cose che vale la pena notare prima di tutto se
hai seguito il
generato JavaScript si vede che il
JavaScript generato è davvero giusto
il codice JavaScript che digiti meno il
scrivi annotazioni e meno il tipo
dichiarazioni così tutto questo è lì
sapere per la convalida e un tool IDE
sake e poi 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 ti
scorrere solo poche annotazioni e
allora possiamo fluire attraverso il codice
una volta che sappiamo cosa sta succedendo fammi
prova a mostrare qui anche cosa
succede ad esempio diciamo che aggiungo un
proprietà extra per il mio tipo di interfaccia qui
ora noterai che ho degli errori qui
si dice processo è manca uno dei
uno dei parametri che ho potuto 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
vedere che deve essere un bool se do una visione
quello non è un pool ora è un errore quindi
quindi possiamo possiamo esprimere alcuni di questi
le parti più complesse di ciò che accade
in in JavaScript lasciatemi in realtà cerco di
prendi questo pezzo di codice qui sono solo
andando a copiarlo e poi passiamo
in uno studio di visualizzazione e solo ottenere
noi stessi un file dattiloscritto vuoto così
ora parte di dattiloscritto la distribuzione
è un plug-in per Visual Studio che utilizza
il compilatore e il servizio linguistico a
accendi tutti questi intelligenti
strutture nell’IDE come ho detto questo
roba è tutto open source quindi puoi usarla
altrove dove hai visto un
esempio di utilizzo in un browser web
qualcuno potrebbe creare un plug-in di eclissi
e faccio la stessa cosa che sto andando
per incollarlo qui e poi continuare
giocare con il nostro codice qui così
una cosa che ovviamente puoi esprimere
fruste nei tipi è è metodi così ora
stiamo dicendo che la cosa ha a e B
proprietà di tipo numero e un foo
metodo così ora quando faccio una dichiarazione
il completamento si vede che abbiamo un foo e
quando apro ricci mi dice cosa
la firma di quel ragazzo è e così via
e di nuovo qui noi
e 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, ad esempio, mi piacerebbe
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
quello nel sistema di tipi in modo che possiamo seguire
e quando dici che punto su quel dare
hai di nuovo la giusta informazione sul tipo
ora se guardiamo qui se dico X dot foo
vedrai che ora ce ne sono due
sovraccarichi i nostri vecchi ti chiedono in qualche modo ah
quindi se ti do un numero qui vai
quindi elaborare ora restituisce un numero ora
questa roba qui in realtà la nostra è davvero
lo stesso di scrivere questo ma così foo cosa
Sto 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
stringa intorno prende 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 lo farai, tornerò e
ecc. ecc., quindi in pratica possiamo modellare tutto
queste cose che vanno avanti nel
JavaScript Dom jQuery tutto a tutti
quadri ok lasciatemi sbarazzarmi 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
è così che ottieni privacy
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 vedrai che l’abbiamo dedotto
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 in modo in modo che possiamo sorta di Grok tutto
avanti e ora quando dico bar un uguale
accumulatore e poi un punto che vedrai
che c’è una pubblicità qui e che ho bisogno
passare un numero cinque e così via
ora questo mostra come possiamo dedurre
allenatore alla tua scrittura ma a volte
inferenza, vuoi inferenze per entrare
l’altra direzione che puoi, per esempio
Ho una dichiarazione di un’interfaccia
che vuoi andare a implementare 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
propertyname allora mi dice cosa c’è
sbagliato mi dice che hey sei
annuncio di proprietà mancante dal braccio 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
capisci che voglio dire, ecco cosa
gli strumenti dovrebbero fare per te e
questo è ciò che noi facciamo qui
va bene un altro posto dove questo tipo di
la digitazione contestuale è interessante
in realtà dovrei mostrare qui anche questo
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 mouse spostare qui, che è uno dei
gli eventi che puoi gestire sono uguali
funzione di e e quindi aprire il punto e riccio
e noterai che in realtà lo sappiamo
che cos’è e qui come sappiamo che è
perché sappiamo quale documento è
il documento è il documento del documento radice
ha una mossa non del mouse che prende un 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
il completamento della tua dichiarazione su e quando tu
dì punto e così tanta deduzione
andare alla cosa bella è che posso
in realtà vai alla definizione di mouse
muoviti e guarda cosa è questa cosa
e questo ti salta in questo
caso particolare un file chiamato lib DTS
e questo è ottomila righe di
dichiarazioni di dattiloscritto che dichiarano il
intera struttura del dom e il
Questa è la libreria runtime JavaScript
effettivamente generato dai file IDL
che sono standardizzati così quindi sappiamo che è
correggi che l’informazione sul tipo è
effettivamente disponibile è proprio questo
JavaScript non ha alcun modo di
trasmettendo queste informazioni a voi
poi in fase di esecuzione quando è troppo tardi
così ecco possiamo vedere che muovere il mouse è
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 super prezioso quindi fammi vedere
dove volevo andare da qui lasciami
torna indietro e riassumi semplicemente un
un po ‘sul tipo di script qui
quindi in pratica cosa cosa che dattiloscritto
non è che formalizza il tipo di javascript
sistema e fornisce una visione statica di esso
ma non stiamo cercando di inventare un nuovo
tipo di sistema in realtà ci stiamo piegando
all’indietro per rimanere fedele a ciò che realmente è
Sistema di tipo JavaScript che vedi che noi
fare un sacco di inferenza di tipo e
tipizzazione strutturale e in e là e
e la realtà è che quando sei
scrivendo il codice dattiloscritto in realtà finisci
scrivendo pochissime annotazioni di tipo e
allora scorriamo da li ‘da li’
come ho detto funziona con esistente
Librerie JavaScript e per il tipo
il sistema geek là fuori non è un
tipo di sistema tipicamente provetto perché
javascript non è in un certo senso dimostrabile
digita sicuro mentre lo fai prima
definisci cosa intendi veramente per quello ma
ma il punto qui è che non è un
sistema di tipo per il bene tradizionale di
tipi di sistemi come le prestazioni o simili
validazione rigorosa piuttosto è un tipo
sistema che ti aiuta a scrivere codice e
quello riflette se sai la realtà se
lo farai ma è facoltativo e tu
non devi usarlo ma quando lo usi
l’attrezzatura può aiutarti a nascere
okay fammi provare a saltare indietro e mostrare
alcune delle altre caratteristiche che sono
disponibile volevo mostrare classi e
moduli e ci 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
dì che ha due campi mi dispiace è la mia battitura
non grande x numero di due punti e due punti
numero come questo e tu vedi che noi
generare il codice che è sorta di
tipico per per per classi di scrittura
dove hai una chiusura in cui tu
avere una funzione di costruzione che noi quindi
ritorna fuori dalla chiusura e
ora posso salvare il nostro p nuovo punto
e ora sappiamo che su p c’è una X
e così possiamo darti una dichiarazione
completamento in modo da poter dire che P punto x è uguale
10 p punti y equivale a 20 e così via va bene ora
ovviamente sarebbe bello poterlo fare
dare gli argomenti al mio punto qui ma
se lo faccio, ricevo un errore perché noi
non ho ancora scritto quel costruttore ma
potremmo andare a destra di un costruttore di X
numero virgola virgola y numero due punti e pollici
qui possiamo dire questo punto X e ancora tu
vediamo che otteniamo il completamento dell’istruzione su questo
perché sappiamo dove sei in questo punto
y è uguale a y e così via ora questo questo
la sintassi della classe è in linea con
akma script sixes attuali proposte per
classi così così la classe e il modulo
estensioni che vedi in dattiloscritto
sono in realtà in un senso di anteprima di
cosa succede alla mia sceneggiatura sei ma
poi in cima a quello abbiamo stratificato
tipizzazione statica facoltativa che non fa parte
di ciò che sta facendo la critica di Equus
quindi ovviamente puoi avere dei metodi
classi quindi scriviamo un metodo su disco
qui e diciamo qui vogliamo
ritorna il punto di massa e di nuovo qui vedi io
ottenere il completamento dell’istruzione su tutto il
tutta la roba disponibile in
libreria di runtime standard, quindi voglio
restituisci questo punto x volte questo punto X plus
questo punto e volte
smetti perché ad esempio per mio padre un po ‘
va bene, quindi una cosa che vedi qui è
quelle variabili di istanza vanno su questo ma
i metodi vanno sul prototipo e questo è
esattamente come JavaScript ha visto lo script regni
sei ha in programma di fare lezioni e questo
è fondamentalmente il modello tipico che
le persone li usano e scrivono prototipi
cambiare in JavaScript ne permettiamo un altro
cose nelle classi qui per esempio io
potrebbe dichiarare un campo statico statico
l’origine è uguale al nuovo punto zero virgola 0
per esempio e te ne accorgi ora
la statica continua con la funzione di costruzione
i metodi oggetto vanno su un prototipo
le variabili di istanza vanno sull’istanza
e così via e ora capiamo cosa
questo significa che quando dico punto punto tu
vedere che ottengo un membro di origine sul punto
okay, permettiamo anche di permetterti di scrivere
membro privato ma ma con una svolta così
Posso dire ad esempio il colore privato oops
tieni la corda così e ora quaggiù
se dico che questo punto è uguale al rosso
vedrai che generiamo il codice e
vedi che questa affermazione è completa
su questo mostra il membro del colore ma se io
vai qui e dì che punto P vedrai
che non ci sono membri del collare su P
perché è privato quindi ti limitiamo a
accedi solo all’interno della classe se tu
tuttavia dichiarare le cose come private
il codice generato semplicemente
genera un membro normale chiamato colore
perché non c’è modo di avere
membri privati in JavaScript almeno
al momento non un rescritto di sei secondi
con nomi privati 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 altri ordinati
caratteristiche supportiamo ciò che chiamiamo
automatico
proprietà questo modello di dichiarazione
campi con argomenti del costruttore
gli stessi nomi duri come il
proprietà e poi dicendo questo punto blah
è uguale a blah è super super comune, quindi noi
avere 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à sosteniamo anche un altro uovo
nessuna funzione di scrip sei che è 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
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 diamo solo un’occhiata a cosa
è 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 questo è il motivo per cui le classi
sono difficili e JavaScript perché lo sei
supposto fare tutte queste cose pazze
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 ragione 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
è semplicemente solo JavaScript, ok
potrei scrivere qui a me stesso
costruttore che prende il numero dei due X.
Sono a la jolla numero virgola dire pubblico
a un extra pop facile numero di due punti
così e poi qui dentro, chiama
super di X virgola Y per esempio e ora
vedi che generiamo l’appropriato
codice per effettuare una chiamata al super
costruttore ecc ecc sì sì, questo è un
Clase quello che volevo mostrare il prossimo è
moduli proviamo a lasciarmi davvero provare
e prendi un piccolo snippet di codice
ecco cosa volevo mostrare prima
in effetti sono le funzioni di freccia quindi lasciami andare
alla cassetta degli attrezzi e lasciami afferrare a
tracker qui andiamo bene fammi incollare
che qui ok, ecco un piccolo pezzo
di codice scuola questo in modo che tu possa 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 catturiamo il
onmousemove evento e avere un po ‘
gestore che incrementa il nostro contatore e
quindi consulta un registro del contatore
quindi proviamo a eseguirlo in modo che tu possa
effettivamente eseguire l’output qui nel
parco giochi portiamo su gli strumenti di 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 non 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 film di topo
allora ottieni l’elemento che la mossa
si è verificato su di te non capisci questo
il contesto circostante ora qualsiasi
tutti sono stati un po ‘colpiti da questo problema
e le persone hanno ottenuto un po ‘di bit
abbastanza da
che c’è una proposta in egmore
script sei per supportare ciò che viene chiamato
le funzioni della freccia o quello che abbiamo in c-sharp
chiamate funzioni lambda così potevo
invece scrivi questo codice come braccio freccia elettronica
e quindi in una funzione lambda questo è
sempre del tipo di circostante
contesto o il suo significato lessicale
che ottengo il dis della funzione esterna
e il modo in cui rivestiamo generano quello che siamo noi
fai la piccola cosa cattiva che tu
normalmente devi fare dove dici bar
questo è uguale a questo e poi quel punto
dentro la tua funzione o quello che possiamo
semplicemente il codice lo genera per te
invece qui ciò che è interessante
okay e in effetti facciamo solo una specie di corsa
e provare a noi stessi che questo ora
funziona, stiamo vedendo quello che siamo
dovrebbe vedere che è interessante
anche se nel mio piccolo topo si muove qui
diciamo che non mi riferisco alla
fuori questo allora noterai che noi
non generare quella chiusura così noi
iniettato solo se lo fai effettivamente e
poi lo riscriviamo per sottolineare questo
invece ok ora l’ altra cosa noi
il supporto in dattiloscritto è moduli
dire che volevo mettere questa classe in a
modulo potrei scrivere qui modulo aperto
ricci e quaggiù ricci oops ricci di
Certo , vogliamo dare questo modulo a
chiamalo o chiamalo modulo utils e lo farai
vediamo che mentre generiamo per un modulo
di nuovo è una chiusura di funzione dove dove
noi allora per tutte le cose che tu
esporta dal modulo se dico esportazione
class tracker creiamo quindi una proprietà
sull’oggetto modulo per ciascuno dei
anche gli articoli esportati in questo sono molto
schema molto tipico in JavaScript
e ora ovviamente prendiamo gli squigglie rossi
qui perché non c’è tracciatore nel
ambito globale ora è utils dot e if
Dico doc, vedi che c’è un?
tracker in là e questo è quello
quello che voglio che io possa
effettivamente andare in profondità con queste cose acne
doc ha ordinato utils e tu vedi noi
chiusure di funzioni del nido
sorta di fuori dallo schermo lì e ora io
devo fare riferimento ad agire come Ahmed nostro
cordon utils ma noterete che lo facciamo
rintracciarlo nel sistema di tipi in modo che lo sappiamo
che il nome di questo tipo è accurato
o le utilities del corridoio, infatti, lo consentono persino
tu per importare moduli così posso dire
import ACU è uguale a acne o dot utilis per
esempio e poi qui posso usare il
stenografia per quell’ACU e se tu
guarda qui vedrai che cosa
abbiamo generato è solo una variabile che
afferra quel modulo oggetto e poi tu
usalo per fare riferimento invece a questi
moduli che chiamiamo moduli interni e
sono molto tipici come jquery
per esempio è un esempio di un modulo
chiamato dollaro che ha un tutto
un sacco di cose in esso ce n’è un altro
tipo di moduli che sono in
uso comune là fuori chiamato jas comune
moduli e no das usa quelli e quelli
sono fondamentalmente come i file sorgente che ottengono
caricato dinamicamente in runtime e avere
la capacità di indicare le loro esigenze
in termini di altri moduli e stato
le loro esportazioni in termini di esportazioni
oggetto e sosteniamo quelli quindi lasciami
in realtà provo a chiudere il
parco giochi qui e poi torniamo indietro
in studio visivo e proviamo ad aprire
su un server per sì qui e fammi provare
scrivere un po ‘sul modulo server del nodo
l’applicazione così la prima cosa che sto per fare
faccio è ho intenzione di importare un riferimento
la tipizzazione statica di nodejs che è in
un file di dichiarazione chiamato senza DTS e I
semplicemente posto un riferimento nella mia nella mia
file sorgente che dice al compilatore
che quando si compila anche questo file
includi quell’altro file nella
compilazione e ora posso dire importazione
HTTP equivale al modulo di HTTP che è uno
dei moduli definiti dal nodo e in
Infatti se vado alla definizione di questo ragazzo
vedrai che salta
nelle informazioni di tipo statico aggiunto
file per HTTP e questo è quello che è
da cui si alimenta per dare
completamento delle affermazioni Hill ok quindi lascia
ora provo a scrivere una funzione qui
funzione di esportazione semplice server che prende
una porta Cole 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 a sua volta è 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
del mio codice ora ho intenzione di incollare
in alcune cose qui così così non hai
per guardarmi digitare, ma nota uno
cosa che quando scrivo risultato puntiamo noi
in realtà ottenere il completamento della dichiarazione
così facciamo fluttuare i tipi dal
Dichiarazione di creare server nel
funzione di callback perché sappiamo cosa
i tipi di questi argomenti di callback
sono e quindi possiamo fluire tutto senza
devi dichiararlo esplicitamente
ovunque ok torniamo qui e
Dì punto ascolta del 1337 prima non mi dispiace
porto che era l’argomento che abbiamo ottenuto
passato ok, questo è il primo modulo di
il nostro piccolo server mi ha permesso di creare
un altro vedi qui qui aperto un altro vuoto
file e ora creiamo un modulo
usa il modulo che abbiamo appena scritto così
Sto per dire import server di Rip’s
il server è uguale al modulo del server e ora i
in realtà ho fatto riferimento al modulo
Ho appena scritto e quindi se dico punto server
ora ottengo effettivamente il completamento dell’istruzione
sul modulo che ho appena scritto così posso
ora chiamo semplice server e lo dico
mi devi passare un numero di porta così 1337
virgola ciao vai per esempio e poi
diciamo semplicemente punto console
registro di ascolto come così là e facciamo
salva quel ragazzo e ora lasciami fare
saltare fuori e in realtà utilizzare il comando
compilatore di righe quindi passeremo alla nota
sono spiacenti nodo di prova e qui lo farai
vedi ora che abbiamo i nostri tre file
file di dichiarazione del nodo e i due
i file dattiloscritti che ho scritto ora posso
semplicemente dillo per compilare ciao TS I
non ho nemmeno bisogno di dirlo sul server
TS perché il compilatore lo farà
traccia automaticamente tutte le mie importazioni
e tutti i riferimenti che ho
e trovare l’intero grafico di file che
devono essere compilati e quindi compilati
quelli così se guardiamo l’output che
ottenuto generato ora abbiamo due file
ciao punto j SNL o il nostro server più gay noi
può solo dare un’occhiata al server qui
ja js se noi alziamo proviamo a prendere un
guarda che e vedrete che la
il codice che è lì dentro è il codice che io
ha scritto con la mia importazione modificata in a
richiede e se digitiamo ciao punto jas
vedrai di nuovo che è praticamente il
stesso codice a destra proviamo a eseguire un nodo
su questo server così nodo ciao ed è
ascoltando e ora andiamo a sbarazzarci di
questo ragazzo lì e poi andiamo a
localhost 1337 lì e dovremmo vedere
ciao co2 ci andiamo, va bene così è così
un po ‘ di lezioni e moduli
ah potrei riassumere rapidamente qui
quello che fondamentalmente sai che sono
le cose che ci permettono di fare scalabile
diritto di sviluppo app e questo è il modo
si si arriva a scrivere molto grande
applicazioni e hanno strumenti che
capire quali sono i contratti
tra diversi moduli e averli
applicato in modo da trovare gli errori prima
tu esegui la tua app invece che mentre
lo stai facendo
siamo allineati con lo standard emergente
così come ho detto prima moduli di classi
le funzioni freccia sono tutte cose che sono
proposto per egmore script sei
ci stiamo prendendo ispirazione e noi
supporta i due popolari sistemi di moduli
che sono là fuori di buon umore comune
è usato da nodejs e poi da moduli AMD
che probabilmente è il caricatore più comune
c’è bisogno di Jas e questo è usato
per il caricamento asincrono del modulo in a
browser e sosteniamo sia di quelli
okay, l’ultima cosa che volevo mostrare era
solo alcune applicazioni più grandi perché
abbiamo fatto un sacco di piccole cose
ecco , proviamo a caricare alcuni dei nostri
la prima cosa che ho intenzione di aprire è
vediamo la scheda demo / immagine questa è una
dei campioni che includiamo e
carichiamo l’app su sì, quindi è così
un’applicazione nodejs multi-modulo che
usa MongoDB e e Express
quadro così qui vedi che noi
importa moduli da vari luoghi HTTP
e l’URL proviene dal nodo DB è in realtà a
modulo che abbiamo scritto possiamo navigare
e guardalo e qui lo vedi
che a sua volta usa MongoDB così possiamo
navigare in quello e controllare il
digitando staticamente un MongoDB qui
vediamo che abbiamo aperto creiamo un server
crea una connessione ad esso e poi semplicemente
per comodità ne abbiamo definiti alcuni
tipi di interfaccia che rappresentano il
entità che stiamo archiviando nel
database perché sono tutti del
stesso tipo ed è davvero in realtà
comodo per avere il completamento dell’istruzione
e la convalida su queste entità che noi
quello stava mettendo la cosa giusta in
nel database e poi abbiamo anche
scritto alcune funzioni di supporto come get
utente qui che accetta un ID e poi
richiama in modo asincrono quando è
ha recuperato l’utente dal database e
qui vedi che usiamo i file di interfaccia
che noi che dichiariamo solo ora possiamo
utilizzare l’IDE per navigare in questo più grande
app possiamo per esempio trovare tutto
riferimenti di ottenere utente e vedrai
che qui è la dichiarazione di esso e
allora ci sono due riferimenti oltre
l’app qui è quella che penso sia
interessante se si guarda a questo
questa funzione qui ci sono 0 tipo
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
il codice ora nell’interesse del tempo non sono
sto andando a correre davvero questo
per provare e cambiare e mostrarti un altro
piccolo campione ah che è uno chiamato
nave da guerra e iniziamo a caricare quel ragazzo
qui e liberiamoci di questo tizio
e solo amico questa è una piccola app
un’app browser che utilizza jQuery e
jQuery UI e vedrai che noi
riferito a digitare per jquery e per
Interfaccia utente di jQuery e lascia che ti mostri come questo
funziona quindi perché il modello tra
queste due librerie è quella che jQuery
UI è una libreria che si basa sulla parte superiore del
jQuery in realtà è una sorta di scimmia
patch nell’oggetto dollaro e aggiunge
proprietà aggiuntive che sono lontane
per te io manipolazione quindi se guardiamo
dollaro ben prima di tutto vedrai che
ora abbiamo informazioni sul tipo per jQuery
quindi conosciamo i sette sovraccarichi di AB
dollaro andremo a scegliere quello
prende una stringa e poi lo faremo
Premi il punto su di esso e qui si vede tutto di
le cose su cui puoi dire
dollaro ora questa è la roba che salva
accanto al cheat sheet
tu o o guardando in qualche HTML
documentazione giusta questo è quali strumenti
si suppone che facciano per te se scegliamo
aggiungere classe sono quindi possiamo effettivamente andare a
la definizione di quel ragazzo e vedi
ora saltiamo nel
file di dichiarazione jquery e vedi
ecco l’ interfaccia principale per jquery e
ha un indirizzo infatti ne ha due
sovraccarichi di classe AD ora se torniamo indietro
diciamo che ne prendiamo uno da
jQuery UI come draggable per esempio e
diciamo che andiamo alla definizione su questo
ragazzo noterai che saltiamo in un
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 modelliamo questa nozione
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 dei compilatori 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 puoi
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 esplorando in Visual Studio voi
vediamo che in realtà abbiamo inferito il
tutto il progetto a cui sto lavorando qui
da quei riferimenti perché se andiamo
a dattiloscritto vedrai che
il riferimento al turno è un insieme di altri
file e attraverso questi riferimenti
il compilatore può ottenere l’immagine completa e
quasi non importa quale file tu
aperto conosciamo il contesto e quindi
siamo in grado di fornire tutte le tutte le
informazioni appropriate così qui dentro
questo è il file principale per il dattiloscritto
compilare c’è una classe chiamata
compilatore dattiloscritto non sorprende
il compilatore dattiloscritto crea un’istanza a
parser possiamo andare dai sordi
missione del parser a sua volta il parser
un’istanza di uno scanner possiamo andare al
definizione di quel ragazzo e poi così tu
può andare in giro 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 haha
chiamato numero di riga che ho ok ho dimenticato di
rinominare quello indietro a due linee 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 tutti i riferimenti su questo ragazzo
vedrai che ci sono un sacco di
riferimenti nello scanner stesso e
poi ce ne sono alcuni 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 va bene così lascia
per prima cosa torno allo scanner e prova
per rinominare qui ah refactor rinominare e
chiama questa linea di ragazzi, invece va bene ora se io
torna al parser che lo vedi
ora ha rinominato il numero di linea qui a
linea va bene ma ora ciò che è 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 devo 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 tuoi file sorgente e decidi al volo
E ‘questo quello o è che un altro
ma questo è ciò che faccio per te
sanno tutto il giorno giusto, perché
attraverso la tipizzazione statica conosciamo il
differenza quindi fammi prendere questo parser
file qui e effettivamente messo giù
il e in basso e ora proviamo
per mostrare entrambi qui vedi il
uno nel mio scanner qui vedi quello
non è collegato a questo, torniamo indietro
e dire ridenominare il refattore
e ora chiamiamo questo numero di linea
invece e vedrai che abbiamo ribattezzato
quel ragazzo ma non quel ragazzo perché noi
capire la differenza tra il
due così così qui andiamo questo è ancora una volta 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
compilatore scusa ci andiamo così qui è
la fonte di tutto il compilatore che noi
che abbiamo appena dato un’occhiata ora sono
cercherò di compilare il compilatore
andando a dirlo per mettere l’output in a
file chiamato tsas, lo dirò
per generare anche generare
dichiarazioni e sto andando a compilare
dattiloscritto così questo sta per
produrre due file prima sta andando a
produrre il compilatore in un file chiamato
tsas 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 siamo noi
mi dispiace quello che abbiamo ottenuto qui vedrai che
ci sono lì abbiamo avuto due file
prodotto t SJ se poi TSD tes e
questo è il file di dichiarazione per
compilatore e ora se lo carico
nell’ambiente di sviluppo qui
vediamo che va e poi andiamo
sbarazzati del pacco e qui tu
vedi sostanzialmente l’estratto pubblico di tutti
delle cose dichiarate nel compilatore
che qualcuno usa il compilatore come
il servizio potrebbe usare e così ora posso farlo in
il senso continua sulla catena del mio
sviluppo modulare posso prendere il mio
compilatore dattiloscritto eseguirlo attraverso il mio
minimizzare o fare qualunque cosa io faccia il mio
l’ufficio Gator prima di spedirlo e poi io
può continuare con la dichiarazione
file e questo è davvero ciò che rappresenta
la mia interfaccia esterna è giusta e così tu
guarda come puoi scrivere manualmente
file di dichiarazione per esistente
JavaScript ma se tu
scrivendo a dattiloscritto possiamo fare il
dichiarazione dei file automaticamente
tutto 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 la tipizzazione statica di un gruppo di
le librerie popolari là fuori come
nodejs e jquery e anche molti
campioni e un linguaggio formante
specifica così come ho iniziato a dire
sviluppo di JavaScript in scala applicativa
è difficile spero di averti mostrato qui come
dattiloscritto rende più facile e mi piacerebbe
per te da dare un’occhiata a te stesso
a dattiloscritto o scaricati
gioca con esso e facci sapere cosa tu
penso 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 noi
sempre più sentito dal nostro
i clienti che conosci in particolare su
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 è quello che JavaScript in realtà
non è mai stato progettato per scrivere in grande
applicazioni lo sapevi che lo era
c’era un po ‘come in origine
destinato a questi 10 eventi di linea
gestori e ora stiamo scrivendo 10.000 o
100.000 app di linea in esso e nella lingua
in realtà non ha grandi dimensioni
concetti di strutturazione delle applicazioni come
classi o moduli e anche è
interamente digitato in modo dinamico che significa
non ci sono informazioni di tipo statico disattivate
di cui possiamo alimentare intelligente
utensili e se pensi a cosa
è che alimenta gli IDE intelligenti che
noi tutti usiamo oggi è davvero statico
digita le informazioni che lo rendono possibile
effettuare il refactoring sicuro del completamento del codice
trovare tutti i riferimenti vanno alla definizione
etc etc così due due anni e mezzo fa
dove stavamo pensando a dove siamo
andare avanti con lo sviluppo di JavaScript
strumenti pensavamo che sarebbe stato davvero pulito se
potremmo rafforzare JavaScript ma con
quei concetti chiave che mancano per
sviluppo su larga scala come le classi
moduli digitando staticamente ma ma
fare ma in questo modo
non sacrifica la cosa inerente
questo rende JavaScript così interessante, ad esempio
standard aperti multipiattaforma web e così via
avanti ed è questo che tipo
presa è che è un linguaggio per l’applicazione
scala lo sviluppo di JavaScript, quindi è a
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
pianura Javascript e lo fa in modo che il
compilatore stesso e il codice che esso
produce corse su qualsiasi browser su qualsiasi host
qualsiasi sistema operativo e il compilatore
e i servizi linguistici associati
le tipizzazioni di libreria e così via sono tutte
open source abbiamo messo questo progetto in
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 tipo di pausa funziona con tutto il
quadri e librerie esistenti che
sono disponibili là fuori oggi come
nodecore o sottolineatura backbone jQuery
prototipo etc etc ci sono un sacco di loro
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
Oggi invece la cosa interessante è che
c’è tutto a costo zero a
dattiloscritto è puramente un tempo di sviluppo
strumento una volta compilato sei rimasto
con un semplice JavaScript e non c’è
componente di runtime che deve essere
presente al fine di far funzionare il generatore
codice in realtà ci limitiamo a compilare
JavaScript idiomatico il JavaScript che
avresti scritto se volevi
emula classi o o moduli e il
il codice finale funziona come me
in qualsiasi browser qualsiasi host su qualsiasi sistema operativo così
proviamo a fare un po ‘
un po ‘di demo e vedere cosa sembra
come in azione ecco il dattiloscritto
sito web in realtà è una copia locale
abbiamo nel caso avessimo perso la connettività
ma ma questo è quello che sembra e
andremo a giocare con
dattiloscritto nel campo da gioco dattiloscritto
che è fondamentalmente una pagina web in cui tu
può dove puoi digitare dattiloscritto e
vedere l’output compilato in una finestra
sul lato ho intenzione di passare qui e
prendi la mia prima piccola demo e così qui
vedi alcuni JavaScript e qui
vedi l’output compilato che
capita di essere esattamente lo stesso perché
ora siamo solo un superset di JavaScript
se guardi questo codice c’è
qualcosa di divertente su questo codice, io
significa che sono come prendere un parametro X e
Sto aggiungendo una proprietà alla nostra impostazione a
proprietà ma lo sto anche pagando
insieme ma hey questo è valido
JavaScript lo capita proprio di non esserlo
significativo ma è valido ora ora
sarebbe bello diciamo per esempio quello
Sapevo che X sarebbe stata una stringa
sicuramente sarebbe bello se potessi in qualche modo
indicalo e sai che non è come
stiamo inventando qualcosa di nuovo in questo
Senta che tu sappia ad esempio se usi un
strumento come la chiusura di Google dove hai messo
digitare annotazioni nei commenti ci sono
ci sono strumenti che possono controllarli
cose per te ma per avere il tuo tipo
il sistema 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 tu
pilota ottieni JavaScript e tu puoi
basta usarlo ovunque e così via
cosa siamo ciò che stiamo facendo qui e così
la prima cosa che vedi è che otteniamo
qualcosa qui che dice che non c’è un nome
proprietà su tipo stringa che è quale
è vero non c’è anche noi vediamo se noi
passa il mouse sopra V che abbiamo dedotto
il clustering delle stringhe è una stringa e
quindi V è di tipo stringa e vediamo
quell’allarme è una cosa che prende un
stringa e restituisce vuoto e quindi esso
è valido per passarmi ora lasciami provare
per sbarazzarsi di quella linea ed errore qui
e proviamo uno degli altri primitivi
tipo numero per esempio e ora vediamo
ora stiamo deducendo quel numero più
il numero è un numero e ora stiamo provando
passare un numero ad un metodo che
si aspetta una stringa e che a sua volta è
anche un errore quindi eccoti un po ‘più di te
conoscere il controllo del tipo statico
proviamo ad usare un bool e
passo e ora vediamo quell’operatore +
non può essere applicato a bool bene
in realtà può in JavaScript è proprio così
succede che non si ottiene un significato
risultato giusto allora quindi in un certo senso cosa
si tratta di provare a sifonare
fuori quel sottoinsieme significativo di Java
sottoinsieme semantico di JavaScript che rende
senso e questo è fondamentalmente ciò che cosa
cosa stiamo facendo qui proprio ora noi
anche consentire sono tipi più complicati
come un rilancio, per esempio, posso dirlo
x è un array di stringhe e ora quando indicizzo
in X e premi punto che vedi che noi
sapere che ci sono stringhe e
quindi possiamo mostrarti tutto il
metodi disponibili su stringa e
non solo i loro nomi ma anche i loro
firme in modo che possiamo vedere quel codice di assistenza
a è 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 XA 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 nominarli credo di avere questo
piccolo esempio qui che ti mostra come
potresti scrivere un’interfaccia con
due proprietà in esso è davvero giusta
l’interfaccia qui la pensa più come sono
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 un paio di
cose che vale la pena notare prima di tutto se
hai seguito il
generato JavaScript si vede che il
JavaScript generato è davvero giusto
il codice JavaScript che digiti meno il
scrivi annotazioni e meno il tipo
dichiarazioni così tutto questo è lì
sapere per la convalida e un tool IDE
sake e poi 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 ti
scorrere solo poche annotazioni e
allora possiamo fluire attraverso il codice
una volta che sappiamo cosa sta succedendo fammi
prova a mostrare qui anche cosa
succede ad esempio diciamo che aggiungo un
proprietà extra per il mio tipo di interfaccia qui
ora noterai che ho degli errori qui
si dice processo è manca uno dei
uno dei parametri che ho potuto 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
vedere che deve essere un bool se do una visione
quello non è un pool ora è un errore quindi
quindi possiamo possiamo esprimere alcuni di questi
le parti più complesse di ciò che accade
in in JavaScript lasciatemi in realtà cerco di
prendi questo pezzo di codice qui sono solo
andando a copiarlo e poi passiamo
in uno studio di visualizzazione e solo ottenere
noi stessi un file dattiloscritto vuoto così
ora parte di dattiloscritto la distribuzione
è un plug-in per Visual Studio che utilizza
il compilatore e il servizio linguistico a
accendi tutti questi intelligenti
strutture nell’IDE come ho detto questo
roba è tutto open source quindi puoi usarla
altrove dove hai visto un
esempio di utilizzo in un browser web
qualcuno potrebbe creare un plug-in di eclissi
e faccio la stessa cosa che sto andando
per incollarlo qui e poi continuare
giocare con il nostro codice qui così
una cosa che ovviamente puoi esprimere
fruste nei tipi è è metodi così ora
stiamo dicendo che la cosa ha a e B
proprietà di tipo numero e un foo
metodo così ora quando faccio una dichiarazione
il completamento si vede che abbiamo un foo e
quando apro ricci mi dice cosa
la firma di quel ragazzo è e così via
e di nuovo qui noi
e 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, ad esempio, mi piacerebbe
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
quello nel sistema di tipi in modo che possiamo seguire
e quando dici che punto su quel dare
hai di nuovo la giusta informazione sul tipo
ora se guardiamo qui se dico X dot foo
vedrai che ora ce ne sono due
sovraccarichi i nostri vecchi ti chiedono in qualche modo ah
quindi se ti do un numero qui vai
quindi elaborare ora restituisce un numero ora
questa roba qui in realtà la nostra è davvero
lo stesso di scrivere questo ma così foo cosa
Sto 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
stringa intorno prende 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 lo farai, tornerò e
ecc. ecc., quindi in pratica possiamo modellare tutto
queste cose che vanno avanti nel
JavaScript Dom jQuery tutto a tutti
quadri ok lasciatemi sbarazzarmi 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
è così che ottieni privacy
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 vedrai che l’abbiamo dedotto
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 in modo in modo che possiamo sorta di Grok tutto
avanti e ora quando dico bar un uguale
accumulatore e poi un punto che vedrai
che c’è una pubblicità qui e che ho bisogno
passare un numero cinque e così via
ora questo mostra come possiamo dedurre
allenatore alla tua scrittura ma a volte
inferenza, vuoi inferenze per entrare
l’altra direzione che puoi, per esempio
Ho una dichiarazione di un’interfaccia
che vuoi andare a implementare 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
propertyname allora mi dice cosa c’è
sbagliato mi dice che hey sei
annuncio di proprietà mancante dal braccio 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
capisci che voglio dire, ecco cosa
gli strumenti dovrebbero fare per te e
questo è ciò che noi facciamo qui
va bene un altro posto dove questo tipo di
la digitazione contestuale è interessante
in realtà dovrei mostrare qui anche questo
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 mouse spostare qui, che è uno dei
gli eventi che puoi gestire sono uguali
funzione di e e quindi aprire il punto e riccio
e noterai che in realtà lo sappiamo
che cos’è e qui come sappiamo che è
perché sappiamo quale documento è
il documento è il documento del documento radice
ha una mossa non del mouse che prende un 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
il completamento della tua dichiarazione su e quando tu
dì punto e così tanta deduzione
andare alla cosa bella è che posso
in realtà vai alla definizione di mouse
muoviti e guarda cosa è questa cosa
e questo ti salta in questo
caso particolare un file chiamato lib DTS
e questo è ottomila righe di
dichiarazioni di dattiloscritto che dichiarano il
intera struttura del dom e il
Questa è la libreria runtime JavaScript
effettivamente generato dai file IDL
che sono standardizzati così quindi sappiamo che è
correggi che l’informazione sul tipo è
effettivamente disponibile è proprio questo
JavaScript non ha alcun modo di
trasmettendo queste informazioni a voi
poi in fase di esecuzione quando è troppo tardi
così ecco possiamo vedere che muovere il mouse è
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 super prezioso quindi fammi vedere
dove volevo andare da qui lasciami
torna indietro e riassumi semplicemente un
un po ‘sul tipo di script qui
quindi in pratica cosa cosa che dattiloscritto
non è che formalizza il tipo di javascript
sistema e fornisce una visione statica di esso
ma non stiamo cercando di inventare un nuovo
tipo di sistema in realtà ci stiamo piegando
all’indietro per rimanere fedele a ciò che realmente è
Sistema di tipo JavaScript che vedi che noi
fare un sacco di inferenza di tipo e
tipizzazione strutturale e in e là e
e la realtà è che quando sei
scrivendo il codice dattiloscritto in realtà finisci
scrivendo pochissime annotazioni di tipo e
allora scorriamo da li ‘da li’
come ho detto funziona con esistente
Librerie JavaScript e per il tipo
il sistema geek là fuori non è un
tipo di sistema tipicamente provetto perché
javascript non è in un certo senso dimostrabile
digita sicuro mentre lo fai prima
definisci cosa intendi veramente per quello ma
ma il punto qui è che non è un
sistema di tipo per il bene tradizionale di
tipi di sistemi come le prestazioni o simili
validazione rigorosa piuttosto è un tipo
sistema che ti aiuta a scrivere codice e
quello riflette se sai la realtà se
lo farai ma è facoltativo e tu
non devi usarlo ma quando lo usi
l’attrezzatura può aiutarti a nascere
okay fammi provare a saltare indietro e mostrare
alcune delle altre caratteristiche che sono
disponibile volevo mostrare classi e
moduli e ci 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
dì che ha due campi mi dispiace è la mia battitura
non grande x numero di due punti e due punti
numero come questo e tu vedi che noi
generare il codice che è sorta di
tipico per per per classi di scrittura
dove hai una chiusura in cui tu
avere una funzione di costruzione che noi quindi
ritorna fuori dalla chiusura e
ora posso salvare il nostro p nuovo punto
e ora sappiamo che su p c’è una X
e così possiamo darti una dichiarazione
completamento in modo da poter dire che P punto x è uguale
10 p punti y equivale a 20 e così via va bene ora
ovviamente sarebbe bello poterlo fare
dare gli argomenti al mio punto qui ma
se lo faccio, ricevo un errore perché noi
non ho ancora scritto quel costruttore ma
potremmo andare a destra di un costruttore di X
numero virgola virgola y numero due punti e pollici
qui possiamo dire questo punto X e ancora tu
vediamo che otteniamo il completamento dell’istruzione su questo
perché sappiamo dove sei in questo punto
y è uguale a y e così via ora questo questo
la sintassi della classe è in linea con
akma script sixes attuali proposte per
classi così così la classe e il modulo
estensioni che vedi in dattiloscritto
sono in realtà in un senso di anteprima di
cosa succede alla mia sceneggiatura sei ma
poi in cima a quello abbiamo stratificato
tipizzazione statica facoltativa che non fa parte
di ciò che sta facendo la critica di Equus
quindi ovviamente puoi avere dei metodi
classi quindi scriviamo un metodo su disco
qui e diciamo qui vogliamo
ritorna il punto di massa e di nuovo qui vedi io
ottenere il completamento dell’istruzione su tutto il
tutta la roba disponibile in
libreria di runtime standard, quindi voglio
restituisci questo punto x volte questo punto X plus
questo punto e volte
smetti perché ad esempio per mio padre un po ‘
va bene, quindi una cosa che vedi qui è
quelle variabili di istanza vanno su questo ma
i metodi vanno sul prototipo e questo è
esattamente come JavaScript ha visto lo script regni
sei ha in programma di fare lezioni e questo
è fondamentalmente il modello tipico che
le persone li usano e scrivono prototipi
cambiare in JavaScript ne permettiamo un altro
cose nelle classi qui per esempio io
potrebbe dichiarare un campo statico statico
l’origine è uguale al nuovo punto zero virgola 0
per esempio e te ne accorgi ora
la statica continua con la funzione di costruzione
i metodi oggetto vanno su un prototipo
le variabili di istanza vanno sull’istanza
e così via e ora capiamo cosa
questo significa che quando dico punto punto tu
vedere che ottengo un membro di origine sul punto
okay, permettiamo anche di permetterti di scrivere
membro privato ma ma con una svolta così
Posso dire ad esempio il colore privato oops
tieni la corda così e ora quaggiù
se dico che questo punto è uguale al rosso
vedrai che generiamo il codice e
vedi che questa affermazione è completa
su questo mostra il membro del colore ma se io
vai qui e dì che punto P vedrai
che non ci sono membri del collare su P
perché è privato quindi ti limitiamo a
accedi solo all’interno della classe se tu
tuttavia dichiarare le cose come private
il codice generato semplicemente
genera un membro normale chiamato colore
perché non c’è modo di avere
membri privati in JavaScript almeno
al momento non un rescritto di sei secondi
con nomi privati 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 altri ordinati
caratteristiche supportiamo ciò che chiamiamo
automatico
proprietà questo modello di dichiarazione
campi con argomenti del costruttore
gli stessi nomi duri come il
proprietà e poi dicendo questo punto blah
è uguale a blah è super super comune, quindi noi
avere 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à sosteniamo anche un altro uovo
nessuna funzione di scrip sei che è 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
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 diamo solo un’occhiata a cosa
è 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 questo è il motivo per cui le classi
sono difficili e JavaScript perché lo sei
supposto fare tutte queste cose pazze
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 ragione 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
è semplicemente solo JavaScript, ok
potrei scrivere qui a me stesso
costruttore che prende il numero dei due X.
Sono a la jolla numero virgola dire pubblico
a un extra pop facile numero di due punti
così e poi qui dentro, chiama
super di X virgola Y per esempio e ora
vedi che generiamo l’appropriato
codice per effettuare una chiamata al super
costruttore ecc ecc sì sì, questo è un
Clase quello che volevo mostrare il prossimo è
moduli proviamo a lasciarmi davvero provare
e prendi un piccolo snippet di codice
ecco cosa volevo mostrare prima
in effetti sono le funzioni di freccia quindi lasciami andare
alla cassetta degli attrezzi e lasciami afferrare a
tracker qui andiamo bene fammi incollare
che qui ok, ecco un piccolo pezzo
di codice scuola questo in modo che tu possa 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 catturiamo il
onmousemove evento e avere un po ‘
gestore che incrementa il nostro contatore e
quindi consulta un registro del contatore
quindi proviamo a eseguirlo in modo che tu possa
effettivamente eseguire l’output qui nel
parco giochi portiamo su gli strumenti di 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 non 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 film di topo
allora ottieni l’elemento che la mossa
si è verificato su di te non capisci questo
il contesto circostante ora qualsiasi
tutti sono stati un po ‘colpiti da questo problema
e le persone hanno ottenuto un po ‘di bit
abbastanza da
che c’è una proposta in egmore
script sei per supportare ciò che viene chiamato
le funzioni della freccia o quello che abbiamo in c-sharp
chiamate funzioni lambda così potevo
invece scrivi questo codice come braccio freccia elettronica
e quindi in una funzione lambda questo è
sempre del tipo di circostante
contesto o il suo significato lessicale
che ottengo il dis della funzione esterna
e il modo in cui rivestiamo generano quello che siamo noi
fai la piccola cosa cattiva che tu
normalmente devi fare dove dici bar
questo è uguale a questo e poi quel punto
dentro la tua funzione o quello che possiamo
semplicemente il codice lo genera per te
invece qui ciò che è interessante
okay e in effetti facciamo solo una specie di corsa
e provare a noi stessi che questo ora
funziona, stiamo vedendo quello che siamo
dovrebbe vedere che è interessante
anche se nel mio piccolo topo si muove qui
diciamo che non mi riferisco alla
fuori questo allora noterai che noi
non generare quella chiusura così noi
iniettato solo se lo fai effettivamente e
poi lo riscriviamo per sottolineare questo
invece ok ora l’ altra cosa noi
il supporto in dattiloscritto è moduli
dire che volevo mettere questa classe in a
modulo potrei scrivere qui modulo aperto
ricci e quaggiù ricci oops ricci di
Certo , vogliamo dare questo modulo a
chiamalo o chiamalo modulo utils e lo farai
vediamo che mentre generiamo per un modulo
di nuovo è una chiusura di funzione dove dove
noi allora per tutte le cose che tu
esporta dal modulo se dico esportazione
class tracker creiamo quindi una proprietà
sull’oggetto modulo per ciascuno dei
anche gli articoli esportati in questo sono molto
schema molto tipico in JavaScript
e ora ovviamente prendiamo gli squigglie rossi
qui perché non c’è tracciatore nel
ambito globale ora è utils dot e if
Dico doc, vedi che c’è un?
tracker in là e questo è quello
quello che voglio che io possa
effettivamente andare in profondità con queste cose acne
doc ha ordinato utils e tu vedi noi
chiusure di funzioni del nido
sorta di fuori dallo schermo lì e ora io
devo fare riferimento ad agire come Ahmed nostro
cordon utils ma noterete che lo facciamo
rintracciarlo nel sistema di tipi in modo che lo sappiamo
che il nome di questo tipo è accurato
o le utilities del corridoio, infatti, lo consentono persino
tu per importare moduli così posso dire
import ACU è uguale a acne o dot utilis per
esempio e poi qui posso usare il
stenografia per quell’ACU e se tu
guarda qui vedrai che cosa
abbiamo generato è solo una variabile che
afferra quel modulo oggetto e poi tu
usalo per fare riferimento invece a questi
moduli che chiamiamo moduli interni e
sono molto tipici come jquery
per esempio è un esempio di un modulo
chiamato dollaro che ha un tutto
un sacco di cose in esso ce n’è un altro
tipo di moduli che sono in
uso comune là fuori chiamato jas comune
moduli e no das usa quelli e quelli
sono fondamentalmente come i file sorgente che ottengono
caricato dinamicamente in runtime e avere
la capacità di indicare le loro esigenze
in termini di altri moduli e stato
le loro esportazioni in termini di esportazioni
oggetto e sosteniamo quelli quindi lasciami
in realtà provo a chiudere il
parco giochi qui e poi torniamo indietro
in studio visivo e proviamo ad aprire
su un server per sì qui e fammi provare
scrivere un po ‘sul modulo server del nodo
l’applicazione così la prima cosa che sto per fare
faccio è ho intenzione di importare un riferimento
la tipizzazione statica di nodejs che è in
un file di dichiarazione chiamato senza DTS e I
semplicemente posto un riferimento nella mia nella mia
file sorgente che dice al compilatore
che quando si compila anche questo file
includi quell’altro file nella
compilazione e ora posso dire importazione
HTTP equivale al modulo di HTTP che è uno
dei moduli definiti dal nodo e in
Infatti se vado alla definizione di questo ragazzo
vedrai che salta
nelle informazioni di tipo statico aggiunto
file per HTTP e questo è quello che è
da cui si alimenta per dare
completamento delle affermazioni Hill ok quindi lascia
ora provo a scrivere una funzione qui
funzione di esportazione semplice server che prende
una porta Cole 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 a sua volta è 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
del mio codice ora ho intenzione di incollare
in alcune cose qui così così non hai
per guardarmi digitare, ma nota uno
cosa che quando scrivo risultato puntiamo noi
in realtà ottenere il completamento della dichiarazione
così facciamo fluttuare i tipi dal
Dichiarazione di creare server nel
funzione di callback perché sappiamo cosa
i tipi di questi argomenti di callback
sono e quindi possiamo fluire tutto senza
devi dichiararlo esplicitamente
ovunque ok torniamo qui e
Dì punto ascolta del 1337 prima non mi dispiace
porto che era l’argomento che abbiamo ottenuto
passato ok, questo è il primo modulo di
il nostro piccolo server mi ha permesso di creare
un altro vedi qui qui aperto un altro vuoto
file e ora creiamo un modulo
usa il modulo che abbiamo appena scritto così
Sto per dire import server di Rip’s
il server è uguale al modulo del server e ora i
in realtà ho fatto riferimento al modulo
Ho appena scritto e quindi se dico punto server
ora ottengo effettivamente il completamento dell’istruzione
sul modulo che ho appena scritto così posso
ora chiamo semplice server e lo dico
mi devi passare un numero di porta così 1337
virgola ciao vai per esempio e poi
diciamo semplicemente punto console
registro di ascolto come così là e facciamo
salva quel ragazzo e ora lasciami fare
saltare fuori e in realtà utilizzare il comando
compilatore di righe quindi passeremo alla nota
sono spiacenti nodo di prova e qui lo farai
vedi ora che abbiamo i nostri tre file
file di dichiarazione del nodo e i due
i file dattiloscritti che ho scritto ora posso
semplicemente dillo per compilare ciao TS I
non ho nemmeno bisogno di dirlo sul server
TS perché il compilatore lo farà
traccia automaticamente tutte le mie importazioni
e tutti i riferimenti che ho
e trovare l’intero grafico di file che
devono essere compilati e quindi compilati
quelli così se guardiamo l’output che
ottenuto generato ora abbiamo due file
ciao punto j SNL o il nostro server più gay noi
può solo dare un’occhiata al server qui
ja js se noi alziamo proviamo a prendere un
guarda che e vedrete che la
il codice che è lì dentro è il codice che io
ha scritto con la mia importazione modificata in a
richiede e se digitiamo ciao punto jas
vedrai di nuovo che è praticamente il
stesso codice a destra proviamo a eseguire un nodo
su questo server così nodo ciao ed è
ascoltando e ora andiamo a sbarazzarci di
questo ragazzo lì e poi andiamo a
localhost 1337 lì e dovremmo vedere
ciao co2 ci andiamo, va bene così è così
un po ‘ di lezioni e moduli
ah potrei riassumere rapidamente qui
quello che fondamentalmente sai che sono
le cose che ci permettono di fare scalabile
diritto di sviluppo app e questo è il modo
si si arriva a scrivere molto grande
applicazioni e hanno strumenti che
capire quali sono i contratti
tra diversi moduli e averli
applicato in modo da trovare gli errori prima
tu esegui la tua app invece che mentre
lo stai facendo
siamo allineati con lo standard emergente
così come ho detto prima moduli di classi
le funzioni freccia sono tutte cose che sono
proposto per egmore script sei
ci stiamo prendendo ispirazione e noi
supporta i due popolari sistemi di moduli
che sono là fuori di buon umore comune
è usato da nodejs e poi da moduli AMD
che probabilmente è il caricatore più comune
c’è bisogno di Jas e questo è usato
per il caricamento asincrono del modulo in a
browser e sosteniamo sia di quelli
okay, l’ultima cosa che volevo mostrare era
solo alcune applicazioni più grandi perché
abbiamo fatto un sacco di piccole cose
ecco , proviamo a caricare alcuni dei nostri
la prima cosa che ho intenzione di aprire è
vediamo la scheda demo / immagine questa è una
dei campioni che includiamo e
carichiamo l’app su sì, quindi è così
un’applicazione nodejs multi-modulo che
usa MongoDB e e Express
quadro così qui vedi che noi
importa moduli da vari luoghi HTTP
e l’URL proviene dal nodo DB è in realtà a
modulo che abbiamo scritto possiamo navigare
e guardalo e qui lo vedi
che a sua volta usa MongoDB così possiamo
navigare in quello e controllare il
digitando staticamente un MongoDB qui
vediamo che abbiamo aperto creiamo un server
crea una connessione ad esso e poi semplicemente
per comodità ne abbiamo definiti alcuni
tipi di interfaccia che rappresentano il
entità che stiamo archiviando nel
database perché sono tutti del
stesso tipo ed è davvero in realtà
comodo per avere il completamento dell’istruzione
e la convalida su queste entità che noi
quello stava mettendo la cosa giusta in
nel database e poi abbiamo anche
scritto alcune funzioni di supporto come get
utente qui che accetta un ID e poi
richiama in modo asincrono quando è
ha recuperato l’utente dal database e
qui vedi che usiamo i file di interfaccia
che noi che dichiariamo solo ora possiamo
utilizzare l’IDE per navigare in questo più grande
app possiamo per esempio trovare tutto
riferimenti di ottenere utente e vedrai
che qui è la dichiarazione di esso e
allora ci sono due riferimenti oltre
l’app qui è quella che penso sia
interessante se si guarda a questo
questa funzione qui ci sono 0 tipo
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
il codice ora nell’interesse del tempo non sono
sto andando a correre davvero questo
per provare e cambiare e mostrarti un altro
piccolo campione ah che è uno chiamato
nave da guerra e iniziamo a caricare quel ragazzo
qui e liberiamoci di questo tizio
e solo amico questa è una piccola app
un’app browser che utilizza jQuery e
jQuery UI e vedrai che noi
riferito a digitare per jquery e per
Interfaccia utente di jQuery e lascia che ti mostri come questo
funziona quindi perché il modello tra
queste due librerie è quella che jQuery
UI è una libreria che si basa sulla parte superiore del
jQuery in realtà è una sorta di scimmia
patch nell’oggetto dollaro e aggiunge
proprietà aggiuntive che sono lontane
per te io manipolazione quindi se guardiamo
dollaro ben prima di tutto vedrai che
ora abbiamo informazioni sul tipo per jQuery
quindi conosciamo i sette sovraccarichi di AB
dollaro andremo a scegliere quello
prende una stringa e poi lo faremo
Premi il punto su di esso e qui si vede tutto di
le cose su cui puoi dire
dollaro ora questa è la roba che salva
accanto al cheat sheet
tu o o guardando in qualche HTML
documentazione giusta questo è quali strumenti
si suppone che facciano per te se scegliamo
aggiungere classe sono quindi possiamo effettivamente andare a
la definizione di quel ragazzo e vedi
ora saltiamo nel
file di dichiarazione jquery e vedi
ecco l’ interfaccia principale per jquery e
ha un indirizzo infatti ne ha due
sovraccarichi di classe AD ora se torniamo indietro
diciamo che ne prendiamo uno da
jQuery UI come draggable per esempio e
diciamo che andiamo alla definizione su questo
ragazzo noterai che saltiamo in un
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 modelliamo questa nozione
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 dei compilatori 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 puoi
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 esplorando in Visual Studio voi
vediamo che in realtà abbiamo inferito il
tutto il progetto a cui sto lavorando qui
da quei riferimenti perché se andiamo
a dattiloscritto vedrai che
il riferimento al turno è un insieme di altri
file e attraverso questi riferimenti
il compilatore può ottenere l’immagine completa e
quasi non importa quale file tu
aperto conosciamo il contesto e quindi
siamo in grado di fornire tutte le tutte le
informazioni appropriate così qui dentro
questo è il file principale per il dattiloscritto
compilare c’è una classe chiamata
compilatore dattiloscritto non sorprende
il compilatore dattiloscritto crea un’istanza a
parser possiamo andare dai sordi
missione del parser a sua volta il parser
un’istanza di uno scanner possiamo andare al
definizione di quel ragazzo e poi così tu
può andare in giro 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 haha
chiamato numero di riga che ho ok ho dimenticato di
rinominare quello indietro a due linee 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 tutti i riferimenti su questo ragazzo
vedrai che ci sono un sacco di
riferimenti nello scanner stesso e
poi ce ne sono alcuni 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 va bene così lascia
per prima cosa torno allo scanner e prova
per rinominare qui ah refactor rinominare e
chiama questa linea di ragazzi, invece va bene ora se io
torna al parser che lo vedi
ora ha rinominato il numero di linea qui a
linea va bene ma ora ciò che è 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 devo 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 tuoi file sorgente e decidi al volo
E ‘questo quello o è che un altro
ma questo è ciò che faccio per te
sanno tutto il giorno giusto, perché
attraverso la tipizzazione statica conosciamo il
differenza quindi fammi prendere questo parser
file qui e effettivamente messo giù
il e in basso e ora proviamo
per mostrare entrambi qui vedi il
uno nel mio scanner qui vedi quello
non è collegato a questo, torniamo indietro
e dire ridenominare il refattore
e ora chiamiamo questo numero di linea
invece e vedrai che abbiamo ribattezzato
quel ragazzo ma non quel ragazzo perché noi
capire la differenza tra il
due così così qui andiamo questo è ancora una volta 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
compilatore scusa ci andiamo così qui è
la fonte di tutto il compilatore che noi
che abbiamo appena dato un’occhiata ora sono
cercherò di compilare il compilatore
andando a dirlo per mettere l’output in a
file chiamato tsas, lo dirò
per generare anche generare
dichiarazioni e sto andando a compilare
dattiloscritto così questo sta per
produrre due file prima sta andando a
produrre il compilatore in un file chiamato
tsas 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 siamo noi
mi dispiace quello che abbiamo ottenuto qui vedrai che
ci sono lì abbiamo avuto due file
prodotto t SJ se poi TSD tes e
questo è il file di dichiarazione per
compilatore e ora se lo carico
nell’ambiente di sviluppo qui
vediamo che va e poi andiamo
sbarazzati del pacco e qui tu
vedi sostanzialmente l’estratto pubblico di tutti
delle cose dichiarate nel compilatore
che qualcuno usa il compilatore come
il servizio potrebbe usare e così ora posso farlo in
il senso continua sulla catena del mio
sviluppo modulare posso prendere il mio
compilatore dattiloscritto eseguirlo attraverso il mio
minimizzare o fare qualunque cosa io faccia il mio
l’ufficio Gator prima di spedirlo e poi io
può continuare con la dichiarazione
file e questo è davvero ciò che rappresenta
la mia interfaccia esterna è giusta e così tu
guarda come puoi scrivere manualmente
file di dichiarazione per esistente
JavaScript ma se tu
scrivendo a dattiloscritto possiamo fare il
dichiarazione dei file automaticamente
tutto 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 la tipizzazione statica di un gruppo di
le librerie popolari là fuori come
nodejs e jquery e anche molti
campioni e un linguaggio formante
specifica così come ho iniziato a dire
sviluppo di JavaScript in scala applicativa
è difficile spero di averti mostrato qui come
dattiloscritto rende più facile e mi piacerebbe
per te da dare un’occhiata a te stesso
a dattiloscritto o scaricati
gioca con esso e facci sapere cosa tu
penso grazie
tu
Please follow and like us: