TypeScript gebruiken met uw Node.js-project

TypeScript is handig voor het maken van complexe apps en robuuste architecturen zoals microservices. Natuurlijk kan TypeScript niets doen wat JavaScript niet kan, maar het kan complexe projecten beter beheersbaar maken. TypeScript's strikte typering en ondersteuning voor interfaces betekenen dat het geweldig is voor objectgeoriënteerd programmeren. We hebben gezien dat veel bedrijven zich tot TypeScript wenden voor het coderen van hun backend.

Er is geen beter moment om TypeScript in uw Node.js-project te gaan gebruiken dan nu. Maar hoe kunt u het instellen voor uw Node.js-project? Dat kom je te weten in dit artikel.

Wat is TypeScript?

TypeScript is een gecompileerde, strikt getypte versie van JavaScript, ontwikkeld en onderhouden door Microsoft. TypeScript-code wordt omgezet in JavaScript.

Het strikte typerende karakter van TypeScript helpt ontwikkelaars om bugs in hun code te voorkomen. Het zal alleen code compileren die voldoet aan de regels van de gespecificeerde gegevenstypen. Dit maakt TypeScript-code robuuster dan zijn pure JavaScript-tegenhanger.

Het ondersteunt ook zowel functioneel als objectgeoriënteerd programmeren. Al deze functies maken het zeer schaalbaar en geschikt voor het ontwikkelen van complexe apps.

TypeScript instellen in Node. JS

Je zult hier en daar een paar configuraties moeten ophalen om TypeScript te gaan gebruiken met je Node.js-project. Maar geen zorgen, het is gemakkelijk.

Zorg er echter voor dat u installeer het Node.js npm-pakket alvorens verder te gaan.

Een package.json-bestand initialiseren

Open uw terminal en maak een projectmap aan. Voer vervolgens deze nieuwe map in en initialiseer een Node.js-project:

npm init

Het bovenstaande commando creëert een pakket.json bestand om uw afhankelijkheden op te slaan.

Installeer TypeScript en andere afhankelijkheden

Ga vervolgens door en installeer TypeScript in uw Node.js-project:

npm i -D typoscript

De -D trefwoord zorgt ervoor dat TypeScript wordt geïnstalleerd als onderdeel van de devAfhankelijkheden in pakket.json.

Je moet ook installeren @types/express, een TypeScript-definitie voor Express.js:

npm installeren -D @soorten/express

Initialiseer vervolgens a tsconfig.json het dossier. Dit beschrijft de basiscompileropties voor uw project:

npx tsc --in het

Het bovenstaande commando creëert een tsconfig.json bestand in de hoofdmap van uw project.

Installeer ook Express.js. U kunt dit overslaan als u alleen servers wilt beheren met de ingebouwde HTTP-primitieven van Node.js. Maar Express.js maakt dit gemakkelijk:

npm installeren uitdrukken

Installeer vervolgens nodemon, een pakket dat uw server automatisch herstart wanneer er wijzigingen in uw code zijn. Zorg ervoor dat u dit wereldwijd installeert om het te laten werken:

npm installeren -g nodemon

Configureer TypeScript met Node. JS

Open de tsconfig.json bestand dat u eerder hebt geïnitialiseerd met uw gekozen code-editor. Er kan veel in dit bestand staan. Hoewel u dit bestand in zijn huidige vorm zou kunnen configureren, kunt u de volledige inhoud vervangen door de onderstaande om het eenvoudiger te maken.

Hier is alles wat je nodig hebt in tsconfig.json aan de slag gaan:

{
"compilerOpties": {
"module": "commonjs",
"esModuleInteroperabiliteit": WAAR,
"doel": "es6",
"moduleResolutie": "knooppunt",
"bronkaart": WAAR,
"uitDir": "dist" // Specificeert de transpiler-map. 
 },
"lib": ["es2015"]
}

Nu open pakket.json. Zo ziet het er momenteel uit na installatie van TypeScript en Express:

Voeg vervolgens de volgende configuraties toe aan de scripts reeks:

"scripts": {
"test": "echo \"Fout: geen test opgegeven\"&& uitgang 1",
"bouwen": "npx tsc",
"begin": "knooppunt ./dist/app.js",
"dist": "tsc -p .",
 "dev": "nodemon ./src/app.ts", //Vervangen deze met de juiste mappadvoor app.ts in uw geval
"type": "module"
}

De bovenstaande configuratie verwijst naar uw server om op te starten app.js, de transponder. Geen zorgen, dit is een standaardbestand dat automatisch wordt aangemaakt in a dist map wanneer u de bouwen script. Dit doe je later.

De configuratie specificeert vervolgens het primaire ontwikkelscript als: app.ts.

Daarom, wanneer u de ontwikkelomgeving start, nodemon loopt app.ts. Node.js compileert dit vervolgens naar binnen in JavaScript app.js—die communiceert met de HTTP-server.

Maak vervolgens een src map in de hoofdmap van uw project. Maak in deze map een leeg TypeScript-bestand en noem het app.ts.

De Transpiler-directory maken

De transpiler is een JavaScript-bestand dat TypeScript-code compileert naar native JavaScript. Dit zorgt er dus voor dat de server zich kan verhouden tot uw code als JavaScript in plaats van het strikt getypte script.

Dus terwijl TypeScript de codestructuur afhandelt, compileert het transpiler-bestand het in JavaScript.

Voer nu de bouwen script om de. te maken dist transpiler-map automatisch:

npm run build

De bovenstaande opdracht compileert uw TypeScript-code in JavaScript. De aangemaakte map bevat twee bestanden; app.js en app.js.map.

Open pakket.json nog een keer. U ziet een sleutel in de array met de naam hoofd. Je kunt zien dat de waarde ervan verwijst naar: index.js. Vervang dit door de app.js (transpiler) bestandsmap:

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

Na het formatteren, pakket.json zou er zo uit moeten zien:

Dat is het voor het configuratiegedeelte.

Een HTTP-verzoek maken en uitvoeren

Probeer nu een HTTP-verzoek te maken en uit te voeren via de Express.js-server om te zien of uw code naar behoren wordt gecompileerd.

Binnenkant app.ts:

importeren uitdrukkelijk, {verzoek, antwoord} van 'uitdrukken'
const app = express()
app.get('/', async (req: Request, res: Response)=>{
 console.log('Hallo Wereld')
 opnieuw.verzenden('Hallo Wereld')
})
const poort = 8080
app.luisteren (poort, (): leegte=>{
troosten.log('App luistert naar' http://localhost:${poort}`)
})

Open vervolgens de opdrachtregel naar de hoofdmap van uw project en voer de dev script om uw project te starten:

npm run dev

Open uw browser en ga naar lokale host: 8080, en je ziet de reactie (Hallo Wereld). Je ziet dit ook in de terminal als je de. hebt toegepast console.log commando zoals we deden in het bovenstaande voorbeeld.

TypeScript heeft hoge vraagvooruitzichten

Er is nauwelijks verschil tussen TypeScript en JavaScript. Maar de eerste vergemakkelijkt de ontwikkeling door de toevoeging van strikt typen.

TypeScript is een waardevolle taal in frontend-frameworks zoals Angular, en we kunnen de prestaties en schaalbaarheid ervan niet ontkennen. Het wordt steeds populairder en de kansen op werk voor TypeScript-ontwikkelaars blijven stijgen.

Een inleiding tot Angular

Lees volgende

Over de auteur