TypeScript vs. JavaScript: Comprendere le differenze

Il world wide web funziona fondamentalmente su JavaScript, HTML e CSS. Sfortunatamente, JavaScript manca di diverse funzionalità che potrebbero aiutare gli sviluppatori a utilizzarlo per applicazioni su larga scala. Inserisci dattiloscritto.

Che cos’è JavaScript?

JavaScript ha iniziato come linguaggio di scripting per il browser web Netscape Navigator; Brendan Eich ha scritto il prototipo per un periodo di 10 giorni nel 1995. Il nome JavaScript è un cenno al linguaggio Java di Sun Microsystem, anche se le due lingue sono molto diverse, e la somiglianza nei nomi ha portato a una significativa confusione nel corso degli anni. JavaScript, che si è evoluto in modo significativo, è ora supportato su tutti i browser web moderni.

Linguaggio JavaScript

JavaScript è un linguaggio multi-paradigma. Ha sintassi a parentesi graffe e punti e virgola, come la famiglia di linguaggi C. Ha una digitazione debole e dinamica ed è interpretata o (più spesso) compilata just-in-time. In generale, JavaScript è single-threaded, sebbene esista un’API Web Worker che esegue il multithreading e ci sono eventi, chiamate di funzione asincrone e callback.

JavaScript supporta la programmazione orientata agli oggetti utilizzando prototipi piuttosto che l’ereditarietà di classe utilizzata in C++, Java e C#, sebbene una sintassi class sia stata aggiunta a JavaScript ES6 nel 2015. JavaScript supporta anche la programmazione funzionale tra cui chiusure, ricorsioni e lambda (funzioni anonime).

Prima di JavaScript ES6 la lingua non aveva alcuna ottimizzazione delle chiamate di coda; ora lo fa, anche se è necessario attivare la modalità rigorosa ('use strict') per abilitarla e l’implementazione varia da browser a browser. La modalità rigorosa cambia anche la semantica di JavaScript e modifica alcuni errori normalmente silenziosi per generare errori.

Che cosa è con la designazione “ES6”? Il nome per il linguaggio JavaScript standardizzato è ECMAScript (ES), dopo l’ECMA International standards body; ES6 è anche chiamato ECMAScript 2015 (ES2015). ES2020 è attualmente una bozza di standard.

Come semplice esempio per darti il sapore del linguaggio JavaScript, ecco un codice per decidere se è giorno o sera e inserire dinamicamente il saluto appropriato in un elemento web denominato trovato nell’oggetto documento del browser:

var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;

JavaScript ecosystem

Ci sono numerose API JavaScript. Alcuni sono forniti dal browser, come l’API document nel codice mostrato sopra, e alcuni sono forniti da terze parti. Alcune API si applicano all’utilizzo lato client, alcune all’utilizzo lato server, altre all’utilizzo desktop e altre a più di un ambiente.

Le API del browser includono Document Object model (DOM) e browser Object model (BOM), Geolocalizzazione, Canvas (grafica), WebGL (grafica con accelerazione GPU), HTMLMediaElement (audio e video) e WebRTC (comunicazioni in tempo reale).

Le API di terze parti abbondano. Alcuni sono interfacce per applicazioni complete, come Google Maps. Altri sono programmi di utilità che rendono più facile la programmazione JavaScript HTML5 e CSS, come jQuery. Alcuni, come Express, sono framework applicativi per scopi specifici; per Express, lo scopo è quello di creare server di applicazioni Web e mobili sul Nodo.js. Un certo numero di altri framework sono stati costruiti su Express. Nel 2016, ho discusso 22 framework JavaScript nel tentativo di dare un senso a quello che stava diventando qualcosa di uno zoo; molti di questi framework esistono ancora in una forma o nell’altra, ma molti sono andati nel dimenticatoio.

Ci sono molti altri moduli JavaScript, oltre 300.000. Per far fronte a questo, usiamo gestori di pacchetti, come npm, il gestore di pacchetti predefinito per il nodo.js.

Un’alternativa a npm è Yarn, che proviene da Facebook, e rivendica il vantaggio delle installazioni deterministiche. Strumenti simili includono Bower (di Twitter), che gestisce i componenti front-end piuttosto che i moduli Node; Ender, che si definisce la sorellina di npm; e jspm, che utilizza i moduli ES (il più recente standard ECMA per i moduli), piuttosto che i moduli CommonJS, il vecchio standard de-facto supportato da npm.

Webpack raggruppa i moduli JavaScript in risorse statiche per il browser. Browserify consente agli sviluppatori di scrivere Nodo.moduli in stile js che vengono compilati per l’uso nel browser. Grunt è un file-oriented JavaScript task runner, e gulp è un sistema di streaming build e JavaScript task runner. La scelta tra grunt e gulp non è decisiva. Ho sia installato che utilizzato quello impostato per un determinato progetto.

Per rendere il codice JavaScript più affidabile in assenza di compilazione, usiamo linters. Il termine deriva dallo strumento lint in linguaggio C, che era un’utilità standard Unix. I linter JavaScript includono JSLint, JSHint ed ESLint. È possibile automatizzare i linter in esecuzione dopo le modifiche al codice utilizzando un task runner o il proprio IDE. Ancora una volta, la scelta tra i linter non è chiara, e io uso quello che è stato impostato per un determinato progetto.

Parlando di editor e IDE, ho esaminato 6 IDE JavaScript e 10 editor JavaScript, più recentemente in 2019. Le mie scelte migliori erano Sublime Text (editor molto veloce), Visual Studio Code (editor configurabile/IDE) e WebStorm (IDE).

