Una delle domande più frequenti che ricevo è: qual è la differenza tra JavaScript e Typescript?
Scopriamolo…
Dal momento in cui hai iniziato a programmare, JavaScript (JS) sarebbe stato parte di tutti i tuoi progetti front-end. Se hai un po’ di familiarità con JS, pensa a TypeScript come a JS oltre ad alcune funzionalità aggiuntive che rendono la tua applicazione più ordinata e digitata. Il typeScript è stato sviluppato come progetto open source da Microsoft per rendere più efficiente lo sviluppo di JS e rilevare gli errori di compilazione all’inizio.
In questo articolo, discuteremo alcune importanti caratteristiche di JavaScript e TypeScript e le differenze tra i due linguaggi di scripting.
Sommario:
Cos’è JavaScript?
JavaScript viene utilizzato per gli script lato client. Puoi creare uno script su una pagina HTML o creare un file con estensione .js e includerlo nel tuo file HTML. Un esempio comune nel mondo reale in cui puoi vedere JavaScript è la convalida della pagina di accesso, in cui ti viene mostrato un errore quando il tuo nome utente/password non è corretto.
Scriviamo un semplice codice JS ed eseguiamolo sul browser:
Crea un file example.html e aggiungi il codice seguente:
<script> feeling = 'happy'; feeling = 23; </script>
Questo semplice codice dichiara una variabile e le assegna un valore di happy (stringa). Possiamo assegnare un valore di tipo diverso (numero) alla stessa variabile. JavaScript non se ne lamenterebbe e possiamo eseguire il codice su qualsiasi browser senza problemi. Ora, prendiamo il valore del sentimento dall’utente:
Il nostro HTML sarà simile a questo:
<input type = "textbox" id = "howyoufeel">
e lo script sarà:
feeling = document.getElementById("howyoufeel").value;
A meno che non mettiamo controlli espliciti nello script, JS accetterà qualsiasi valore dall’utente e lo trasmetterà. Quindi, puoi inserire qualsiasi cosa come 234, @.#$%, ecc. nella variabile feeling.
Caratteristiche di JavaScript
Da quanto sopra, possiamo osservare le seguenti caratteristiche di JavaScript:
- Linguaggio di script debolmente tipizzato
- Utilizzato per gli script lato client e lato server (con node.js).
- Flessibile e dinamico
- Supportato da tutti i principali browser
- Leggero e interpretato
Se sei interessato a padroneggiare JavaScript, dai un’occhiata a questo Corso Udemy.
Che cos’è TypeScript?
Un’applicazione del mondo reale avrà molte convalide e controlli dinamici. Per tali applicazioni, il codice JavaScript diventerà difficile da testare a un certo punto, principalmente perché non c’è il controllo del tipo. Mentre si ottengono valori dagli utenti, è importante ottenerli proprio all’inizio stesso. È qui che entra in gioco TypeScript.
TypeScript è fortemente tipizzato e ha un compilatore che si lamenta se non si definisce il tipo di una variabile.
Sia JavaScript che TypeScript sono conformi alle specifiche ECMAScript per un linguaggio di scripting. Typescript può eseguire tutto il codice JavaScript e supporta tutte le sue librerie, ecco perché è chiamato superset di JavaScript.
Installazione TypeScript
Per eseguire il nostro codice precedente in TypeScript, dobbiamo installare il compilatore TypeScript usando il pacchetto npm (se hai il nodo js).
npm install -g typescript
oppure scaricalo direttamente dall’ufficiale Pagina dei download di Microsoft. Puoi anche usare il Parco giochi TS per vedere come viene trans-compilato il codice da ts a js.
Una volta fatto, puoi configurare le impostazioni del progetto in tsconfig.json e utilizzare qualsiasi IDE o editor di testo per scrivere il codice TypeScript e salvarlo come .ts.
Puoi comunque cavartela non definendo il tipo di variabile e TypeScript può dedurre il tipo di dati. Tuttavia, otterrai un errore di “sensazione” se fornisci qualcosa di diverso dal primo tipo utilizzato (nel nostro caso, una stringa) – durante la compilazione stessa.
È sempre utile che il codice abbia un’annotazione di tipo per manutenibilità e facilità d’uso:
var feeling: string = “happy”;
Non è quello!
TypeScript fornisce molte altre funzionalità per semplificare la vita di uno sviluppatore.
Caratteristiche di TypeScript
Typescript ha un ricco set di funzionalità e ogni versione include nuove funzionalità per rendere lo sviluppo più semplice di prima. Ad esempio, con la nuova versione (4.0), alcune funzionalità aggiuntive sono tipi di tuple variadiche, factory JSX personalizzate, inferenza di proprietà di classe dai costruttori, ecc. Alcune caratteristiche tipiche di TypeScript sono:
- Supporta concetti di programmazione orientata agli oggetti come interfaccia, ereditarietà, classe. generici
- Individuazione precoce degli errori
- Supporto IDE con controllo della sintassi e suggerimenti
- Più facile da eseguire il debug mentre viene digitato
- Trans-compila in JavaScript
- Utilizzato sia per applicazioni lato server che lato client
- Supporto multipiattaforma e multibrowser
- Supporta tutte le librerie e le estensioni JS
Perché abbiamo bisogno di TypeScript? (Vantaggi di TypeScript su JavaScript)
Microsoft ha sviluppato e utilizzato TypeScript per due anni per i suoi progetti interni prima di renderlo pubblico nel 2012. Hanno creato un JavaScript tipizzato perché era più facile testare il codice per applicazioni aziendali di livello produttivo. Puoi comunque utilizzare le funzioni di digitazione dinamica ma anche digitare le variabili quando è veramente necessario.
Considera il codice seguente:
var mynum = //get from user;
addten(number){
return number + 10;
}
Ci aspetteremmo che il risultato fosse sempre un numero. Ma cosa succede se un utente dà “pecora”? L’output sarà pecore10 – idealmente, dobbiamo dire all’utente che questa operazione non è possibile!
Inoltre, quando sono disponibili le informazioni sul tipo, gli editor di testo e gli IDE diventano più pratici da usare e salvano gli errori di runtime. È anche più facile refactoring del codice in un secondo momento.
Significa che non abbiamo bisogno di JavaScript? (Svantaggi di TypeScript su JavaScript)
Puoi pensare a TypeScript come un’estensione di JavaScript, ma certamente non un sostituto.
Per blocchi di codice più piccoli, TypeScript può diventare un sovraccarico: l’installazione, la compilazione e la trans-compilazione saranno ridondanti. Con JavaScript, puoi semplicemente digitare il tuo script in HTML e funzionerebbe. È anche più facile eseguire il debug del codice quando puoi semplicemente aggiornare il browser ogni volta che modifichi qualcosa.
Confronto testa a testa
Ora che abbiamo compreso le caratteristiche e i vantaggi di TypeScript e JavaScript, esaminiamo altri confronti:
Dattiloscritto
JavaScript
Un linguaggio tipizzato che rileva gli errori di compilazione all’inizio
Puoi scoprire gli errori durante il runtime
Adatto per progetti di grandi dimensioni in quanto migliora la manutenibilità e la leggibilità del codice
Man mano che viene aggiunto più codice, diventa difficile testare ed eseguire il debug, quindi JS è adatto per piccoli progetti
Superset di JS, ovvero funzionalità come l’orientamento agli oggetti, il controllo del tipo e altro ancora
Un linguaggio di scripting che supporta la creazione di contenuti web dinamici
Richiede l’installazione del compilatore e l’impostazione della configurazione
Non c’è bisogno di alcuna installazione; Il codice JS può essere scritto direttamente in un browser usando il tag , lo salvi come HTML: vedrai i risultati! Puoi quindi basarti su di esso per creare contenuti più dinamici.
Inoltre, quando lavori su un'applicazione su larga scala, avere una conoscenza di JavaScript ti aiuterà a passare facilmente a TypeScript.
Tuttavia, dal punto di vista della carriera e della retribuzione, come a sviluppatore TypeScript, sarai più flessibile e a tuo agio con i progetti JS e TS, quindi sicuramente una risorsa migliore sul mercato. In genere, gli sviluppatori di TypeScript vengono pagati tra $ 110.000 e $ 147.000, mentre gli sviluppatori JS vengono pagati tra $ 63.000 e $ 118.000 all'anno.