TypeScript vs. JavaScript: comprendere le differenze

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

Cos'è JavaScript?

JavaScript è nato 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, sebbene i due linguaggi siano abbastanza diversi, e la somiglianza nei nomi ha portato a una notevole confusione nel corso degli anni. JavaScript, che si è evoluto in modo significativo, è ora supportato su tutti i browser Web moderni.

L'introduzione di JavaScript lato client in Netscape Navigator è stata rapidamente seguita dall'introduzione di JavaScript lato server nei server web Netscape Enterprise Server e Microsoft IIS. Circa 13 anni dopo, Ryan Dahl ha introdotto Node.js come ambiente di runtime JavaScript open source, multipiattaforma, indipendente da qualsiasi browser o server web.

Linguaggio JavaScript

JavaScript è un linguaggio multi-paradigma. Ha la sintassi delle parentesi graffe e il punto e virgola, come la famiglia di linguaggi C. Ha una digitazione debole e dinamica ed è interpretato o (più spesso) compilato just-in-time. In generale, JavaScript è a thread singolo, sebbene esista un'API Web Workers che esegue il multithreading e ci sono eventi, chiamate di funzioni asincrone e callback.

JavaScript supporta la programmazione orientata agli oggetti utilizzando prototipi anziché l'ereditarietà delle classi utilizzata in C ++, Java e C #, sebbene una classsintassi sia stata aggiunta a JavaScript ES6 nel 2015. JavaScript supporta anche la programmazione funzionale tra cui chiusure, ricorsione e lambda (funzioni anonime).

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

Cosa significa la designazione "ES6"? Il nome del linguaggio JavaScript standardizzato è ECMAScript (ES), dopo l'ente per gli standard internazionali ECMA; ES6 è anche chiamato ECMAScript 2015 (ES2015). ES2020 è attualmente una bozza di standard.

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

var hour = new Date (). getHours ();

var saluto;

if (ora <18) {

  saluto = "Buona giornata";

} altro {

  saluto = "Buonasera";

}

document.getElementById ("demo"). innerHTML = saluto;

Ecosistema JavaScript

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

