Kako koristiti TypeScript sa svojim Node.js projektom

TypeScript je zgodan za izradu složenih aplikacija i robusnih arhitektura poput mikroservisa. Naravno, TypeScript ne može učiniti ništa što JavaScript ne može, ali može učiniti složene projekte lakšim za upravljanje. Strogo tipkanje TypeScript-a i podrška za sučelja znače da je izvrstan za objektno orijentirano programiranje. Vidjeli smo kako se mnoge tvrtke okreću TypeScript-u za kodiranje svoje pozadine.

Nema boljeg vremena da počnete koristiti TypeScript u svom Node.js projektu nego sada. Ali kako ga možete postaviti za svoj Node.js projekt? Saznat ćete u ovom članku.

Što je TypeScript?

TypeScript je kompilirana, strogo tipizirana verzija JavaScripta koju je razvio i održava Microsoft. TypeScript kod se pretvara u JavaScript.

Stroga priroda TypeScript-a pomaže programerima da izbjegnu greške u svom kodu. Sastavit će samo kod koji zadovoljava pravila svojih specificiranih tipova podataka. To čini TypeScript kod robusnijim od njegovog čistog JavaScript kolege.

Također podržava funkcionalno i objektno orijentirano programiranje. Sve te značajke čine ga vrlo skalabilnim i pogodnim za razvoj složenih aplikacija.

Kako postaviti TypeScript u Node. JS

Morat ćete tu i tamo podići nekoliko konfiguracija da biste počeli koristiti TypeScript sa svojim Node.js projektom. Ali bez brige, lako je.

Međutim, pobrinite se da ste instalirajte Node.js npm paket prije nastavka.

Inicijalizirajte datoteku package.json

Otvorite svoj terminal i stvorite mapu projekta. Zatim unesite ovaj novi direktorij i inicijalizirajte Node.js projekt:

npm init

Gornja naredba stvara a paket.json datoteku za pohranu vaših ovisnosti.

Instalirajte TypeScript i druge ovisnosti

Zatim nastavite i instalirajte TypeScript u svoj projekt Node.js:

npm i -D strojopis

The -D ključna riječ osigurava da se TypeScript instalira kao dio devDependencies u paket.json.

Također ćete morati instalirati @vrste/izrazi, definicija TypeScript za Express.js:

npm install -D @vrste/express

Zatim inicijalizirajte a tsconfig.json datoteka. Ovo detaljno opisuje osnovne opcije prevoditelja za vaš projekt:

npx tsc --u tome

Gornja naredba stvara a tsconfig.json datoteku u korijenskoj mapi vašeg projekta.

Također, instalirajte Express.js. Ovo možete preskočiti ako namjeravate upravljati poslužiteljima samo s ugrađenim HTTP primitivima Node.js. Ali Express.js ovo olakšava:

npm instalirati izraziti

Zatim, instalirajte nodemon, paket koji automatski ponovno pokreće vaš poslužitelj kad god dođe do promjena u vašem kodu. Obavezno instalirajte ovo globalno da bi radilo:

npm instalirati -g nodemon

Konfigurirajte TypeScript s čvorom. JS

Otvori tsconfig.json datoteku koju ste ranije inicijalizirali koristeći svoj odabrani uređivač koda. U ovoj datoteci može biti puno toga. Iako biste mogli konfigurirati ovu datoteku u njezinom trenutnom obliku, možete zamijeniti njezin cijeli sadržaj onim u nastavku kako biste je učinili jednostavnijom.

Ovdje je sve što trebate tsconfig.json krenuti:

{
"compilerOptions": {
"modul": "commonjs",
"esModuleInterop": istina,
"cilj": "es6",
"modulResolution": "čvor",
"izvorna karta": istina,
"outDir": "dist" //Određuje direktorij transpilera. 
 },
"lib": ["es2015"]
}

Sada otvoreno paket.json. Evo kako trenutno izgleda nakon instalacije TypeScript i Expressa:

Zatim dodajte sljedeće konfiguracije u skripte niz:

"skripte": {
"test": "jeka \"Pogreška: nije naveden test\"&& izlaz 1",
"izgraditi": "npx tsc",
"početak": "čvor ./dist/app.js",
"dist": "tsc -p .",
 "dev": "nodemon ./src/app.ts", //Zamijeniti ovaj s ispravan imenikstazaza app.ts u tvoj slučaj
"tip": "modul"
}

Gornja konfiguracija upućuje na početak vašeg poslužitelja app.js, transpiler. Bez brige, ovo je zadana datoteka koja će se automatski kreirati u a dist mapu kada pokrenete izgraditi skripta. To ćete učiniti kasnije.

Konfiguracija zatim specificira primarnu razvojnu skriptu kao app.ts.

Stoga, kada pokrenete razvojno okruženje, nodemon trči app.ts. Node.js to zatim kompilira u JavaScript unutra app.js—koji komunicira s HTTP poslužiteljem.

Zatim kreirajte a src mapu u korijenskom direktoriju vašeg projekta. Unutar ove mape stvorite praznu TypeScript datoteku i dajte joj naziv app.ts.

Stvorite direktorij transpilera

Transpiler je JavaScript datoteka koja kompajlira TypeScript kod u izvorni JavaScript. Dakle, to osigurava da se poslužitelj može povezati s vašim kodom kao JavaScript umjesto strogo upisane skripte.

Dakle, dok TypeScript upravlja strukturom koda, datoteka transpilera ga kompilira u JavaScript.

Sada pokrenite izgraditi skripta za stvaranje dist direktorij transpilera automatski:

npm run build

Gornja naredba kompilira vaš TypeScript kod u JavaScript. Stvorena mapa sadrži dvije datoteke; app.js i app.js.map.

Otvoren paket.json opet. Vidjet ćete ključ u nizu pod nazivom glavni. Možete vidjeti da njegova vrijednost ukazuje na index.js. Zamijenite ovo sa app.js (transpiler) direktorij datoteka:

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

Nakon formatiranja, paket.json trebao bi izgledati ovako:

To je to za dio konfiguracija.

Izradite i pokrenite HTTP zahtjev

Sada pokušajte stvoriti i pokrenuti HTTP zahtjev putem Express.js poslužitelja da vidite hoće li se vaš kod kompilirati kako treba.

Iznutra app.ts:

uvoz ekspresno, {Zahtjev, Odgovor} iz 'izraziti'
konst aplikacija = express()
app.get('/', async (req: Zahtjev, res: Odgovor)=>{
 console.log('Pozdrav svijete')
 res.send('Pozdrav svijete')
})
konst luka = 8080
app.listen (port, (): poništiti=>{
konzola.log(`Aplikacija sluša na http://localhost:${port}`)
})

Zatim otvorite naredbeni redak u korijenskom direktoriju vašeg projekta i pokrenite datoteku dev skripta za pokretanje vašeg projekta:

npm run dev

Otvorite preglednik i idite na lokalni host: 8080, i vidjet ćeš odgovor (Pozdrav svijete). To ćete također vidjeti u terminalu ako ste primijenili konzola.log naredbu kao što smo učinili u gornjem primjeru.

TypeScript ima veliku potražnju

Teško da postoji velika razlika između TypeScript-a i JavaScripta. Ali prvi olakšava razvoj dodatkom strogog tipkanja.

TypeScript je vrijedan jezik u frontend okvirima kao što je Angular, i ne možemo poreći njegovu izvedbu i skalabilnost. Postaje sve popularniji, a izgledi za posao za TypeScript programere stalno rastu.

Uvod u Angular

Pročitajte dalje

O autoru