I transpiler consentono di tradurre alcune altre lingue come CoffeeScript o TypeScript in JavaScript e tradurre JavaScript moderno (come il codice ES2015) in un JavaScript di base che viene eseguito in (quasi) qualsiasi browser. (Tutte le scommesse sono disattivate per le prime versioni di Internet Explorer.) Il transpiler più comune per JavaScript moderno è Babel.

Che cos’è TypeScript?

TypeScript è un superset tipizzato di JavaScript che compila in JavaScript semplice (ES3 o superiore, è configurabile). Il compilatore da riga di comando TypeScript open source può essere installato come Nodo.pacchetto js. Il supporto TypeScript viene fornito con Visual Studio 2017 e Visual Studio 2019, Visual Studio Code e WebStorm e può essere aggiunto a Sublime Text, Atom, Eclipse, Emacs e Vim. Il compilatore/transpiler tsc dattiloscritto è scritto in dattiloscritto.

TypeScript aggiunge tipi, classi e moduli opzionali a JavaScript e supporta strumenti per applicazioni JavaScript su larga scala per qualsiasi browser, per qualsiasi host, su qualsiasi sistema operativo. Tra le molte altre vittorie per TypeScript, il popolare framework Angular è stato rinnovato in TypeScript.

I tipi consentono agli sviluppatori JavaScript di utilizzare strumenti e pratiche di sviluppo altamente produttivi come il controllo statico e il refactoring del codice durante lo sviluppo di applicazioni JavaScript.

I tipi sono opzionali e l’inferenza di tipo consente ad alcune annotazioni di tipo di fare una grande differenza per la verifica statica del codice. I tipi consentono di definire le interfacce tra i componenti software e di acquisire informazioni sul comportamento delle librerie JavaScript esistenti.

TypeScript offre supporto per le funzionalità JavaScript più recenti e in evoluzione, incluse quelle di ECMAScript 2015 e proposte future, come funzioni asincrone e decoratori, per aiutare a creare componenti robusti.

Linguaggio TypeScript

Il linguaggio TypeScript accetta JavaScript come valido, ma offre le opzioni aggiuntive di annotazioni di tipo, controllo dei tipi in fase di compilazione, classi e moduli. Tutti questi sono estremamente utili quando si sta cercando di produrre software robusto. Plain JavaScript genera errori solo in fase di runtime e solo se il tuo programma raggiunge un percorso con errori.

Il dattiloscritto in 5 minuti tutorial rende i benefici chiari. Il punto di partenza è puro JavaScript con un .estensione ts:

function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);

Se si compila questo con tsc produrrà un file identico con un .estensione js.

Il tutorial ti ha modificato questo codice in modo graduale, aggiungendo un’annotazione di tipo person:string nella definizione della funzione, compilando, testando il controllo del tipo dal compilatore, aggiungendo un’interfaccia per un tipo persone infine aggiungendo una classe per Student. Il codice finale è:

class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string,
public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

Quando lo compili e guardi il JavaScript emesso, vedrai che le classi in TypeScript sono solo una scorciatoia per la stessa ereditarietà basata su prototipi utilizzata in plain JavaScript ES3. Si noti che le proprietà person.firstName e person.lastName vengono generate automaticamente dal compilatore quando vede i loro attributi public nel costruttore di classe Student e anche riportati nell’interfaccia Person. Uno dei vantaggi più belli delle annotazioni di tipo in TypeScript è che sono riconosciute dagli strumenti, come Visual Studio Code:

IDG

Se ci sono errori nel codice durante la modifica in VS Code, vedrai i messaggi di errore nella scheda Problemi, ad esempio il seguente se elimini la fine della riga con l’istanza di Student:

IDG

Il tutorial Migrazione da JavaScript entra in dettaglio su come aggiornare un progetto JavaScript esistente. Saltando i passaggi di installazione, il punto cruciale del metodo è rinominare il tuo .file js a .ts uno alla volta. (Se il tuo file utilizza JSX, un’estensione utilizzata da React, dovrai rinominarlo in .tsx piuttosto che .TS.) Quindi stringere il controllo degli errori e correggere gli errori.

Tra le altre cose, è necessario modificare le istruzioni require() o define() basate su moduli in istruzioni di importazione TypeScript e aggiungere file di dichiarazione per qualsiasi modulo di libreria utilizzato. È inoltre necessario riscrivere le esportazioni del modulo utilizzando l’istruzione TypeScript export. TypeScript supporta i moduli CommonJS, come Node.js sì.

Se si verificano errori sul numero errato di argomenti, è possibile scrivere firme di sovraccarico della funzione TypeScript. Questa è una caratteristica importante JavaScript manca. Infine, è necessario aggiungere tipi alle proprie funzioni e, se del caso, utilizzare interfacce o classi.

Di solito non è necessario scrivere i propri file di dichiarazione per le librerie JavaScript di pubblico dominio. DefinitelyTyped è un repository di file di dichiarazione, tutti accessibili tramite npm. È possibile trovare le dichiarazioni utilizzando la pagina TypeSearch.

Una volta convertiti tutti i file JavaScript in TypeScript, potenziati i tipi ed eliminati gli errori, avrai una base di codice molto più robusta. Invece di correggere costantemente gli errori di runtime segnalati dai tester o dagli utenti, sarete in grado di rilevare staticamente gli errori più comuni.

Vale la pena guardare Anders Hejlsberg discutere dattiloscritto. Come sentirai da lui, TypeScript è JavaScript che scala.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.