Kako uporabljati TypeScript s projektom Node.js

TypeScript je priročen za izdelavo zapletenih aplikacij in robustnih arhitektur, kot so mikrostoritve. Seveda TypeScript ne more narediti ničesar, kar ne zmore JavaScript, lahko pa naredi zapletene projekte bolj obvladljive. Strogo tipkanje TypeScript in podpora za vmesnike pomenita, da je odličen za objektno usmerjeno programiranje. Videli smo, da so se mnoga podjetja obrnila na TypeScript za kodiranje svojega ozadja.

Ni boljšega časa za začetek uporabe TypeScript v vašem projektu Node.js kot zdaj. Toda kako ga lahko nastavite za svoj projekt Node.js? Izvedeli boste v tem članku.

Kaj je TypeScript?

TypeScript je prevedena, strogo tipizirana različica JavaScripta, ki jo je razvil in vzdržuje Microsoft. Koda TypeScript se pretvori v JavaScript.

Stroga tipska narava TypeScript razvijalcem pomaga preprečiti napake v svoji kodi. Prevedel bo samo kodo, ki ustreza pravilom določenih podatkovnih tipov. Zaradi tega je koda TypeScript robustnejša od čiste različice JavaScript.

Podpira tudi funkcionalno in objektno usmerjeno programiranje. Zaradi vseh teh funkcij je zelo razširljiv in primeren za razvoj kompleksnih aplikacij.

Kako nastaviti TypeScript v Node. JS

Tu in tam boste morali izvleči nekaj konfiguracij, da začnete uporabljati TypeScript s projektom Node.js. Ampak brez skrbi, enostavno je.

Vendar poskrbite, da boste namestite paket Node.js npm preden nadaljujete.

Inicializirajte datoteko package.json

Odprite svoj terminal in ustvarite mapo projekta. Nato vnesite ta novi imenik in inicializirajte projekt Node.js:

npm init

Zgornji ukaz ustvari a package.json datoteko za shranjevanje vaših odvisnosti.

Namestite TypeScript in druge odvisnosti

Nato nadaljujte in namestite TypeScript v svoj projekt Node.js:

npm i -D tipkopis

The -D ključna beseda zagotavlja, da se TypeScript namesti kot del datoteke devDependencies v package.json.

Prav tako boste morali namestiti @types/express, definicija TypeScript za Express.js:

npm install -D @vrste/express

Nato inicializirajte a tsconfig.json mapa. To podrobno opisuje osnovne možnosti prevajalnika za vaš projekt:

npx tsc --v

Zgornji ukaz ustvari a tsconfig.json datoteko v korenski mapi vašega projekta.

Prav tako namestite Express.js. To lahko preskočite, če nameravate upravljati strežnike samo z vgrajenimi primitivi HTTP Node.js. Toda Express.js to olajša:

npm namestite ekspresno

Nato namestite nodemon, paket, ki samodejno znova zažene vaš strežnik, ko pride do sprememb v vaši kodi. Poskrbite, da boste to namestili globalno, da bo delovalo:

npm namestite -g nodemon

Konfigurirajte TypeScript z vozliščem. JS

Odprite tsconfig.json datoteko, ki ste jo predhodno inicializirali s svojim izbrani urejevalnik kode. V tej datoteki je morda veliko. Čeprav lahko to datoteko konfigurirate v trenutni obliki, lahko njeno celotno vsebino zamenjate s spodnjo, da bo enostavnejša.

Tukaj je vse, kar potrebujete tsconfig.json začeti:

{
"možnosti prevajalnika": {
"modul": "commonjs",
"esModuleInterop": prav,
"cilj": "es6",
"ločljivost modula": "vozlišče",
"sourceMap": prav,
"outDir": "dist" //Določi imenik transpilerja. 
 },
"lib": ["es2015"]
}

Zdaj pa odpri package.json. Takole je trenutno videti po namestitvi TypeScript in Express:

Nato dodajte naslednje konfiguracije v skripte niz:

"skripte": {
"test": "odmev \"Napaka: test ni naveden\"&& izhod 1",
"graditi": "npx tsc",
"začnite": "vozlišče ./dist/app.js",
"dist": "tsc -p .",
 "dev": "nodemon ./src/app.ts", //Zamenjati to z pravilno imenikpotza app.ts v tvoj Ovitek
"tip": "modul"
}

Zgornja konfiguracija usmerja vaš strežnik za začetek app.js, transpiler. Brez skrbi, to je privzeta datoteka, ki bo samodejno ustvarjena v a dist mapo, ko zaženete datoteko graditi skripta. To boste storili pozneje.

Konfiguracija nato določa primarni razvojni skript kot app.ts.

Ko torej zaženete razvojno okolje, nodemon teče app.ts. Node.js to nato prevede v JavaScript app.js—ki komunicira s strežnikom HTTP.

Nato ustvarite a src mapo v korenskem imeniku vašega projekta. V tej mapi ustvarite prazno datoteko TypeScript in jo poimenujte app.ts.

Ustvarite imenik Transpiler

Transpiler je datoteka JavaScript, ki prevede kodo TypeScript v izvorni JavaScript. To torej zagotavlja, da se strežnik lahko poveže z vašo kodo kot JavaScript namesto strogo vnesenega skripta.

Medtem ko TypeScript obdeluje strukturo kode, jo datoteka transpilerja prevede v JavaScript.

Zdaj zaženite graditi skript za ustvarjanje dist imenik transpilerja samodejno:

npm run build

Zgornji ukaz prevede vašo kodo TypeScript v JavaScript. Ustvarjena mapa vsebuje dve datoteki; app.js in app.js.map.

Odprto package.json ponovno. V polju z imenom boste videli ključ glavni. Vidite lahko, da njegova vrednost kaže na index.js. Zamenjajte to z app.js (transpiler) imenik datotek:

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

Po formatiranju, package.json bi moral izgledati takole:

To je to za konfiguracijski del.

Ustvarite in zaženite zahtevo HTTP

Zdaj poskusite ustvariti in zagnati zahtevo HTTP prek strežnika Express.js, da vidite, ali se vaša koda prevede, kot bi morala.

V notranjosti app.ts:

uvoz ekspresno, {Request, Response} od 'express'
konst aplikacija = express()
app.get('/', async (req: Zahteva, res: Odgovor)=>{
 console.log('Pozdravljen, svet')
 res.send('Pozdravljen, svet')
})
konst vrata = 8080
app.listen (pristanišče, (): nična=>{
konzolo.log(`Aplikacija posluša na http://localhost:${port}`)
})

Nato odprite ukazno vrstico v korenskem imeniku vašega projekta in zaženite datoteko dev skript za začetek vašega projekta:

npm run dev

Odprite brskalnik in pojdite na lokalni gostitelj: 8080, in videli boste odgovor (Pozdravljen, svet). To boste videli tudi v terminalu, če ste uporabili console.log ukaz, kot smo naredili v zgornjem primeru.

TypeScript ima veliko povpraševanje

Med TypeScript in JavaScript skoraj ni velike razlike. Toda prvi olajša razvoj z dodatkom strogega tipkanja.

TypeScript je dragocen jezik v frontend okvirih, kot je Angular, in ne moremo zanikati njegove zmogljivosti in razširljivosti. Postaja vse bolj priljubljen, obeti za zaposlitev razvijalcev TypeScript pa se povečujejo.

Uvod v Angular

Preberite Naprej

O avtorju