Cos'è TypeScript? JavaScript fortemente tipizzato

Cos'è TypeScript? TypeScript definito

TypeScript è una variazione del popolare linguaggio di programmazione JavaScript che aggiunge alcune funzionalità chiave importanti per lo sviluppo aziendale. In particolare, TypeScript è fortemente tipizzato , ovvero variabili e altre strutture di dati possono essere dichiarate di un tipo specifico, come una stringa o un booleano, dal programmatore e TypeScript verificherà la validità dei loro valori. Questo non è possibile in JavaScript, che è digitato in modo approssimativo .

La forte digitazione di TypeScript rende possibile una serie di funzionalità che aiutano a rendere gli sviluppatori più efficienti, soprattutto quando si tratta di basi di codice di grandi dimensioni su scala aziendale. TypeScript è compilato, piuttosto che interpretato come JavaScript, il che significa che gli errori possono essere rilevati prima dell'esecuzione; Gli IDE che eseguono la compilazione incrementale in background possono individuare tali errori durante il processo di codifica.

Nonostante questa differenza fondamentale rispetto a JavaScript, TypeScript può ancora essere eseguito ovunque possa essere eseguito JavaScript. Questo perché TypeScript non viene compilato in un eseguibile binario, ma in JavaScript standard. Immergiamoci per saperne di più.

TypeScript contro JavaScript 

TypeScript è un superset di JavaScript. Sebbene qualsiasi codice JavaScript corretto sia anche codice TypeScript corretto, TypeScript ha anche funzionalità del linguaggio che non fanno parte di JavaScript. La caratteristica più importante unica di TypeScript, quella che ha dato il nome a TypeScript, è, come notato, la digitazione forte: una variabile TypeScript è associata a un tipo, come una stringa, un numero o un booleano, che dice al compilatore che tipo di dati può reggere. Inoltre, TypeScript supporta l'inferenza del tipo e include un qualsiasi tipo catch-all, il che significa che le variabili non devono avere i loro tipi assegnati esplicitamente dal programmatore; ne riparleremo tra poco. 

TypeScript è progettato anche per la programmazione orientata agli oggetti: JavaScript, non tanto. Concetti come ereditarietà e controllo degli accessi che non sono intuitivi in ​​JavaScript sono semplici da implementare in TypeScript. Inoltre, TypeScript ti consente di implementare interfacce, un concetto in gran parte privo di significato nel mondo JavaScript.

Detto questo, non ci sono funzionalità che puoi codificare in TypeScript che non puoi anche codificare in JavaScript. Questo perché TypeScript non è compilato in senso convenzionale, come, ad esempio, C ++ viene compilato in un eseguibile binario che può essere eseguito su hardware specificato. Invece, il compilatore TypeScript transcodifica il codice TypeScript in JavaScript funzionalmente equivalente. Questo articolo di Sean Maxwell su GitConnected contiene alcuni ottimi esempi di frammenti di codice TypeScript orientati agli oggetti e dei loro equivalenti JavaScript. Il JavaScript risultante può quindi essere eseguito ovunque sia possibile eseguire qualsiasi codice JavaScript, da un browser Web a un server dotato di Node.js.

Quindi se TypeScript è, alla fine, solo un modo stravagante per generare codice JavaScript, perché preoccuparsene? Per rispondere a questa domanda, dobbiamo guardare da dove proviene TypeScript e per cosa viene utilizzato.

A cosa serve TypeScript?

TypeScript è stato rilasciato come open source nel 2012 dopo essere stato sviluppato all'interno di Microsoft. (Il gigante del software rimane l'amministratore del progetto e lo sviluppatore principale.) Questo articolo di ZDNet dell'epoca offre uno sguardo intrigante sul motivo per cui ciò è accaduto: "Si scopre che una delle grandi motivazioni era l'esperienza di altri team di Microsoft che stavano tentando di sviluppare e mantenere i prodotti Microsoft in JavaScript. "

A quel tempo, Microsoft stava cercando di ampliare Bing Maps come concorrente di Google Maps, oltre a offrire versioni web della sua suite Office e JavaScript era il linguaggio di sviluppo principale per le attività. Ma gli sviluppatori, in sostanza, hanno trovato difficile scrivere app sulla scala delle offerte di punta di Microsoft utilizzando JavaScript. Così hanno sviluppato TypeScript per semplificare la creazione di applicazioni a livello aziendale da eseguire in ambienti JavaScript. Questo è lo spirito dietro lo slogan per la lingua sul sito ufficiale del progetto TypeScript: "JavaScript that scales".

