Comprensione della differenza tra dattiloscritto e JavaScript

Pubblicato: 2021-09-21

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 JS più 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 in anticipo.

In questo articolo discuteremo alcune importanti funzionalità di JavaScript e TypeScript e le differenze tra entrambi i linguaggi di scripting.

Cos'è JavaScript?

JavaScript viene utilizzato per lo scripting 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 esempio.html e aggiungi il seguente codice:

 <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, otteniamo il valore del sentimento dall'utente:

Il nostro codice HTML sarà simile a questo:

 <input type = "textbox" id = "howyoufeel">

e lo script sarà:

 feeling = document.getElementById("howyoufeel").value;

A meno che non inseriamo controlli espliciti nello script, JS accetterà qualsiasi valore dall'utente e lo trasmetterà. Quindi, puoi mettere qualcosa come 234, @.#$%, ecc. Nella variabile sentimento.

Caratteristiche di JavaScript

Da quanto sopra, possiamo osservare le seguenti caratteristiche di JavaScript:

  • Linguaggio di scripting debolmente tipizzato
  • Utilizzato per 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.

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. È 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 il superset di JavaScript.

Installazione di TypeScript

Per eseguire il nostro codice precedente in TypeScript, dobbiamo installare il compilatore TypeScript utilizzando il pacchetto npm (se hai il nodo js).

 npm install -g typescript

oppure scaricalo direttamente dalla pagina dei download ufficiali di Microsoft. Puoi anche usare il playground TS per vedere come il codice viene trans-compilato da ts a js.

Fatto ciò, puoi configurare le impostazioni del progetto in tsconfig.json e utilizzare qualsiasi IDE o editor di testo per scrivere codice TypeScript e salvarlo come .ts .

Puoi ancora cavartela non definendo il tipo di variabile e TypeScript può dedurre il tipo di dati. Tuttavia, riceverai 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 la manutenibilità e la facilità d'uso:

 var feeling: string = “happy”;

Non è quello!

TypeScript offre 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 i tipi di tuple variadic, le factory JSX personalizzate, l'inferenza delle proprietà di classe dai costruttori, ecc. Alcune caratteristiche tipiche di TypeScript sono:

  • Supporta concetti di programmazione orientata agli oggetti come interfaccia, ereditarietà, classe. generici
  • Rilevamento precoce degli errori
  • Supporto IDE con controllo della sintassi e suggerimenti
  • È più facile 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 digitato perché era più facile testare il codice per applicazioni aziendali di livello produttivo. Puoi comunque utilizzare le funzionalità di digitazione dinamica ma anche digitare le variabili quando è realmente necessario.

Considera il codice seguente:

 var mynum = //get from user; addten(number){ return number + 10; }

Ci aspetteremmo che il risultato sia sempre un numero. Ma cosa succede se un utente dà "pecora"? L'output sarà sheep10 – idealmente, dobbiamo dire all'utente che questa operazione non è possibile!

Inoltre, quando si hanno a disposizione 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 rifattorizzare il codice in un secondo momento.

Significa che non abbiamo bisogno di JavaScript? (Svantaggi di TypeScript su JavaScript)

Puoi pensare a TypeScript come a un'estensione di JavaScript, ma certamente non a una sostituzione.

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 digitato che rileva presto gli errori di compilazione Puoi trovare errori durante il runtime
Adatto a 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 funzioni come l'orientamento agli oggetti, il controllo del tipo e altro Un linguaggio di scripting che supporta la creazione dinamica di contenuti web
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 <script>
Tutti i file .ts vengono convertiti in file .js prima dell'esecuzione; noto come trans-compilazione Gli sviluppatori possono includere direttamente i file .js all'interno dei file HTML per l'esecuzione utilizzando il tag <src>.
Potente e intuitivo con funzionalità avanzate come moduli, generici, interfacce Adatto per applicazioni web semplici che non richiedono funzionalità avanzate
Utilizzato per script lato server e lato client Facile da usare per lo scripting lato client, ma diventa pesante e complesso per lo scripting lato server
Richiede tempo per l'esecuzione a causa della fase di compilazione Non è richiesta alcuna compilazione, quindi un'esecuzione più rapida
Supporta la digitazione statica e dinamica Supporta solo la digitazione dinamica
Possiamo specificare l'annotazione del tipo come:

var feeling: string = “happy”;

 Le annotazioni di tipo non possono essere specificate poiché non è possibile definire i tipi.

Conclusione

Dal punto di vista dell'apprendimento, JavaScript potrebbe essere la tua scelta naturale. Apri un file, digita qualcosa all'interno dei <script></script> , salvalo 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, la conoscenza di JavaScript ti aiuterà a passare facilmente a TypeScript.

Tuttavia, dal punto di vista della carriera e della retribuzione, come 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 $ 110k e $ 147k, mentre gli sviluppatori JS vengono pagati tra $ 63k e $ 118k all'anno.

TAG:
  • JavaScript