Så här använder du TypeScript med ditt Node.js-projekt

TypeScript är praktiskt för att skapa komplexa appar och robusta arkitekturer som mikrotjänster. Naturligtvis kan TypeScript inte göra något som JavaScript inte kan, men det kan göra komplexa projekt mer hanterbara. TypeScripts strikta skrivning och stöd för gränssnitt betyder att det är utmärkt för objektorienterad programmering. Vi har sett många företag vända sig till TypeScript för att koda deras backend.

Det finns ingen bättre tid att börja använda TypeScript i ditt Node.js-projekt än nu. Men hur kan du ställa in det för ditt Node.js-projekt? Du får reda på det i den här artikeln.

Vad är TypeScript?

TypeScript är en kompilerad, strikt typad version av JavaScript utvecklad och underhållen av Microsoft. TypeScript-kod överförs till JavaScript.

Den strikta typen av typning av TypeScript hjälper utvecklare att undvika buggar i sin kod. Det kommer bara att kompilera kod som uppfyller reglerna för dess specificerade datatyper. Detta gör TypeScript-kod mer robust än dess rena JavaScript-motsvarighet.

Den stöder även både funktionell och objektorienterad programmering. Alla dessa funktioner gör den mycket skalbar och lämplig för att utveckla komplexa appar.

Hur man ställer in TypeScript i Node. JS

Du måste dra upp några konfigurationer här och där för att börja använda TypeScript med ditt Node.js-projekt. Men oroa dig inte, det är lätt.

Se dock till att du installera paketet Node.js npm innan fortsättning.

Initiera filen package.json

Öppna din terminal och skapa en projektmapp. Ange sedan den här nya katalogen och initiera ett Node.js-projekt:

npm init

Kommandot ovan skapar en package.json fil för att lagra dina beroenden.

Installera TypeScript och andra beroenden

Fortsätt sedan och installera TypeScript i ditt Node.js-projekt:

npm i -D typskript

De -D nyckelordet säkerställer att TypeScript installeras som en del av beroenden i package.json.

Du måste också installera @typer/express, en TypeScript-definition för Express.js:

npm installera -D @typer/express

Initiera sedan a tsconfig.json fil. Detta beskriver baskompilatoralternativen för ditt projekt:

npx tsc --i det

Kommandot ovan skapar en tsconfig.json filen i din projektrotmapp.

Installera även Express.js. Du kan hoppa över detta om du bara tänker hantera servrar med Node.js inbyggda HTTP-primitiver. Men Express.js gör det här enkelt:

npm Installera uttrycka

Installera sedan nodemon, ett paket som startar om din server automatiskt när det sker ändringar i din kod. Se till att installera detta globalt för att det ska fungera:

npm Installera -g nodemon

Konfigurera TypeScript med Node. JS

Öppna tsconfig.json fil du initierade tidigare med din vald kodredigerare. Det kan finnas mycket i den här filen. Även om du kanske konfigurerar den här filen i dess nuvarande form, kan du ersätta hela innehållet med det nedan för att göra det enklare.

Här är allt du behöver i tsconfig.json att komma igång:

{
"kompilatoralternativ": {
"modul": "commonjs",
"esModuleInterop": Sann,
"mål": "es6",
"modulupplösning": "nod",
"sourceMap": Sann,
"utDir": "dist" //Anger transpilerkatalogen. 
 },
"lib": ["es2015"]
}

Nu öppen package.json. Så här ser det ut för närvarande efter installation av TypeScript och Express:

Lägg sedan till följande konfigurationer till manus array:

"manus": {
"testa": "eko \"Fel: inget test specificerat\"&& utgång 1",
"bygga": "npx tsc",
"Start": "nod ./dist/app.js",
"dist": "tsc -p.",
 "dev": "nodemon ./src/app.ts", //Byta ut detta med det rätta katalogvägför app.ts i din fall
"typ": "modul"
}

Ovanstående konfiguration pekar på att din server ska starta app.js, transpilern. Inga bekymmer, detta är en standardfil som skapas automatiskt i en dist mapp när du kör bygga manus. Du kommer att göra detta senare.

Konfigurationen anger sedan det primära utvecklingsskriptet som app.ts.

Därför, när du startar utvecklingsmiljön, nodemon springer app.ts. Node.js kompilerar sedan detta till JavaScript inuti app.js—som kommunicerar med HTTP-servern.

Skapa sedan en src mappen i ditt projekts rotkatalog. Inuti den här mappen skapar du en tom TypeScript-fil och ger den ett namn app.ts.

Skapa Transpiler Directory

Transpileraren är en JavaScript-fil som kompilerar TypeScript-kod till inbyggt JavaScript. Så detta säkerställer att servern kan relatera till din kod som JavaScript istället för det strikt skrivna skriptet.

Så medan TypeScript hanterar kodstruktur, kompilerar transpilerfilen den till JavaScript.

Kör nu bygga skript för att skapa dist transpiler katalog automatiskt:

npm kör bygg

Ovanstående kommando kompilerar din TypeScript-kod till JavaScript. Den skapade mappen innehåller två filer; app.js och app.js.map.

Öppen package.json på nytt. Du kommer att se en nyckel i arrayen med namnet huvud. Du kan se att dess värde pekar på index.js. Ersätt detta med app.js (transpiler) filkatalog:

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

Efter formatering, package.json ska se ut så här:

Det var allt för konfigurationsdelen.

Skapa och kör en HTTP-förfrågan

Försök nu att skapa och köra en HTTP-förfrågan via Express.js-servern för att se om din kod kompilerar som den ska.

Inuti app.ts:

importera uttrycka, {Request, Response} från 'uttrycka'
konst app = express()
app.get('/', async (req: Request, res: Response)=>{
 console.log('Hej världen')
 res.send('Hej världen')
})
konst port = 8080
app.listen (port, (): tomhet=>{
trösta.logga(`Appen lyssnar på http://localhost:${port}`)
})

Öppna sedan kommandoraden till ditt projekts rotkatalog och kör dev skript för att starta ditt projekt:

npm kör dev

Öppna din webbläsare och gå till lokal värd: 8080, och du kommer att se svaret (Hej världen). Du kommer också att se detta i terminalen om du har tillämpat console.log kommando som vi gjorde i exemplet ovan.

TypeScript har hög efterfrågan

Det är knappast stor skillnad mellan TypeScript och JavaScript. Men den förra underlättar utvecklingen med tillägget av strikt skrivning.

TypeScript är ett värdefullt språk i frontend-ramverk som Angular, och vi kan inte förneka dess prestanda och skalbarhet. Det blir mer populärt och jobbutsikterna för TypeScript-utvecklare fortsätter att öka.

En introduktion till Angular

Läs Nästa

Om författaren