Perché TypeScript è migliore per questo tipo di lavoro rispetto a JavaScript vanigliato? Bene, possiamo discutere all'infinito sui meriti della programmazione orientata agli oggetti, ma la realtà è che molti sviluppatori di software che lavorano su grandi progetti aziendali ci sono abituati e aiuta con il riutilizzo del codice man mano che i progetti aumentano di dimensioni. Inoltre, non dovresti trascurare la misura in cui gli strumenti possono aumentare la produttività degli sviluppatori. Come notato, la maggior parte degli IDE aziendali supporta la compilazione incrementale in background, che può individuare errori durante il lavoro. (Finché il codice è sintatticamente corretto, verrà comunque trasferito, ma il JavaScript risultante potrebbe non funzionare correttamente; pensa al controllo degli errori come l'equivalente del controllo ortografico.) Questi IDE possono anche aiutarti a refactoring del codice mentre approfondisci il tuo progetto.

In breve, TypeScript viene utilizzato quando si desiderano le funzionalità e gli strumenti aziendali di un linguaggio come Java, ma è necessario che il codice venga eseguito in un ambiente JavaScript. In teoria, potresti scrivere il JavaScript standard che il compilatore TypeScript genera da solo, ma ci vorrebbe molto più tempo e la base di codice sarebbe più difficile per un grande team da comprendere e eseguire il debug collettivamente.

Oh, e TypeScript ha un altro asso nella manica: puoi impostare il compilatore per indirizzare uno specifico ambiente di runtime JavaScript, browser o persino una versione del linguaggio. Poiché qualsiasi codice JavaScript ben formato è anche codice TypeScript, è possibile, ad esempio, prendere il codice scritto nella specifica ECMAScript 2015, che includeva una serie di nuove funzionalità sintattiche, e compilarlo in codice JavaScript compatibile con le versioni legacy di la lingua.

Installa TypeScript

Pronto per iniziare a giocare con TypeScript? L'installazione della lingua è semplice. Se utilizzi già Node.js sulla tua macchina di sviluppo, puoi utilizzare NPM, il gestore di pacchetti Node.js, per installarlo. Il tutorial ufficiale di TypeScript in 5 minuti ti guiderà attraverso il processo.

TypeScript può anche essere installato come plug-in per il tuo IDE preferito, il che ti darà i vantaggi degli strumenti di cui abbiamo parlato sopra e si occuperà anche del processo di compilazione di TypeScript in JavaScript. Poiché TypeScript è stato sviluppato da Microsoft, non sorprende che siano disponibili plug-in di alta qualità per Visual Studio e Visual Studio Code. Ma come progetto open source, TypeScript è stato adattato ovunque, dagli IDE open source come Eclipse ai venerabili editor di testo come Vim. E l'intero progetto può essere sfogliato e scaricato da GitHub.

Sintassi TypeScript

Una volta installato TypeScript, sei pronto per iniziare a esplorare e ciò significa comprendere le basi della sintassi di TypeScript. Poiché JavaScript è la base di TypeScript, è necessario avere familiarità con JavaScript prima di iniziare. Senza dubbio i tuoi principali punti di interesse saranno le caratteristiche specifiche di TypeScript che rendono il linguaggio unico; toccheremo i punti più alti qui.

Tipi TypeScript

Ovviamente la caratteristica sintattica più importante in TypeScript è il sistema di caratteri. La lingua supporta una serie di tipi di base:

  • Booleano: un semplice valore vero / falso.
  • Numero: in TypeScript, come in JavaScript, tutti i numeri sono valori in virgola mobile: non esiste un numero intero separato. TypeScript supporta i letterali decimali, esadecimali, binari e ottali.
  • Stringa: una stringa di dati testuali. È possibile utilizzare virgolette singole o doppie per racchiudere la stringa durante l'impostazione dei dati. Puoi anche usare i backtick ( `) per racchiudere stringhe con più righe e puoi incorporare espressioni in una stringa con la sintassi ${ expr }.
  • Matrici e tuple: questi tipi consentono di memorizzare più valori in una sequenza specificata. In un array, i singoli valori sono tutti dello stesso tipo di dati, mentre in una tupla possono essere eterogenei. Il forEach()metodo TypeScript viene utilizzato per chiamare una funzione su ogni elemento in un array.
  • Enum: come il tipo con lo stesso nome in C #, un'enumerazione TypeScript consente di assegnare nomi leggibili dall'uomo a una sequenza di valori numerici.
  • Qualsiasi: questo è un tipo per una variabile in cui non si sa necessariamente in anticipo quale valore verrà assegnato, ad esempio potrebbe prendere i suoi valori dall'input dell'utente o da una libreria di terze parti.
  • Oggetto: questo è il tipo che rappresenta tutto ciò che non è un tipo primitivo; è essenziale per la natura orientata agli oggetti di TypeScript.

Esistono due modi diversi per assegnare esplicitamente un tipo a una variabile. Il primo è la sintassi delle parentesi angolari:

let someValue: any;

let strLength: number = (someValue) .length;

