TypeScript for Beginners, Part 1 Getting Started

Iniziamo questo tutorial con la domanda: "Che cos'è TypeScript?" 

TypeScript è un superset tipizzato di JavaScript che compila in un semplice JavaScript. Come analogia, se JavaScript fosse CSS allora TypeScript sarebbe SCSS. 

Tutto il codice JavaScript valido che scrivi è anche codice TypeScript valido. Tuttavia, con TypeScript, puoi usare la tipizzazione statica e le ultime funzionalità che vengono compilate in un semplice JavaScript, supportato da tutti i browser. TypeScript ha lo scopo di risolvere il problema di rendere JavaScript scalabile, e fa un buon lavoro. 

In questo tutorial, inizierai leggendo le diverse funzionalità di TypeScript e perché imparare è una buona idea. Il resto delle sezioni nell'articolo riguarderà l'installazione e la compilazione di TypeScript insieme ad alcuni editor di testo popolari che offrono supporto per la sintassi TypeScript e altre importanti funzionalità.

Perché imparare TypeScript?

Se non hai mai usato TypeScript in precedenza, potresti chiederti perché dovresti preoccuparti di apprenderlo quando compila JavaScript alla fine. 

Ti assicuro che non dovrai dedicare molto tempo all'apprendimento di TypeScript. Sia TypeScript che JavaScript hanno una sintassi molto simile e puoi semplicemente rinominare il tuo .js file a .ts e iniziare a scrivere il codice TypeScript. Ecco alcune funzionalità che dovrebbero convincerti a iniziare ad imparare TypeScript:

1. A differenza di JavaScript, che viene digitato in modo dinamico, TypeScript consente di utilizzare la digitazione statica. Questa funzionalità rende il codice più gestibile e riduce notevolmente le possibilità di bug che potrebbero essere stati causati a causa di assunzioni errate sul tipo di determinate variabili. Come bonus aggiuntivo, TypeScript può determinare il tipo di una variabile in base al suo utilizzo senza che tu specifichi esplicitamente un tipo. Tuttavia, è sempre necessario specificare i tipi di una variabile esplicitamente per chiarezza.
2. Per essere onesti, JavaScript non è stato progettato per fungere da linguaggio di sviluppo su larga scala. TypeScript aggiunge tutte queste funzionalità mancanti a JavaScript che lo rendono veramente scalabile. Con la tipizzazione statica, l'IDE che stai utilizzando sarà ora in grado di comprendere quel codice che stai scrivendo in un modo migliore. Questo dà all'IDE la possibilità di fornire funzionalità come il completamento del codice e il refactoring sicuro. Tutto ciò si traduce in una migliore esperienza di sviluppo.
3. TypeScript ti consente anche di utilizzare tutte le funzionalità JavaScript più recenti nel tuo codice senza preoccuparti del supporto del browser. Una volta che hai scritto il codice, puoi compilarlo in un semplice vecchio JavaScript supportato da tutti i browser con facilità.
4. Un sacco di framework popolari come Angular e Ionic ora usano TypeScript. Ciò significa che se in futuro deciderai di utilizzare uno qualsiasi dei framework, l'apprendimento di TypeScript ora è una buona idea.

Installazione

Prima di iniziare a scrivere un bel codice TypeScript, devi prima installare TypeScript. Questo può essere fatto con l'aiuto di npm. Se non hai installato npm, dovrai installare npm prima di installare TypeScript. Per installare TypeScript, è necessario avviare il terminale ed eseguire il seguente comando:

npm install -g typescript

Una volta completata l'installazione, è possibile controllare la versione di TypeScript installata eseguendo il comando tsc -v nel tuo terminale. Se tutto è stato installato correttamente, nel terminale verrà visualizzato il numero di versione di TypeScript installato.

IDE ed editor di testo con supporto per TypeScript

TypeScript è stato creato da Microsoft. Quindi il fatto che Visual Studio sia stato il primo IDE a supportare TypeScript non dovrebbe sorprendere. Una volta che TypeScript ha iniziato a guadagnare popolarità, sempre più editor e IDE hanno aggiunto il supporto per questa lingua, sia fuori dalla scatola che attraverso plugin. Un altro editor leggero e open source chiamato Visual Studio Code, creato da Microsoft, ha il supporto integrato per TypeScript. Allo stesso modo, WebStorm ha anche il supporto immediato per TypeScript.

