Come utilizzare TypeScript con il tuo progetto Node.js

TypeScript è utile per creare app complesse e architetture robuste come i microservizi. Naturalmente, TypeScript non può fare nulla che JavaScript non possa fare, ma può rendere più gestibili progetti complessi. La digitazione rigorosa e il supporto per le interfacce di TypeScript lo rendono ottimo per la programmazione orientata agli oggetti. Abbiamo visto molte aziende rivolgersi a TypeScript per codificare il proprio back-end.

Non c'è momento migliore per iniziare a utilizzare TypeScript nel tuo progetto Node.js di adesso. Ma come puoi configurarlo per il tuo progetto Node.js? Lo scoprirai in questo articolo.

Che cos'è TypeScript?

TypeScript è una versione compilata e rigorosamente tipizzata di JavaScript sviluppata e gestita da Microsoft. Il codice TypeScript viene trasferito in JavaScript.

La natura di tipizzazione rigorosa di TypeScript aiuta gli sviluppatori a evitare bug nel loro codice. Compila solo codice che soddisfa le regole dei tipi di dati specificati. Questo rende il codice TypeScript più robusto della sua controparte JavaScript pura.

Supporta anche la programmazione funzionale e orientata agli oggetti. Tutte queste caratteristiche lo rendono altamente scalabile e adatto allo sviluppo di app complesse.

Come impostare TypeScript in Node. JS

Dovrai eseguire alcune configurazioni qua e là per iniziare a utilizzare TypeScript con il tuo progetto Node.js. Ma non preoccuparti, è facile.

Tuttavia, assicurati di farlo installa il pacchetto Node.js npm prima di procedere.

Inizializza un file package.json

Apri il tuo terminale e crea una cartella di progetto. Quindi, inserisci questa nuova directory e inizializza un progetto Node.js:

npm init

Il comando precedente crea un pacchetto.json file per memorizzare le tue dipendenze.

Installa TypeScript e altre dipendenze

Quindi, vai avanti e installa TypeScript nel tuo progetto Node.js:

npm i -D dattiloscritto

Il -D assicura che TypeScript venga installato come parte di dipendenze in pacchetto.json.

Dovrai anche installare @tipi/espresso, una definizione TypeScript per Express.js:

npm install -D @tipi/express

Quindi, inizializza a tsconfig.json file. Questo descrive in dettaglio le opzioni di base del compilatore per il tuo progetto:

npx tsc --dentro

Il comando precedente crea un tsconfig.json file nella cartella principale del progetto.

Inoltre, installa Express.js. Potresti saltare questo se intendi gestire solo i server con le primitive HTTP integrate di Node.js. Ma Express.js lo rende facile:

npm installare esprimere

Quindi, installa nodomon, un pacchetto che riavvia automaticamente il server ogni volta che vengono apportate modifiche al codice. Assicurati di installarlo a livello globale affinché funzioni:

npm installare -g nodomon

Configura TypeScript con Node. JS

Apri il tsconfig.json file che hai inizializzato in precedenza usando il tuo editor di codice scelto. Potrebbe esserci molto in questo file. Sebbene tu possa configurare questo file nella sua forma attuale, puoi sostituirne l'intero contenuto con quello qui sotto per renderlo più semplice.

Ecco tutto ciò di cui hai bisogno tsconfig.json per andare:

{
"compilerOptions": {
"modulo": "commonjs",
"esModule Interop": VERO,
"bersaglio": "es6",
"moduloRisoluzione": "nodo",
"sourceMap": VERO,
"outDir": "dist" //Specifica la directory del transpiler. 
 },
"lib": ["es2015"]
}

Ora aperto pacchetto.json. Ecco come appare attualmente dopo l'installazione di TypeScript ed Express:

Quindi, aggiungi le seguenti configurazioni a script Vettore:

"script": {
"test": "eco \"Errore: nessun test specificato\"&& uscita 1",
"costruire": "npx tsc",
"inizio": "nodo ./dist/app.js",
"dist": "tsc -p .",
 "dev": "nodemon ./src/app.ts", //Sostituire questo insieme a il corretto directoryil percorsoper app.ts in il tuo Astuccio
"genere": "modulo"
}

La configurazione sopra indica il tuo server da cui partire app.js, il trasduttore. Nessun problema, questo è un file predefinito che verrà creato automaticamente in a dist cartella quando si esegue il costruire sceneggiatura. Lo farai più avanti lungo la linea.

La configurazione specifica quindi lo script di sviluppo primario come app.ts.

Quindi, quando si avvia l'ambiente di sviluppo, nodomon corre app.ts. Node.js lo compila quindi in JavaScript all'interno app.js—che comunica con il server HTTP.

Quindi, crea un src cartella nella directory principale del progetto. All'interno di questa cartella, crea un file TypeScript vuoto e assegnagli un nome app.ts.

Crea la directory Transpiler

Il transpiler è un file JavaScript che compila il codice TypeScript in JavaScript nativo. Quindi questo assicura che il server possa relazionarsi con il tuo codice come JavaScript invece dello script rigorosamente digitato.

Quindi, mentre TypeScript gestisce la struttura del codice, il file transpiler lo compila in JavaScript.

Ora esegui il costruire script per creare il dist directory del transpiler automaticamente:

npm esegui build

Il comando precedente compila il codice TypeScript in JavaScript. La cartella creata contiene due file; app.js e app.js.map.

Aprire pacchetto.json ancora. Vedrai una chiave nell'array chiamato principale. Puoi vedere che il suo valore punta a index.js. Sostituisci questo con il app.js directory dei file (transpiler):

"principale": "./dist/app.js",

Dopo la formattazione, pacchetto.json dovrebbe assomigliare a questo:

Questo è tutto per la parte delle configurazioni.

Crea ed esegui una richiesta HTTP

Ora prova a creare ed eseguire una richiesta HTTP tramite il server Express.js per vedere se il tuo codice viene compilato come dovrebbe.

Dentro app.ts:

importare espresso, {Richiesta, Risposta} a partire dal 'esprimere'
cost app = espresso()
app.get('/', asincrono (richiesto: richiesta, ris: risposta)=>{
 console.log('Ciao mondo')
 ris.send('Ciao mondo')
})
cost porto = 8080
app.listen (porta, (): vuoto=>{
consolle.tronco d'albero(`L'app sta ascoltando http://localhost:${porta}`)
})

Quindi, apri la riga di comando nella directory principale del tuo progetto ed esegui il file div script per iniziare il tuo progetto:

npm esegui dev

Apri il tuo browser e vai su host locale: 8080, e vedrai la risposta (Ciao mondo). Lo vedrai anche nel terminale se hai applicato il console.log comando come abbiamo fatto nell'esempio sopra.

TypeScript ha prospettive di alta domanda

Non c'è molta differenza tra TypeScript e JavaScript. Ma il primo facilita lo sviluppo con l'aggiunta di una tipizzazione rigorosa.

TypeScript è un linguaggio prezioso nei framework frontend come Angular e non possiamo negarne le prestazioni e la scalabilità. Sta diventando sempre più popolare e le prospettive di lavoro per gli sviluppatori di TypeScript continuano a crescere.

Un'introduzione ad angolare

Leggi Avanti

Circa l'autore