Il Dynamic Duo per Web Dev ⋆ winadmin.it

0 Condivisioni

TypeScript si sta facendo strada come uno dei linguaggi di programmazione più popolari per le organizzazioni moderne.

TypeScript è un apice JavaScript compilato e rigorosamente tipizzato (costruito sopra il linguaggio JavaScript). Questo linguaggio tipizzato staticamente, sviluppato e gestito da Microsoft, supporta concetti orientati agli oggetti come il suo sottoinsieme, JavaScript.

Questo linguaggio di programmazione open source ha molti casi d’uso, come la creazione di applicazioni Web, su larga scala e mobili. TypeScript può essere utilizzato per lo sviluppo front-end e back-end. Dispone inoltre di vari framework e librerie che semplificano lo sviluppo ed estendono i suoi casi d’uso.

Perché utilizzare TypeScript con Node.js? Questo articolo discuterà perché TypeScript è considerato “migliore” di JavaScript, come installarlo usando Node.js, configurare e creare un piccolo programma usando TypeScript e Node.js.

Sommario:

TypeScript con Node.js: vantaggi

Tipizzazione statica facoltativa: JavaScript è tipizzato dinamicamente, il che significa che il tipo di dati di una variabile viene determinato in fase di esecuzione e non durante la fase di compilazione. D’altra parte, TypeScript offre una tipizzazione statica opzionale, il che significa che una volta dichiarata una variabile, non cambierà il suo tipo e prenderà solo determinati valori.
Prevedibilità: quando si ha a che fare con TypeScript, c’è la certezza che tutto ciò che si definisce rimarrà lo stesso. Ad esempio, se dichiari una determinata variabile come booleana, non potrà mai trasformarsi in una stringa lungo il percorso. Come sviluppatore, hai la certezza che le tue funzioni rimarranno le stesse.
Bug facili da individuare in anticipo: TypeScript rileva la maggior parte degli errori di digitazione in anticipo, quindi la loro probabilità di passare alla produzione è bassa. Ciò riduce il tempo che gli ingegneri impiegano per testare il codice nelle fasi successive.
Supportato sulla maggior parte degli IDE: TypeScript funziona con la maggior parte degli ambienti di sviluppo integrati (IDE). La maggior parte di questi IDE fornisce il completamento del codice e l’evidenziazione della sintassi. Questo articolo utilizzerà Visual Studio Code, un altro prodotto Microsoft.
Facile refactoring del codice: puoi aggiornare o eseguire il refactoring della tua app TypeScript senza modificarne il comportamento. La presenza di strumenti di navigazione e l’IDE che comprende il tuo codice semplificano il refactoring della base di codice senza sforzo.
Utilizza i pacchetti esistenti: non devi creare tutto da zero; puoi utilizzare i pacchetti NPM esistenti con TypeScript. Questo linguaggio ha anche una forte comunità che mantiene e crea definizioni di tipo per pacchetti popolari.

Come usare TypeScript con Node.js

Anche se TypeScript ha questi vantaggi, i browser moderni non possono leggere il suo codice in forma semplice. Pertanto, il codice TypeScript deve essere prima convertito in codice JavaScript per essere eseguito sui browser. Il codice risultante avrà la stessa funzionalità del codice TypeScript originale e funzionalità extra non disponibili in JavaScript.

Prerequisiti

Node.js: Node è un ambiente di runtime multipiattaforma che consente l’esecuzione di codice JavaScript al di fuori di un ambiente browser. Puoi verificare se il nodo è installato sulla tua macchina usando questo comando;

nodo -v

Altrimenti, puoi scaricare Node.js dal sito ufficiale. Eseguire nuovamente il comando precedente dopo l’installazione per verificare se è stato configurato correttamente.

Un Node Package Manager: puoi usare NPM o Yarn. Il primo viene installato per impostazione predefinita quando installi Node.js. Useremo NPM come gestore di pacchetti in questo articolo. Usa questo comando per controllare la sua versione attuale;

npm -v

Installazione di TypeScript con Node.js

Passaggio 1: imposta una cartella di progetto

Inizieremo creando una cartella di progetto per il progetto TypeScript. Puoi dare a questa cartella qualsiasi nome di tuo gradimento. Puoi usare questi comandi per iniziare;

mkdir dattiloscritto-nodo

cd dattiloscritto-nodo

Passaggio 2: inizializzare il progetto

Usa npm per inizializzare il tuo progetto usando questo comando;

npm init -y

Il comando precedente creerà un file package.json. Il flag -y nel comando indica a npm di includere i valori predefiniti. Il file generato avrà un output simile.