Microsoft ha anche creato un plug-in Sublime TypeScript gratuito. NetBeans ha un plugin TypeScript che offre una varietà di funzionalità per la facilità di sviluppo. L'evidenziazione della sintassi è disponibile in Vim e Notepad ++ con l'aiuto rispettivamente dei plugin typescript-vim e notepadplus-typescript. 

È possibile visualizzare un elenco completo di tutti gli editor di testo e gli IDE che supportano TypeScript su GitHub. Per gli esempi di questa serie, userò Visual Studio Code per scrivere tutto il codice.

Compilazione di TypeScript in JavaScript

Supponiamo che tu abbia scritto del codice TypeScript in a .ts file. I browser non saranno in grado di eseguire questo codice da soli. Dovrai compilare il TypeScript in un semplice JavaScript che possa essere compreso dai browser. 

Se si utilizza un IDE, il codice può essere compilato in JavaScript nell'IDE stesso. Ad esempio, Visual Studio consente di compilare direttamente il codice TypeScript su JavaScript. Dovrai creare un tsconfig.json file in cui si specificano tutte le opzioni di configurazione per la compilazione del file TypeScript su JavaScript. 

L'approccio più amichevole per i principianti quando non si lavora su un progetto di grandi dimensioni è quello di utilizzare il terminale stesso. Per prima cosa, devi passare alla posizione del file TypeScript nel terminale e quindi eseguire il seguente comando.

tsc first.ts

Questo creerà un nuovo file chiamato first.js nella stessa posizione. Tieni presente che se hai già un file chiamato first.js, sarebbe stato sovrascritto.

Se vuoi compilare tutti i file all'interno della directory corrente, puoi farlo con l'aiuto di caratteri jolly. Ricorda che questo non funzionerà in modo ricorsivo.

tsc * .ts 

Infine, puoi compilare solo alcuni file specifici fornendo esplicitamente i loro nomi in una singola riga. In questi casi, i file JavaScript verranno creati con nomi di file corrispondenti.

tsc first.ts product.ts bot.ts

Diamo un'occhiata al seguente programma, che moltiplica due numeri in TypeScript.

lascia un: numero = 12; sia b: number = 17; function showProduct (first: number, second: number): void console.log ("Il prodotto è:" + primo * secondo);  showProduct (a, b);

Il codice TypeScript sopra compila il seguente codice JavaScript quando la versione di destinazione è impostata su ES6. Si noti come tutte le informazioni sul tipo fornite in TypeScript non siano più disponibili dopo la compilazione. In altre parole, il codice viene compilato in JavaScript che può essere compreso dal browser, ma si può fare lo sviluppo in un ambiente molto migliore che può aiutarti a catturare molti bug.

let a = 12; sia b = 17; function showProduct (first, second) console.log ("Il prodotto è:" + primo * secondo);  showProduct (a, b);

Nel codice precedente, abbiamo specificato il tipo di variabili un e B come numeri Ciò significa che se in seguito si tenta di impostare il valore di B a una stringa come "mela", TypeScript ti mostrerà un errore che "mela" non è assegnabile al tipo numero. Il tuo codice verrà comunque compilato su JavaScript, ma questo messaggio di errore ti informerà che hai commesso un errore e ti aiuta a evitare un problema durante l'esecuzione. 

Ecco uno screenshot che mostra il messaggio di errore nel codice di Visual Studio:

L'esempio sopra mostra come TypeScript continua a fornire suggerimenti su possibili errori nel codice. Questo è stato un esempio molto semplice, ma quando crei programmi molto grandi, messaggi come questi contribuiscono notevolmente a scrivere codice robusto con meno possibilità di errore.

Pensieri finali

Questo tutorial introduttivo della serie aveva lo scopo di darti una breve panoramica delle diverse funzionalità di TypeScript e aiutarti a installare la lingua insieme ad alcuni suggerimenti per gli IDE e gli editor di testo che puoi utilizzare per lo sviluppo. La prossima sezione ha riguardato diversi modi di compilare il codice TypeScript in JavaScript e ti ha mostrato come TypeScript può aiutarti a evitare alcuni errori comuni.

Spero che questo tutorial ti sia piaciuto. Se avete domande, fatemelo sapere nei commenti. Il prossimo tutorial della serie discuterà diversi tipi di variabili disponibili in TypeScript.