Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. TypeScript
Code

TypeScript per principianti, parte 1: Guida introduttiva

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called TypeScript for Beginners.
TypeScript for Beginners, Part 2: Basic Data Types

Italian (Italiano) translation by Antonio (you can also view the original English article)

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

TypeScript è un superset tipizzato di JavaScript che viene compilato in semplice JavaScript. Analogamente, se JavaScript fosse CSS allora TypeScript sarebbe SCSS.

Tutto il codice JavaScript valido che si scrive è anche codice TypeScript valido. Tuttavia, con TypeScript, puoi usare la tipizzazione statica e le più recenti funzionalità il quale vengono compilate in semplice JavaScript, che è 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, comincerai leggendo le diverse funzionalità di TypeScript e perché impararlo è una buona idea. La parte restante dell'articolo copre l'installazione e la compilazione di TypeScript nonché alcuni editor di testo popolari che offrono il supporto alla sintassi TypeScript e altre importanti funzionalità .

Perché imparare TypeScript?

Se non hai mai usato TypeScript prima, ti potresti chiedere perché dovresti preoccuparti di impararlo quando in fondo compila codice JavaScript.

Ti assicuro che non spenderai molto tempo nell'apprendimento di TypeScript. TypeScript e JavaScript hanno una sintassi molto simile, e basta solo rinominare i tuoi file .js  in  .ts  per iniziare a scrivere codice TypeScript. Ecco alcune funzionalità che dovrebbero convincerti nell'iniziare ad imparare TypeScript:

  1. A differenza di JavaScript, che è  tipizzato dinamicamente, TypeScript consente di utilizzare la tipizzazione 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. Ad 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 ora sarà 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à di 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 di questi 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 npm installato, dovrai installare npm prima di installare TypeScript. Per installare TypeScript, è necessario avviare il terminale ed eseguire il seguente comando:

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

IDEs ed editor di testo con supporto ad TypeScript

TypeScript è stato creato da Microsoft. Quindi il fatto che Visual Studio sia stato il primo IDE a supportare TypeScript non dovrebbe essere una sorpresa. Una volta che TypeScript ha iniziato a guadagnare popolarità, sempre più editor e IDE hanno aggiunto il supporto per questo linguaggio 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, anche WebStorm ha il supporto immediato per TypeScript.

Microsoft ha anche creato un plugin TypeScript per Sublime  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 un file .ts. 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 in JavaScript. Dovrai creare un file tsconfig.json dove specifichi tutte le opzioni di configurazione per compilare il tuo file TypeScript in 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.

Questo creerà un nuovo file chiamato first.js nella stessa posizione. Tieni presente che se disponi già di un file denominato first.js, questo verrà 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.

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.

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

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 il quale può essere compreso dal browser, ma si può fare lo sviluppo in un ambiente molto migliore che può aiutare a catturare molti bug.

Nel codice precedente, abbiamo specificato il tipo delle variabili a e b come numeri. Ciò significa che se in seguito si tenta di impostare su il valore di b una stringa come "apple", TypeScript mostrerà un errore che "apple" non è assegnabile ad un tipo number Il codice verrà comunque compilato in JavaScript, ma questo messaggio di errore ti informerà che hai commesso un errore e ti aiuta a evitare un problemi durante il runtime.

Ecco uno screenshot che mostra il messaggio di errore in Visual Studio Code:

type error in TypeScript

L'esempio sopra mostra come TypeScript continua a fornire suggerimenti su possibili errori nel codice.Questo è stato un esempio molto semplice, ma quando si creano programmi di grandi dimensioni, 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 nell'installazione del linguaggio insieme ad alcuni suggerimenti per gli IDE e gli editor di testo che puoi utilizzare per lo sviluppo. successivamente abbiamo visto diversi modi per compilare il codice TypeScript in JavaScript e come TypeScript può aiutarti a evitare alcuni errori comuni.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.