{

  "name": "typescript-node",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo "Error: no test specified" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

Configurazione di TypeScript con Node.js

Passaggio 1: installare il compilatore TypeScript

Ora puoi installare il compilatore TypeScript nel tuo progetto. Esegui questo comando;

npm install –save-dev dattiloscritto

L’output sulla riga di comando sarà qualcosa di simile a questo;

added 1 package, and audited 2 packages in 26s

found 0 vulnerabilities

Nota: l’approccio precedente installa TypeScript localmente nella cartella del progetto su cui stai lavorando. Puoi installare TypeScript a livello globale sul tuo sistema, quindi non devi installarlo ogni volta che lavori su un progetto. Usa questo comando per installare TypeScript a livello globale;

npm install -g typescript

Puoi verificare se TypeScript è stato installato usando questo comando;

tsc -v

Passaggio 2: aggiungi i tipi Ambient Node.js per TypeScript

TypeScript ha diversi tipi, come implicito, esplicito e ambiente. I tipi di ambiente vengono sempre aggiunti all’ambito di esecuzione globale. Utilizzare questo comando per aggiungere tipi di ambiente;

npm install @types/node –save-dev

Passaggio 3: creare un file tsconfig.json

Questo è il file di configurazione che specifica tutte le opzioni di compilazione di TypeScript. Esegui questo comando che viene fornito con diverse opzioni di compilazione definite;

npx tsc --init --rootDir src --outDir build 

--esModuleInterop --resolveJsonModule --lib es6 

--module commonjs --allowJs true --noImplicitAny true

Questo verrà emesso sul terminale;

Verrà generato il file tsconfig.json, che contiene alcuni valori predefiniti e commenti.

file tsconfig.json

Questo è ciò che abbiamo configurato:

La rootDir è dove TypeScript cercherà il nostro codice. Lo abbiamo indirizzato alla cartella /src dove scriveremo il nostro codice.
La cartella outDir definisce dove viene inserito il codice compilato. Tale codice è configurato per essere memorizzato nella cartella build/.

Utilizzo di TypeScript con Node.js

Passaggio 1: creare la cartella src e il file index.ts

Ora abbiamo la configurazione di base. Ora possiamo creare una semplice app TypeScript e compilarla. L’estensione del file per un file TypeScript è .ts. Esegui questi comandi all’interno della cartella che abbiamo creato nei passaggi precedenti;

mkdir src

tocca src/index.ts

Passaggio 2: aggiungi il codice al file TypeScript (index.ts)

Puoi iniziare con qualcosa di semplice come;

console.log('Hello world!')

Passaggio 3: compila il codice TypeScript in codice JavaScript

Esegui questo comando;

npx tsc

Puoi controllare la cartella build (build/index.js) e vedrai che un index.js è stato generato con questo output;

TypeScript è stato compilato in codice JavaScript.

Passaggio 4: eseguire il codice JavaScript compilato

Ricorda che il codice TypeScript non può essere eseguito sui browser. Eseguiremo quindi il codice in index.js nella cartella build. Esegui questo comando;

node build/index.js

Questo sarà l’output;

Passaggio 5: configura TypeScript per la compilazione automatica in codice JavaScript

La compilazione manuale del codice TypeScript ogni volta che si modificano i file TypeScript può far perdere tempo. Puoi installare ts-node (esegue il codice TypeScript direttamente senza attendere la compilazione) e nodemon (controlla il codice per le modifiche e riavvia automaticamente il server).

Esegui questo comando;

npm install --save-dev ts-node nodemon

Puoi quindi andare al file package.json e aggiungere questo script;

"scripts": {

   "start": "ts-node ./src/index.ts"

}

Possiamo usare un nuovo blocco di codice a scopo dimostrativo;

function sum (num1:number, num2:number, num3:number){

    return num1 + num2 +num3;

}

console.log(sum(10,15,30))

Elimina il file index.js (/build/index.js) ed esegui npm start.

Il tuo output sarà simile a questo;

somma di 3 numeri

Configura TypeScript Linting con eslint

Passaggio 1: installa eslint

Il linting può essere utile se si desidera mantenere la coerenza del codice e rilevare gli errori prima del runtime. Installa eslint usando questo comando;

npm install --save-dev eslint

Passaggio 2: inizializza eslint

Puoi inizializzare eslint usando questo comando;

npx eslint --init

Il processo di inizializzazione ti porterà attraverso diversi passaggi. Usa lo screenshot seguente come guida;

Una volta terminato il processo, vedrai un file chiamato .eslintrc.js con contenuti simili a questo;

module.exports = {

  env: {

    browser: true,

    es2021: true

  },

  extends: 'standard-with-typescript',

  overrides: [

  ],

  parserOptions: {

    ecmaVersion: 'latest',

    sourceType: 'module'

  },

  rules: {

  }

}

Passaggio 3: eseguire eslint

Esegui questo comando per controllare e filtrare tutti i file con l’estensione .ts;

npx eslint . --ext .ts

Passaggio 4: aggiornare package.json

Aggiungi uno script lint su questo file per il lint automatico.

"scripts": {

    "lint": "eslint . --ext .ts",

  },

TypeScript con Node.js: best practice

Mantieni TypeScript aggiornato: gli sviluppatori di TypeScript rilasciano sempre nuove versioni. Assicurati di avere l’ultima versione installata sulla cartella del tuo computer/progetto e beneficia di nuove funzionalità e correzioni di bug.
Abilita modalità rigorosa: puoi rilevare gli errori di programmazione comuni in fase di compilazione quando abiliti la modalità rigorosa nel file tsconfig.json. Ciò ridurrà il tempo di debug, portando a una maggiore produttività.
Abilita controlli null rigorosi: puoi rilevare tutti gli errori null e non definiti in fase di compilazione abilitando i controlli null rigorosi sul file tsconfig.json.
Usa un editor di codice che supporti TypeScript: esistono moltissimi editor di codice. Una buona pratica è scegliere editor di codice come VS Code, Sublime Text o Atom che supportano TypeScript tramite plug-in.
Usa tipi e interfacce: con tipi e interfacce, puoi definire tipi personalizzati che puoi riutilizzare nell’intero progetto. Un tale approccio renderà il tuo codice più modulare e facile da mantenere.

Avvolgendo

Ora hai la struttura di base di un’app creata con TypeScript su Node.js. Ora puoi utilizzare i normali pacchetti Node.js, ma comunque scrivere il tuo codice in TypeScript e goderti tutte le funzionalità extra fornite con quest’ultimo.

Se hai appena iniziato con TypeScript, assicurati di comprendere le differenze tra TypeScript e JavaScript.

Cosa ne pensi di questo articolo?