Come portare il tuo programma JavaScript su TypeScript

Originariamente rilasciato nel 1995 dopo un periodo di sviluppo incredibilmente breve, JavaScript è diventato parte integrante di molti siti e app. Oggi, JavaScript ha trovato una casa sia nelle applicazioni lato client che in quelle lato server. Gli sviluppatori richiedono ancora molte funzionalità, nonostante tutti i cambiamenti che ha subito nel corso degli anni.

TypeScript è un linguaggio di scripting che estende JavaScript con molte di queste funzionalità tanto attese. L'annotazione del tipo, la digitazione personalizzata e le interfacce sono tutti componenti principali, insieme a strumenti migliori per aumentare la produttività.

Perché preoccuparsi di cambiare?

La prospettiva di cambiare lingua su grandi progetti può essere stressante. Fortunatamente per chiunque consideri l'attività, il processo di porting di un progetto da JavaScript a TypeScript è abbastanza semplice.

JavaScript ha trascorso gli ultimi anni guadagnando terreno come uno dei principali linguaggi di programmazione. Originariamente utilizzato solo per lo scripting front-end sui siti Web, il rilascio di Node.js ha portato JavaScript sul lato server, contribuendo ad espandere la sua popolarità.

Sebbene JavaScript sia diventato molto più popolare di recente, ci sono molte funzionalità che mancano ancora alla sua ultima implementazione, ES6. Per molti sviluppatori, queste funzionalità carenti limitano l'utilità di JavaScript come linguaggio.

TypeScript mira a correggere queste preoccupazioni avvolgendo JavaScript con funzionalità extra, quindi transpilando il codice utente. Il risultato è un linguaggio indipendente dai tipi con la facilità e l'usabilità di JavaScript.

Esistono già diversi strumenti e framework con il supporto completo di TypeScript. Angular lo usa da molto tempo e persino React ha modi per implementare TypeScript.

TypeScript è come JavaScript migliorato

TypeScript implementa molte delle funzionalità che gli sviluppatori spesso richiedono in JavaScript. TypeScript prende il nome dal sistema di tipi completo che implementa, incluse funzionalità come il controllo del tipo, la sicurezza e la digitazione implicita. TypeScript te lo consente persino definire e utilizzare spazi dei nomi personalizzati.

TypeScript contiene anche interfacce, enumerazioni e inferenza del tipo. TypeScript mantiene il supporto per le funzionalità dell'ultima implementazione di JavaScript insieme alle funzionalità legacy e aggiunge una suite di nuove funzionalità.

Nel complesso, l'obiettivo di TypeScript è creare un processo di sviluppo più sicuro con strumenti più potenti per assistere i programmatori.

Incoraggia il codice type-safe

TypeScript utilizza un sistema di controllo del tipo integrato per convalidare i tipi di variabile. Include un set di tipi standard con la possibilità di definire le proprie classi e tipi. I tipi possono essere dichiarati in modo esplicito o dedotti in base all'assegnazione.

TypeScript ha diversi tipi di dati standard, tra cui stringhe, numeri, booleani e tuple. Ci sono anche i tipi di variabile, come unknown e any, che ti permettono di usare codice con tipizzazione debole.

L'inferenza del tipo di TypeScript consente di eseguire controlli di tipo anche su codice JavaScript standard eseguendolo tramite il transpiler di TypeScript.

Transpilation lo rende facile da usare

Dal punto di vista dello sviluppatore, una delle migliori caratteristiche di TypeScript è che produce JavaScript vanilla. Puoi eseguire il codice TypeScript tramite un processo noto come transpilazione, che è simile alla compilazione.

Piuttosto che un eseguibile, il risultato della transpilazione è uno script in una lingua diversa da quella originale del codice.

Il codice TypeScript viene trasferito in JavaScript che è quindi possibile eseguire su un server o client. Ciò ti consente di scrivere rapidamente e facilmente codice che puoi eseguire su quasi tutte le piattaforme.

TypeScript aiuta la produttività degli sviluppatori

L'aggiunta di tipi a JavaScript non solo consente l'esecuzione sicura del codice, ma fornisce anche agli sviluppatori strumenti che semplificano la codifica. La maggior parte degli IDE moderni offre il supporto TypeScript che consente agli strumenti di completamento del codice come IntelliSense di offrire un contesto aggiuntivo al codice. Può anche offrire il controllo del tipo mentre scrivi, aiutandoti a rilevare gli errori più rapidamente.

Inoltre, le strutture di dati e la sintassi extra di TypeScript sono progettate per aumentare la leggibilità del codice. Queste funzionalità rendono più semplice e veloce la creazione di codice di alta qualità e l'individuazione di potenziali problemi prima che diventino problematici.

Come puoi portare il tuo codice?

Se stai iniziando un nuovo progetto, creazione di un nuovo progetto TypeScript è abbastanza semplice. La conversione di un progetto preesistente in TypeScript, tuttavia, è un po' più complicata.

In circostanze normali, la prospettiva di convertire un progetto da una lingua all'altra è spaventosa. La conversione da JavaScript a TypeScript, tuttavia, è sorprendentemente semplice.

TypeScript come superset di JavaScript

TypeScript è considerato un superset di JavaScript. Ciò significa che TypeScript aggiunge ulteriori livelli di sintassi e funzionalità, senza modificare o rimuovere la funzionalità di base su cui si basa.

Per gli sviluppatori, ciò significa che qualsiasi codice eseguito correttamente in JavaScript verrà eseguito automaticamente correttamente in TypeScript. Indipendentemente dal fatto che lo script in questione sia un server Web scritto per essere eseguito in NodeJS o un set di script front-end per una pagina Web, il passaggio è eccezionalmente semplice.

Dopo aver installato il transpiler TypeScript, puoi creare un file semplice tsconfig.json file con il seguente contenuto:

{
"Opzioni del compilatore": {
"fuoriDir": "./costruire",
"permettiJs": VERO,
"bersaglio": "es5"
 },
"includere": ["./src/**/*"]
}

Sposta tutti i file applicabili nella directory src ed esegui il transpiler. Questo creerà i file JavaScript risultanti nel formato costruire directory.

Queste modifiche rapide e semplici convertiranno un progetto JavaScript standard in uno TypeScript. Da qui, sei libero di utilizzare le nuove funzionalità offerte da TypeScript a tuo piacimento. È possibile annotare tipi su variabili, implementare tipi personalizzati e definire interfacce.

Dopo ogni transpilation, puoi utilizzare l'output del file costruire directory se necessario aggiungendo i file in qualsiasi progetto come faresti normalmente. Il transpiler digiterà check JavaScript standard e convertirà le nuove funzionalità in script ES5 validi.

Cosa devi sapere per passare da JS a TS

Il processo di conversione di un progetto da JavaScript a TypeScript è eccezionalmente semplice. La conversione è semplice come cambiare la struttura della directory, aggiungere un file di configurazione e installare il transpiler.

Ottenere tutti i vantaggi dalla nuova lingua, tuttavia, può essere un progetto molto più lungo. Mentre TypeScript può dedurre il tipo di ogni variabile in un progetto, questi dovrebbero essere dichiarati in modo esplicito. Tornare indietro e aggiungere tipi personalizzati a un progetto, aggiungere annotazioni appropriate e creare interfacce può richiedere molto tempo.

L'aggiunta di queste funzionalità a un progetto, tuttavia, consentirà di sfruttare i vantaggi derivanti da un corretto controllo del tipo e da strumenti estesi. I progetti più importanti saranno più veloci e facili da costruire, identificherai gli errori prima e i nuovi sviluppatori avranno più tempo per leggere il tuo codice.