E il secondo è la assintassi:

let someValue: any = "questa è una stringa";

let strLength: number = (someValue as string) .length;

Questi frammenti di codice, presi dalla documentazione di TypeScript, sono funzionalmente equivalenti. Entrambi definiscono someValuecome una variabile di tipo anye assegnano "this is a string"come suo valore, quindi definiscono strLengthcome un numero e assegnano come suo valore la lunghezza del contenuto di someValue.

I tipi TypeScript possono anche essere impostati tramite inferenza. Cioè, se imposti un valore di x su 7 senza stabilire quale sia il tipo x, il compilatore presumerà che x debba essere un numero. In alcune circostanze il compilatore può dedurre un anytipo, sebbene tu possa usare i flag di compilazione per assicurarti che non lo faccia.

Il sistema di tipi TypeScript è piuttosto ricco e va oltre lo scopo di questo articolo. Sono disponibili numerosi tipi avanzati e di utilità; questi includono i tipi di unione, che ti consentono di stabilire che una variabile sarà uno dei diversi tipi specificati, e i tipi mappati, che sono tipi che puoi creare in base a un tipo esistente, in cui trasformi ogni proprietà nel tipo esistente nello stesso modo. Ad esempio, potresti creare un tipo di unione per una variabile che desideri sia un numero o un booleano, ma non una stringa o altro; oppure puoi creare un tipo mappato che imposta tutti gli elementi in un array in sola lettura.

Interfaccia TypeScript

Come la maggior parte dei linguaggi orientati agli oggetti, TypeScript dispone di interfacce che consentono agli utenti di definire i propri tipi. Le interfacce stabiliscono le proprietà di un oggetto, insieme ai tipi associati a tali proprietà. Le interfacce TypeScript possono avere proprietà opzionali. Per ulteriori informazioni sulla sintassi, controlla la documentazione di TypeScript.  

Generici TypeScript

TypeScript condivide anche il concetto di generici con linguaggi orientati agli oggetti come Java e C #. (La funzione equivalente in C ++ è chiamata modello.) In TypeScript, i componenti generici possono funzionare su una varietà di tipi, piuttosto che su uno solo, a seconda di dove vengono chiamati questi componenti nel codice. Ecco un esempio molto semplice dalla documentazione di TypeScript. Innanzitutto, considera questa funzione, che accetta un argomento e quindi lo restituisce immediatamente:

identità della funzione (arg: any): any {

    return arg;

}

Poiché la funzione è definita con il anytipo, accetterà un argomento di qualsiasi tipo tu scelga di lanciarle. Tuttavia, ciò che restituirà sarà del anytipo. Ecco una versione della funzione che utilizza i generici:

identità della funzione (arg: T): T {

    return arg;

}

Questo codice include la variabile di tipoT , che cattura il tipo dell'argomento in arrivo e lo memorizza per un nostro utilizzo successivo.

C'è molto di più nei generici, che sono fondamentali per rendere possibile il riutilizzo del codice nei progetti di grandi imprese. Controlla la documentazione di TypeScript per i dettagli.

TypeScript classe 

Nella programmazione orientata agli oggetti, le classi ereditano la funzionalità e, a loro volta, fungono da elementi costitutivi degli oggetti. JavaScript tradizionalmente non faceva uso di classi, ma si affidava invece a funzioni ed eredità basata su prototipi, ma il concetto è stato aggiunto al linguaggio come parte della versione ECMAScript 2015 dello standard. Le classi avevano già fatto parte di TypeScript e ora TypeScript utilizza la stessa sintassi di JavaScript. Uno dei vantaggi del compilatore di TypeScript è che può trasformare il codice con classi JavaScript in codice JavaScript legacy conforme agli standard precedenti al 2015.

Data TypeScript

Sono disponibili numerosi metodi e oggetti per ottenere e impostare la data e l'ora in TypeScript, per lo più ereditati da JavaScript. JavaTPoint ha una buona panoramica di come funziona.

Tutorial di TypeScript 

Pronto per andare più a fondo? Mettiti al passo con questi tutorial TypeScript:

  • TypeScript in 5 minuti ti guiderà attraverso il processo di installazione di TypeScript, se non lo hai già fatto.
  • Questo tutorial di Visual Studio Code dimostra come gli IDE aggiungono davvero alla tua produttività di sviluppo TypeScript.
  • Tutorial TypeScript per principianti: The Missing Guide è un'introduzione davvero completa che sarà utile anche se hai un'esperienza JavaScript piuttosto limitata.

Se stai cercando di imparare come usare TypeScript con React, la libreria JavaScript per la creazione di interfacce utente sviluppate da Facebook, dai un'occhiata a Come usare TypeScript con React e Redux da Ross Bulat e la sezione su React e webpack nella documentazione di TypeScript. Buon apprendimento!