Prima di conoscere TypeScript, facciamo un passo indietro e rivisitiamo JavaScript. Sin dagli albori del World Wide Web, JavaScript è stato utilizzato per rendere i siti Web interattivi: gestire gli eventi del mouse e della tastiera, convalidare i moduli e così via. Con il tempo, il linguaggio si è evoluto. Ora puoi utilizzare JavaScript per creare siti Web e app per qualsiasi piattaforma. Può essere utilizzato sia per sviluppare il frontend che il backend del tuo sito Web oppure App.
Con questi casi d'uso estesi, la complessità del codice è aumentata. Per i progetti più piccoli, l'utilizzo di JavaScript potrebbe andare ancora bene. Tuttavia, per i progetti più grandi, è diventato difficile eseguire il debug del codice e rilevare gli errori.
TypeScript è un superset di JavaScript. Significa che TypeScript fornisce tutte le caratteristiche e le funzionalità di JavaScript con alcune funzionalità aggiuntive. TypeScript compila in JavaScript e fornisce "sicurezza sul tipo" (da cui il nome!) a JavaScript. È stato creato da Microsoft. apparso per la prima volta l'1 Ottobre del 2012 ed è open source.
Per comprendere la sicurezza dei tipi, considera un esempio in cui definisci un nome di variabile. In JavaScript, useresti un codice simile come di seguito:
var nome = "Saverio"Poiché si tratta di un nome di variabile e non ne abbiamo definito il tipo, questa variabile può avere qualsiasi valore. Non importa se è una stringa, un numero, un booleano o un oggetto. Quindi, il codice seguente verrà eseguito senza errori:
nome = 17
nome = false
Le interfacce vengono utilizzate per garantire che l'oggetto contenga i dati richiesti con il tipo di dati corretto. Questo oggetto può essere una risposta o un corpo di richiesta o parametri per una funzione.
Un'interfaccia ha la seguente sintassi:
interface Profilo {
nome: string;
cognome: string;
}
L'interfaccia di cui sopra può essere utilizzata come segue:
function benvenuto(params: Profilo) {
return "Ciao" + params.nome + " " + params.cognome
}Quanto sopra è un semplice esempio di interfacce. Ci sono varie altre funzionalità fornite dalle interfacce. Puoi impostare proprietà facoltative, estendere le interfacce per aggiungere nuove proprietà e altro ancora.
I tipi letterali di template si basano su tipi letterali stringa e hanno la capacità di espandersi in molte stringhe tramite unioni.
Hanno la stessa sintassi delle stringhe letterali dei modelli in JavaScript , ma vengono utilizzate nelle posizioni di tipo. Quando viene utilizzato con tipi letterali concreti, un valore letterale modello produce un nuovo tipo letterale stringa concatenando i contenuti.
Nell'esempio seguente viene illustrata la sintassi dei tipi letterali.
function benvenuto(message: string, name: "Alice" | "Bob" ){
//...
}
benvenuto("Ciao", "Alice" );
benvenuto("Ciao", "Bob");
benvenuto("Ciao", "Max"); // L'argomento di tipo Max non è assegnabile in quanto i parametri accettati sono solo di tipo "Alice" oppure "Bob".
Questo ci aiuta a scrivere funzioni che accettano solo un certo insieme di valori noti.
Ora che hai una conoscenza di base di cosa sia TypeScript, in questa sezione imparerai come usare TypeScript.
I browser non capiscono TypeScript. Capiscono il codice JavaScript. Quindi, il codice TypeScript deve essere compilato in JavaScript e, per questo, è necessario il compilatore TypeScript.
È possibile installare TypeScript a livello globale utilizzando il seguente comando npm. L'installazione globale ti consente di eseguire il comando tsc ovunque dal tuo terminale.
npm install -g typescriptDopo aver installato TypeScript, crea un file index.ts e aggiungi il seguente codice:
let messaggio:string = "Hello, World!"
function helloWorld() {
console.log(messaggio);
}
helloWorld()
Il codice precedente dichiara una variabile messaggio di tipo stringa e crea una funzione che stampa il messaggio sulla console. Per eseguire questo codice, devi compilarlo in JavaScript. Esegui il seguente comando:
tsc index.tsOsserverai che il compilatore crea un file index.js con il codice compilato.
Il compilatore TypeScript è flessibile e consente di configurare opzioni come la versione JavaScript di destinazione.
Per configurare le opzioni del compilatore, puoi passarle con il comando CLI o creare un tsconfig.json.
TypeScript estende JavaScript, fornendo una migliore esperienza per gli sviluppatori. I vantaggi dell'utilizzo di TypeScript invece che JavaScript sono:
- Digitazione statica: TypeScript viene fornito con una tipizzazione statica opzionale e un sistema di inferenza del tipo, il che significa che una variabile dichiarata senza tipo può essere dedotta da TypeScript in base al suo valore.
- Programmazione orientata agli oggetti: TypeScript supporta concetti di programmazione orientata agli oggetti come classi, ereditarietà, ecc.
- Verifica del tempo di compilazione: JavaScript è un linguaggio di programmazione interpretato. Non è prevista alcuna compilazione. Pertanto, gli errori vengono rilevati durante il runtime. Poiché TypeScript viene compilato in JavaScript, gli errori vengono segnalati durante la fase di compilazione anziché durante il runtime.
- Supporto per editor di codice: IDE o editor di codice come VS Code supportano il completamento automatico per una base di codice TypeScript. Forniscono anche documentazione in linea ed evidenziano gli errori.
- Usa pacchetti esistenti: potresti voler utilizzare un pacchetto npm scritto in JavaScript. Poiché TypeScript è un superset di JavaScript, puoi importare e utilizzare quel pacchetto. Inoltre, la comunità di TypeScript crea e mantiene definizioni di tipo per pacchetti popolari che possono essere utilizzati nei tuoi progetti.
In questo articolo abbiamo visto alcune delle cose più importanti. Se vuoi approfondire l'argomento troverai tutto sulla documentazione ufficiale.
Programmatore informatico italiano, mi occupo di sviluppo sia Front-end che Back-end presso una grande azienda. La programmazione è stata la mia passione, insieme allo sport e al teatro che pratico tutt'ora. Ho deciso di aprire questo blog per dare consigli e condividerli con chi, come me, porta con sé questa passione. [..]
