Cos'è TypeScript e perché dovrei usarlo al posto di JavaScript?
Puoi descrivere cos'è il linguaggio TypeScript?
Cosa può fare che JavaScript o le librerie disponibili non possono fare, che mi darebbe motivo di considerarlo?
1630
3
1000ft view...
[TypeScript][1] è un superset di JavaScript che fornisce principalmente tipizzazione statica opzionale, classi e interfacce. Uno dei grandi benefici è quello di permettere agli IDE di fornire un ambiente più ricco per individuare gli errori comuni *mentre si digita il codice*.Per avere un'idea di ciò che intendo, guardate il video introduttivo di Microsoft sul linguaggio.
Per un grande progetto JavaScript, l'adozione di TypeScript potrebbe risultare in un software più robusto, pur essendo ancora distribuibile dove una normale applicazione JavaScript verrebbe eseguita.
È open source, ma si ottiene l'intelligente Intellisense mentre si digita solo se si utilizza un IDE supportato. Inizialmente, questo era solo Microsoft Visual Studio (notato anche nel post del blog di Miguel de Icaza). In questi giorni, anche altri IDE offrono il supporto a TypeScript.
Ci sono altre tecnologie simili? C'è CoffeeScript, ma quello serve davvero ad uno scopo diverso. IMHO, CoffeeScript fornisce leggibilità per gli umani, ma TypeScript fornisce anche una profonda leggibilità per gli strumenti attraverso la sua tipizzazione statica opzionale (vedi questo post recente del blog per un po' più di critica). C'è anche Dart ma questo è un sostituto completo di JavaScript (anche se può produrre codice JavaScript)
Esempio
Esempio
Come esempio, ecco un po' di TypeScript (puoi giocare con questo nel TypeScript Playground)
Ed ecco il JavaScript che produrrebbe
Notate come TypeScript definisce il tipo delle variabili membro e dei parametri dei metodi di classe. Questo viene rimosso quando si traduce in JavaScript, ma utilizzato dall'IDE e dal compilatore per individuare gli errori, come passare un tipo numerico al costruttore.
È anche capace di dedurre tipi che non sono esplicitamente dichiarati, per esempio, determinerebbe che il metodo
greet()
restituisce una stringa.Debugging di Typescript Molti browser e IDE offrono un supporto diretto al debugging attraverso le sourcemap. Vedere questa domanda di Stack Overflow per maggiori dettagli: Debug del codice TypeScript con Visual Studio
Vuoi saperne di più? Ho originariamente scritto questa risposta quando Typescript era ancora caldo di stampa. Controlla Lodewijk'risposta a questa domanda per qualche dettaglio più attuale.
TypeScript'è la relazione con JavaScript
Durante la build, 2016 il co-progettista di TypeScript Anders Hejlsberg ha dato una spiegazione dettagliata e una dimostrazione di questa caratteristica: video (da 44:30 a 56:30).
Compilazione
Per usare TypeScript è necessario un processo di compilazione per compilare il codice JavaScript. Il processo di compilazione generalmente richiede solo un paio di secondi, a seconda ovviamente della dimensione del tuo progetto. Il compilatore TypeScript supporta la compilazione incrementale (flag
--watch
del compilatore) in modo che tutte le modifiche successive possano essere compilate a maggiore velocità. Il compilatore TypeScript può inlineare le informazioni sulla mappa dei sorgenti nei file .js generati o creare file .map separati. Le informazioni sulla mappa dei sorgenti possono essere usate dalle utility di debug come Chrome DevTools e altri IDE per mettere in relazione le linee nel JavaScript con quelle che le hanno generate nel TypeScript. Questo rende possibile impostare i breakpoint e ispezionare le variabili durante il runtime direttamente sul vostro codice TypeScript. Le informazioni della mappa dei sorgenti funzionano abbastanza bene, erano in circolazione molto prima di TypeScript, ma il debugging di TypeScript non è generalmente così grande come quando si usa direttamente JavaScript. Prendete la parola chiavethis
per esempio. A causa della semantica modificata della parola chiavethis
intorno alle chiusure da ES2015,this
può effettivamente esistere durante il runtime come una variabile chiamata_this
(vedi questa risposta). Questo può confondere durante il debug, ma generalmente non è un problema se si conosce o si ispeziona il codice JavaScript. Va notato che Babel soffre dello stesso tipo di problema. Ci sono alcuni altri trucchi che il compilatore TypeScript può fare, come generare codice di intercettazione basato su decorators, generare codice di caricamento dei moduli per diversi sistemi di moduli e analizzare JSX. Tuttavia, probabilmente avrete bisogno di uno strumento di compilazione oltre al compilatore Typescript. Per esempio, se volete comprimere il vostro codice dovrete aggiungere altri strumenti al vostro processo di compilazione per farlo. Ci sono plugin di compilazione per TypeScript disponibili per Webpack, Gulp, Grunt e praticamente qualsiasi altro strumento di compilazione JavaScript là fuori. La documentazione di TypeScript ha una sezione su integrazione con strumenti di compilazione che li copre tutti. È disponibile anche un linter nel caso in cui si desideri un controllo ancora maggiore del tempo di compilazione. Ci sono anche un gran numero di progetti seed là fuori che vi faranno iniziare con TypeScript in combinazione con un sacco di altre tecnologie come Angular 2, React, Ember, SystemJS, Webpack, Gulp, ecc.interoperabilità di JavaScript.
Poiché TypeScript è così strettamente legato a JavaScript, ha grandi capacità di interoperabilità, ma è necessario un po' di lavoro extra per lavorare con le librerie JavaScript in TypeScript. 18definizioni di TypeScript18 sono necessarie affinché il compilatore TypeScript capisca che le chiamate a funzioni come
_.groupBy
oangular.copy
o$.fadeOut
non sono in realtà dichiarazioni illegali. Le definizioni per queste funzioni sono poste in file.d.ts
. La forma più semplice che una definizione può assumere è quella di permettere ad un identificatore di essere usato in qualsiasi modo. Per esempio, quando si usa Lodash, un file di definizione a linea singoladeclare var _ : any
vi permetterà di chiamare qualsiasi funzione vogliate su_
, ma poi, naturalmente, sarete anche in grado di fare errori:_.foobar()
sarebbe una chiamata legale a TypeScript, ma è, ovviamente, una chiamata illegale a run-time. Se vuoi un supporto adeguato ai tipi e il completamento del codice, il tuo file di definizione deve essere più preciso (vedi definizioni lodash per un esempio). I moduli Npm che sono preconfezionati con le proprie definizioni di tipo sono automaticamente compresi dal compilatore TypeScript (vedi documentation). Per quasi tutte le altre librerie JavaScript semi-popolari che non includono le proprie definizioni qualcuno ha già reso disponibili le definizioni dei tipi attraverso un altro modulo npm. Questi moduli hanno il prefisso "@types/" e provengono da un repository Github chiamato DefinitelyTyped. C'è un'avvertenza: le definizioni dei tipi devono corrispondere alla versione della libreria che state usando in fase di esecuzione. Se non lo fanno, TypeScript potrebbe impedirvi di chiamare una funzione o dereferenziare una variabile che esiste o permettervi di chiamare una funzione o dereferenziare una variabile che non esiste, semplicemente perché i tipi non corrispondono al run-time in fase di compilazione. Quindi assicuratevi di caricare la giusta versione delle definizioni dei tipi per la giusta versione della libreria che state usando. Ad essere onesti, c'è una leggera seccatura in questo e potrebbe essere una delle ragioni per cui non scegliete TypeScript, ma andate invece per qualcosa come Babel che non soffre affatto di dover ottenere le definizioni dei tipi. D'altra parte, se si sa cosa si sta facendo si può facilmente superare qualsiasi tipo di problema causato da file di definizione errati o mancanti.Conversione da JavaScript a TypeScript
Qualsiasi file
.js
può essere rinominato in un file.ts
ed eseguito attraverso il compilatore TypeScript per ottenere sintatticamente lo stesso codice JavaScript come output (se era sintatticamente corretto in primo luogo). Anche quando il compilatore TypeScript riceve errori di compilazione, produrrà comunque un file.js
. Può anche accettare file.js
come input con il flag--allowJs
. Questo ti permette di iniziare subito con TypeScript. Sfortunatamente, è probabile che si verifichino errori di compilazione all'inizio. Bisogna ricordare che non si tratta di errori che interrompono lo spettacolo come si potrebbe essere abituati a fare con altri compilatori.Gli errori di compilazione che si hanno all'inizio quando si converte un progetto JavaScript in un progetto TypeScript sono inevitabili per la natura di TypeScript. TypeScript controlla tutto il codice per la validità e quindi ha bisogno di conoscere tutte le funzioni e le variabili che vengono utilizzate. Quindi le definizioni dei tipi devono essere a posto per tutti loro, altrimenti gli errori di compilazione sono destinati a verificarsi. Come menzionato nel capitolo precedente, per quasi tutti i framework JavaScript ci sono file
.d.ts
che possono essere facilmente acquisiti con l'installazione di pacchetti DefinitelyTyped. Potrebbe, tuttavia, essere che tu abbia usato qualche oscura libreria per la quale non sono disponibili definizioni di TypeScript o che tu abbia riempito alcune primitive JavaScript. In questo caso, è necessario fornire definizioni di tipo per questi bit affinché gli errori di compilazione scompaiano. Basta creare un file.d.ts
e includerlo nell'arrayfiles
di tsconfig.json, in modo che sia sempre considerato dal compilatore TypeScript. In esso dichiarate quei bit che TypeScript non conosce come tipoany
. Una volta che hai eliminato tutti gli errori, puoi gradualmente introdurre la tipizzazione in quelle parti secondo le tue esigenze. Un po' di lavoro sulla (ri)configurazione della pipeline di compilazione sarà anche necessario per far entrare TypeScript nella pipeline di compilazione. Come menzionato nel capitolo sulla compilazione ci sono molte buone risorse là fuori e vi incoraggio a cercare progetti seed che usino la combinazione di strumenti con cui volete lavorare. Il più grande ostacolo è la curva di apprendimento. Vi incoraggio a giocare con un piccolo progetto all'inizio. Guardate come funziona, come si costruisce, quali file usa, come è configurato, come funziona nel vostro IDE, come è strutturato, quali strumenti usa, ecc. Convertire una grande base di codice JavaScript in TypeScript è fattibile quando si sa cosa si sta facendo. Leggete questo blog per esempio su convertire 600k linee in typescript in 72 ore). Assicuratevi solo di avere una buona padronanza del linguaggio prima di fare il salto.Adozione
TypeScript è open-source (licenza Apache 2, vedi GitHub) e sostenuto da Microsoft. Anders Hejlsberg, l'architetto principale di C# è a capo del progetto. È un progetto molto attivo; il team TypeScript ha rilasciato molte nuove funzionalità negli ultimi anni e molte altre sono ancora in programma (vedi la roadmap). Alcuni fatti sull'adozione e la popolarità:
"TypeScript Fundamentals" -- un video-corso Pluralsight di Dan Wahlin e John Papa è un ottimo, attualmente (25 marzo 2016) aggiornato per riflettere TypeScript 1.8, introduzione a Typescript.
Per me le caratteristiche veramente buone, oltre alle belle possibilità di intellisense, sono le classi, interfacce, moduli, la facilità di implementare AMD, e la possibilità di usare il debugger di Visual Studio Typescript quando invocato con IE.
Riassumendo: Se usato come previsto, Typescript può rendere la programmazione JavaScript più affidabile e più facile. Può aumentare la produttività del programmatore JavaScript in modo significativo durante l'intero SDLC.