Relazione di TypeScript con JavaScript
TypeScript è un superset tipizzato di JavaScript che viene compilato in JavaScript semplice - typescriptlang.org .
JavaScript è un linguaggio di programmazione sviluppato dal Comitato tecnico dell'EMCA 39 , che è un gruppo di persone composto da molte parti interessate diverse. TC39 è un comitato ospitato dall'ECMA : un'organizzazione di standard interni. JavaScript ha molte implementazioni diverse da parte di diversi fornitori (ad esempio Google, Microsoft, Oracle, ecc.). L'obiettivo di JavaScript è quello di essere la lingua franca del web.
TypeScript è un superset del linguaggio JavaScript che ha un singolo compilatore open source ed è sviluppato principalmente da un singolo fornitore: Microsoft. L'obiettivo di TypeScript è aiutare a rilevare tempestivamente gli errori attraverso un sistema di tipi e rendere più efficiente lo sviluppo di JavaScript.
In sostanza, TypeScript raggiunge i suoi obiettivi in tre modi:
Supporto per le moderne funzionalità JavaScript: il linguaggio JavaScript (non il runtime) è standardizzato attraverso gli standard ECMAScript . Non tutti i browser e i runtime JavaScript supportano tutte le funzionalità di tutti gli standard ECMAScript (vedere questa panoramica ). TypeScript consente l'uso di molte delle più recenti funzionalità ECMAScript e le traduce in target ECMAScript meno recenti di propria scelta (vedere l'elenco dei target di compilazione sotto l' --targetopzione del compilatore). Ciò significa che è possibile utilizzare in sicurezza nuove funzionalità, come moduli, funzioni lambda, classi, operatore di diffusione e destrutturazione, pur rimanendo retrocompatibile con i browser precedenti e i runtime JavaScript.
Sistema di tipi avanzato : il supporto per i tipi non fa parte dello standard ECMAScript e probabilmente non sarà mai dovuto alla natura interpretata anziché alla natura compilata di JavaScript. Il sistema di tipi di TypeScript è incredibilmente ricco e comprende: interfacce, enum, tipi ibridi, generici, tipi di unione / intersezione, modificatori di accesso e molto altro. Il sito Web ufficiale di TypeScript offre una panoramica di queste funzionalità. Il sistema di tipi di Typescript è alla pari con la maggior parte degli altri linguaggi tipizzati e in alcuni casi è probabilmente più potente.
Supporto degli strumenti per gli sviluppatori : il compilatore di TypeScript può essere eseguito come processo in background per supportare sia la compilazione incrementale che l'integrazione dell'IDE in modo da poter navigare, identificare i problemi, ispezionare le possibilità e refactificare la base di codice più facilmente.
Relazione di TypeScript con altri linguaggi di targeting JavaScript
TypeScript ha una filosofia unica rispetto ad altri linguaggi che vengono compilati in JavaScript. Il codice JavaScript è un codice TypeScript valido; TypeScript è un superset di JavaScript. Puoi quasi rinominare i tuoi .jsfile in .tsfile e iniziare a usare TypeScript (vedi "Interoperabilità JavaScript" di seguito). I file TypeScript sono compilati in JavaScript leggibile, in modo che sia possibile la migrazione indietro e la comprensione del TypeScript compilato non è affatto difficile. TypeScript si basa sui successi di JavaScript migliorando al contempo i suoi punti deboli.
Da un lato, disponi di strumenti a prova di futuro che adottano i moderni standard ECMAScript e li compilano fino alle versioni JavaScript precedenti, con Babel il più popolare. D'altra parte, ci sono lingue che potrebbero differire totalmente da JavaScript e che sono indirizzate a JavaScript, come CoffeeScript, Clojure, Dart, Elm, Haxe, Scala.js e un altro host (vedi questo elenco). Queste lingue, sebbene possano essere migliori di quelle che potrebbero mai portare il futuro di JavaScript, corrono un rischio maggiore di non trovare abbastanza adozione da garantire il loro futuro. Potresti anche avere più problemi a trovare sviluppatori esperti per alcune di queste lingue, anche se quelle che troverai spesso possono essere più entusiaste. Interoperare con JavaScript può anche essere un po 'più coinvolto, poiché sono più lontani da ciò che JavaScript è in realtà.
TypeScript si trova tra questi due estremi, bilanciando così il rischio. TypeScript non è una scelta rischiosa per nessuno standard. Ci si serve pochissimo per abituarsi se si ha familiarità con JavaScript, poiché non è una lingua completamente diversa, ha un eccellente supporto di interoperabilità JavaScript e ha visto molte adozioni di recente.
Digitazione facoltativa statica e inferenza del tipo
JavaScript è digitato in modo dinamico. Ciò significa che JavaScript non conosce il tipo di una variabile fino a quando non viene effettivamente istanziata in fase di esecuzione. Questo significa anche che potrebbe essere troppo tardi. TypeScript aggiunge il supporto del tipo a JavaScript. I bug causati da false assunzioni di alcune variabili di un certo tipo possono essere completamente eliminati se giochi bene le tue carte (quanto sei severo nel digitare il tuo codice o se digiti il tuo codice).
TypeScript rende la digitazione un po 'più semplice e molto meno esplicita dall'uso dell'inferenza del tipo. Ad esempio: var x = "hello"in TypeScript è uguale a var x : string = "hello". Il tipo viene semplicemente dedotto dal suo utilizzo. Anche se non digiti esplicitamente i tipi, sono ancora lì per salvarti dal fare qualcosa che altrimenti comporterebbe un errore di runtime.
TypeScript è facoltativamente digitato per impostazione predefinita. Ad esempio, function divideByTwo(x) { return x / 2 }è una funzione valida in TypeScript che può essere chiamata con qualsiasi tipo di parametro, anche se chiamarla con una stringa comporterà ovviamente un errore di runtime . Proprio come sei abituato in JavaScript. Questo funziona, perché quando nessun tipo è stato assegnato esplicitamente e il tipo non può essere dedotto, come nell'esempio divideByTwo, TypeScript assegnerà implicitamente il tipo any. Ciò significa che la firma del tipo della funzione divideByTwo diventa automaticamente function divideByTwo(x : any) : any. C'è un flag di compilazione per non consentire questo comportamento: --noImplicitAny. Abilitare questo flag ti dà un maggior grado di sicurezza, ma significa anche che dovrai scrivere di più.
I tipi hanno un costo associato ad essi. Prima di tutto, c'è una curva di apprendimento, e in secondo luogo, ovviamente, ti costerà un po 'più di tempo per impostare una base di codice usando anche la corretta tipizzazione rigorosa. Nella mia esperienza, questi costi valgono totalmente la pena su qualsiasi base di codice seria che condividi con altri. Uno studio su larga scala dei linguaggi di programmazione e della qualità del codice in Github suggerisce che "i linguaggi tipizzati staticamente, in generale, sono meno soggetti a difetti rispetto ai tipi dinamici e che la tipizzazione forte è migliore della digitazione debole allo stesso modo".
È interessante notare che questo stesso documento rileva che TypeScript è meno soggetto a errori di JavaScript:
Per quelli con coefficienti positivi possiamo aspettarci che la lingua sia associata, con un numero maggiore di correzioni di errori. Questi linguaggi includono C, C ++, JavaScript , Objective-C, Php e Python. Le lingue Clojure, Haskell, Ruby, Scala e TypeScript hanno tutti coefficienti negativi, il che implica che queste lingue hanno meno probabilità della media di comportare il commit di correzioni di errori.
Supporto IDE avanzato
L'esperienza di sviluppo con TypeScript è un grande miglioramento rispetto a JavaScript. L'IDE è informato in tempo reale dal compilatore TypeScript sulle sue informazioni di tipo ricco. Ciò offre un paio di vantaggi importanti. Ad esempio, con TypeScript, puoi eseguire in modo sicuro refactoring come rinominazioni nell'intera base di codice. Attraverso il completamento del codice, è possibile ottenere assistenza in linea su qualsiasi funzione possa offrire una libreria. Non è più necessario ricordarli o cercarli nei riferimenti online. Gli errori di compilazione vengono segnalati direttamente nell'IDE con una linea rossa quando si è impegnati nella codifica. Tutto sommato, ciò consente un significativo aumento della produttività rispetto all'utilizzo di JavaScript. Si può dedicare più tempo alla codifica e meno tempo al debug.
Esiste una vasta gamma di IDE che offrono un eccellente supporto per TypeScript, come Visual Studio Code, WebStorm, Atom e Sublime.
Controlli null rigorosi
Errori di runtime del modulo cannot read property 'x' of undefinedo undefined is not a functionsono molto comunemente causati da bug nel codice JavaScript. TypeScript pronto all'uso riduce già la probabilità che si verifichino questi tipi di errori, dal momento che non è possibile utilizzare una variabile non nota al compilatore TypeScript (ad eccezione delle proprietà delle anyvariabili tipizzate). È comunque possibile utilizzare erroneamente una variabile impostata su undefined. Tuttavia, con la versione 2.0 di TypeScript è possibile eliminare tutti questi tipi di errori tutti insieme mediante l'utilizzo di tipi non annullabili. Funziona come segue:
Con i controlli null rigorosi abilitati ( --strictNullChecksflag del compilatore) il compilatore TypeScript non consentirà undefineddi essere assegnato a una variabile a meno che non si dichiari esplicitamente che è di tipo nullable. Ad esempio, let x : number = undefinedsi verificherà un errore di compilazione. Questo si adatta perfettamente alla teoria dei tipi poiché undefinednon è un numero. Si può definire xcome un tipo somma di numbere undefinedper correggere questo: let x : number | undefined = undefined.
Una volta che un tipo è noto per essere nullable, il che significa che è di un tipo che può anche essere del valore nullo undefined, il compilatore TypeScript può determinare attraverso l'analisi del tipo basata sul flusso di controllo se il codice può utilizzare o meno una variabile in modo sicuro. In altre parole, quando si controlla che una variabile passi undefinedattraverso, ad esempio, ifun'istruzione il compilatore TypeScript dedurrà che il tipo in quel ramo del flusso di controllo del codice non è più nullable e quindi può essere tranquillamente usato. Qui c'è un semplice esempio:
let x: number | undefined;
if (x !== undefined) x += 1; // this line will compile, because x is checked.
x += 1; // this line will fail compilation, because x might be undefined.
Durante la costruzione, il co-designer della conferenza 2016 di TypeScript Anders Hejlsberg ha fornito una spiegazione dettagliata e dimostrazione di questa funzione: video (dalle 44:30 alle 56:30).
Compilazione
Per utilizzare TypeScript è necessario un processo di compilazione per la compilazione in codice JavaScript. Il processo di compilazione richiede generalmente solo un paio di secondi, ovviamente a seconda delle dimensioni del progetto. Il compilatore TypeScript supporta la compilazione incrementale ( --watchflag del compilatore) in modo che tutte le modifiche successive possano essere compilate a una velocità maggiore.
Il compilatore TypeScript può incorporare le informazioni della mappa di origine nei file .js generati o creare file .map separati. Le informazioni sulla mappa di origine possono essere utilizzate da utilità di debug come Chrome DevTools e altri IDE per mettere in relazione le linee in JavaScript con quelle che le hanno generate in TypeScript. Ciò consente di impostare punti di interruzione e ispezionare le variabili durante il runtime direttamente sul codice TypeScript. Le informazioni sulla mappa di origine funzionano abbastanza bene, esistevano molto prima di TypeScript, ma il debug di TypeScript non è generalmente eccezionale come quando si utilizza JavaScript direttamente. Prendi la thisparola chiave per esempio. A causa della semantica modificata della thisparola chiave attorno alle chiusure da ES2015, thispotrebbe effettivamente esistere durante il runtime come variabile chiamata _this(vedere questa risposta). Questo può confonderti durante il debug, ma generalmente non è un problema se lo conosci o controlli il codice JavaScript. Va notato che Babele soffre esattamente dello stesso tipo di problema.
Ci sono alcuni altri trucchi che il compilatore TypeScript può fare, come generare codice di intercettazione basato su decoratori , generare codice di caricamento del modulo per diversi sistemi di modulo e analizzare JSX . Tuttavia, probabilmente avrai bisogno di uno strumento di compilazione oltre al compilatore Typescript. Ad esempio, se vuoi comprimere il tuo codice dovrai aggiungere altri strumenti al tuo processo di compilazione per farlo.
Esistono plug-in di compilazione TypeScript disponibili per Webpack , Gulp , Grunt e praticamente qualsiasi altro strumento di compilazione JavaScript disponibile. La documentazione di TypeScript contiene una sezione sull'integrazione con strumenti di generazione che li copre tutti. È disponibile anche una linter nel caso in cui desideri un ulteriore controllo del tempo di costruzione. Esistono anche molti progetti seed che ti faranno iniziare con TypeScript in combinazione con un sacco di altre tecnologie come Angular 2, React, Ember, SystemJS, Webpack, Gulp, ecc.
Interoperabilità JavaScript
Poiché TypeScript è così strettamente correlato a JavaScript, ha grandi capacità di interoperabilità, ma per lavorare con le librerie JavaScript in TypeScript è necessario un lavoro extra. Definizioni dattiloscritto sono necessari in modo che il compilatore dattiloscritto capisce che le chiamate di funzione come _.groupByo angular.copyo $.fadeOutnon sono in realtà dichiarazioni illegali. Le definizioni per queste funzioni sono inserite in .d.tsfile.
La forma più semplice che una definizione può assumere è quella di consentire a un identificatore di essere utilizzato in qualsiasi modo. Ad esempio, quando si utilizza Lodash , un file di definizione a riga singoladeclare var _ : any ti consentirà di chiamare qualsiasi funzione tu voglia _, ma poi, ovviamente, sarai anche in grado di fare errori: _.foobar()sarebbe una chiamata TypeScript legale, ma è, ovviamente , una chiamata illegale in fase di esecuzione. Se si desidera il corretto supporto del tipo e il completamento del codice, il file di definizione deve essere più esatto (vedere le definizioni di lodash per un esempio).
I moduli Npm che vengono preconfezionati con le proprie definizioni di tipo vengono automaticamente compresi dal compilatore TypeScript (vedere documentazione ). Per praticamente qualsiasi altra libreria JavaScript semi-popolare che non include le proprie definizioni, qualcuno là fuori ha già reso disponibili le definizioni dei tipi tramite un altro modulo npm. Questi moduli hanno il prefisso "@ types /" e provengono da un repository Github chiamato DefinitelyTyped .
C'è un avvertimento: le definizioni del tipo devono corrispondere alla versione della libreria che si sta utilizzando in fase di esecuzione. In caso contrario, TypeScript potrebbe non consentire di chiamare una funzione o di annullare la dereferenziazione di una variabile esistente o di consentire di chiamare una funzione o di determinare una variabile che non esiste, semplicemente perché i tipi non corrispondono al runtime al momento della compilazione . Quindi assicurati di caricare la versione corretta delle definizioni dei tipi per la versione corretta della libreria che stai utilizzando.
Ad essere onesti, c'è una leggera seccatura in questo e potrebbe essere uno dei motivi per cui non scegli TypeScript, ma preferisci qualcosa come Babele che non soffre di dover ottenere definizioni dei tipi. D'altra parte, se sai cosa stai facendo, puoi facilmente superare qualsiasi tipo di problema causato da file di definizione errati o mancanti.
Conversione da JavaScript a TypeScript
Qualsiasi .jsfile può essere rinominato in un .tsfile ed eseguito attraverso il compilatore TypeScript per ottenere sinteticamente lo stesso codice JavaScript di un output (se in primo luogo era sintatticamente corretto). Anche quando il compilatore TypeScript riceve errori di compilazione produrrà comunque un .jsfile. Può persino accettare .jsfile come input con--allowJs flag. Ciò ti consente di iniziare subito con TypeScript. Sfortunatamente, è probabile che si verifichino errori di compilazione all'inizio. Bisogna ricordare che non si tratta di errori che impediscono lo spettacolo come si può fare con altri compilatori.
Gli errori di compilazione che si ottengono all'inizio quando si converte un progetto JavaScript in un progetto TypeScript sono inevitabili per natura di TypeScript. TypeScript verifica la validità di tutto il codice e pertanto deve conoscere tutte le funzioni e le variabili utilizzate. Pertanto, le definizioni dei tipi devono essere in atto per tutte, altrimenti si verificheranno errori di compilazione. Come accennato nel capitolo sopra, praticamente per qualsiasi framework JavaScript ci sono .d.tsfile che possono essere facilmente acquisiti con l'installazione di pacchetti DefinitelyTyped. Potrebbe essere, tuttavia, che hai utilizzato una libreria oscura per la quale non sono disponibili definizioni di TypeScript o che hai riempito con il poly alcune primitive JavaScript. In tal caso, è necessario fornire le definizioni dei tipi per questi bit affinché gli errori di compilazione scompaiano. Basta creare un .d.tsfile e includerlo nella filesmatrice di tsconfig.json , in modo che sia sempre considerato dal compilatore TypeScript. In esso dichiarare quei bit che TypeScript non conosce come tipo any. Dopo aver eliminato tutti gli errori, è possibile introdurre gradualmente la digitazione di tali parti in base alle proprie esigenze.
Sarà inoltre necessario lavorare sulla (ri) configurazione della pipeline di compilazione per inserire TypeScript nella pipeline di compilazione. Come accennato nel capitolo sulla compilazione, ci sono molte buone risorse là fuori e ti incoraggio a cercare progetti seed che utilizzano la combinazione di strumenti con cui vuoi lavorare.
Il più grande ostacolo è la curva di apprendimento. Ti incoraggio a giocare con un piccolo progetto all'inizio. Guarda come funziona, come si costruisce, quali file utilizza, come è configurato, come funziona nel tuo IDE, come è strutturato, quali strumenti utilizza, ecc. La conversione di una grande base di codice JavaScript in TypeScript è fattibile quando sai cosa stai facendo. Leggi questo blog ad esempio sulla conversione di 600k righe in dattiloscritto in 72 ore ). Assicurati solo di avere una buona conoscenza della lingua prima di fare il salto.
Adozione
TypeScript è open-source (licenza Apache 2, vedi GitHub ) e supportato da Microsoft. Anders Hejlsberg , l'architetto capo di C # sta guidando il progetto. È un progetto molto attivo; il team di TypeScript ha rilasciato molte nuove funzionalità negli ultimi anni e molte altre sono ancora pianificate (vedi la tabella di marcia ).
Alcuni fatti su adozione e popolarità:
- Nel sondaggio dello sviluppatore StackOverflow 2017 TypeScript è stato il transpiler JavaScript più popolare (9 ° posto assoluto) e si è aggiudicato il terzo posto nella categoria del linguaggio di programmazione più amato.
- Nel 2018 stato dell'indagine js TypeScript è stato dichiarato come uno dei due grandi vincitori nella categoria dei sapori JavaScript (con ES6 l'altro).
- Nel sondaggio del deverloper StackOverlow del 2019 TypeScript è salito al nono posto dei linguaggi più popolari tra gli sviluppatori professionisti, superando sia il C che il C ++. Si è nuovamente classificato al terzo posto tra le lingue più amate.