Le API del browser includono DOM (Document Object Model) e BOM (Browser Object Model), Geolocalizzazione, Canvas (grafica), WebGL (grafica accelerata dalla 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. Altre sono utilità che semplificano la programmazione JavaScript HTML5 e CSS, come jQuery. Alcuni, come Express, sono framework di applicazioni per scopi specifici; per Express, lo scopo è creare server di applicazioni web e mobili su Node.js. Molti altri framework sono stati creati su Express. Nel 2016, ho discusso di 22 framework JavaScript nel tentativo di dare un senso a quello che stava diventando una specie di zoo; molte di queste strutture esistono ancora in una forma o nell'altra, ma molte sono andate nel dimenticatoio.

Esistono molti altri moduli JavaScript, oltre 300.000. Per risolvere questo problema, utilizziamo gestori di pacchetti , come npm, il gestore di pacchetti predefinito per Node.js.

Un'alternativa a npm è Yarn, che proviene da Facebook, e rivendica il vantaggio delle installazioni deterministiche. Strumenti simili includono Bower (da Twitter), che gestisce i componenti front-end piuttosto che i moduli Node; Ender, che si fa chiamare 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 moduli in stile Node.js che vengono compilati per essere utilizzati nel browser. Grunt è un task runner JavaScript orientato ai file e gulp è un sistema di build in streaming e task runner JavaScript. La scelta tra grunt e gulp non è decisiva. Ho installato e utilizzato quello impostato per un determinato progetto.

Per rendere il codice JavaScript più affidabile in assenza di compilazione, utilizziamo linter. Il termine deriva dallo strumento lint in linguaggio C, che era un'utilità Unix standard. I linter JavaScript includono JSLint, JSHint e ESLint. È possibile automatizzare l'esecuzione di linter dopo le modifiche al codice utilizzando un task runner o l'IDE. Anche in questo caso, la scelta tra i linter non è chiara e utilizzo quello impostato per un determinato progetto.

Parlando di editor e IDE, ho esaminato 6 IDE JavaScript e 10 editor JavaScript, l'ultimo nel 2019. Le mie scelte migliori sono state Sublime Text (editor molto veloce), Visual Studio Code (editor configurabile / IDE) e WebStorm (IDE).

Transpilers ti consente di tradurre alcuni altri linguaggi 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.

Cos'è TypeScript?

TypeScript è un superset tipizzato di JavaScript che viene compilato in JavaScript normale (ES3 o versioni successive; è configurabile). Il compilatore da riga di comando TypeScript open source può essere installato come pacchetto Node.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 TypeScript tsc è scritto in TypeScript.

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 facoltativi e l'inferenza del 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 ottenere informazioni dettagliate sul comportamento delle librerie JavaScript esistenti.

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

Linguaggio TypeScript

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

Il tutorial di TypeScript in 5 minuti chiarisce i vantaggi. Il punto di partenza è puro JavaScript con estensione .ts:

funzione di saluto (persona) {

  return "Hello," + person;

}

let user = "Jane User";

document.body.textContent = Greeter (utente);

Se lo compili con tsc, produrrà un file identico con estensione .js.

Il tutorial prevede di modificare questo codice in modo graduale, aggiungendo un'annotazione di tipo person:stringnella definizione della funzione, compilando, testando il controllo del tipo da parte del compilatore, aggiungendo un'interfaccia per un persontipo e infine aggiungendo una classe per Student. Il codice finale è:

classe Studente {

    fullName: stringa;

    costruttore (public firstName: string, public middleInitial: string,

        public lastName: string) {

            this.fullName = firstName + "" + middleInitial + "" + lastName;

    }

}

interfaccia Persona {

    firstName: string;

    lastName: stringa;

}

funzione di saluto (person: Person) {

    return "Hello," + person.firstName + "" + person.lastName;

}

let user = new Student ("Jane", "M.", "User");

document.body.textContent = Greeter (utente);

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 nel semplice JavaScript ES3. Si noti che le proprietà person.firstNamee person.lastNamevengono generate automaticamente dal compilatore quando vede i loro publicattributi nel Studentcostruttore della classe e vengono anche trasferite Personall'interfaccia. Uno dei vantaggi più interessanti delle annotazioni di tipo in TypeScript è che vengono riconosciute dagli strumenti, come Visual Studio Code:

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:

Il tutorial Migrazione da JavaScript fornisce dettagli su come aggiornare un progetto JavaScript esistente. Saltando i passaggi di configurazione, il punto cruciale del metodo è rinominare i file .js in .ts uno alla volta. (Se il tuo file utilizza JSX, un'estensione usata da React, dovrai rinominarlo in .tsx anziché .ts.) Quindi intensifica il controllo degli errori e correggi gli errori.

Tra le altre cose, dovrai modificare le istruzioni require()o basate su modulo in define()istruzioni di importazione TypeScript e aggiungere file di dichiarazione per qualsiasi modulo di libreria che utilizzi. È inoltre necessario riscrivere le esportazioni del modulo utilizzando l' exportistruzione TypeScript . TypeScript supporta i moduli CommonJS, come fa Node.js.

Se si ottengono errori sul numero errato di argomenti, è possibile scrivere firme di sovraccarico della funzione TypeScript. Questa è una caratteristica importante che manca a JavaScript. Infine, dovresti aggiungere tipi alle tue funzioni e, dove appropriato, utilizzare interfacce o classi.

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

Dopo aver convertito tutti i tuoi file JavaScript in TypeScript, potenziato i tipi ed eliminato gli errori, avrai una base di codice molto più solida. Invece di correggere costantemente gli errori di runtime segnalati dai tester o dagli utenti, sarai in grado di rilevare staticamente gli errori più comuni.

Vale la pena guardare Anders Hejlsberg discutere di TypeScript. Come sentirai da lui, TypeScript è JavaScript scalabile.