TypeScripti kasutamine Node.js projektiga

TypeScript on mugav keerukate rakenduste ja tugevate arhitektuuride (nt mikroteenuste) loomiseks. Muidugi ei saa TypeScript teha midagi, mida JavaScript ei suuda, kuid see võib muuta keerulised projektid paremini hallatavaks. TypeScripti range tippimine ja liideste tugi tähendab, et see sobib suurepäraselt objektorienteeritud programmeerimiseks. Oleme näinud, et paljud ettevõtted pöörduvad oma taustaprogrammi kodeerimiseks TypeScripti poole.

TypeScripti Node.js projektis kasutamiseks pole paremat aega kui praegu. Aga kuidas saate seda oma Node.js projekti jaoks seadistada? Sellest artiklist saate teada.

Mis on TypeScript?

TypeScript on JavaScripti kompileeritud, rangelt trükitud versioon, mille on välja töötanud ja hooldanud Microsoft. TypeScripti kood edastatakse JavaScripti.

TypeScripti range tippimise olemus aitab arendajatel vältida oma koodi vigu. See kompileerib ainult koodi, mis vastab selle määratud andmetüüpide reeglitele. See muudab TypeScripti koodi tugevamaks kui selle puhas JavaScripti vaste.

Samuti toetab see nii funktsionaalset kui ka objektorienteeritud programmeerimist. Kõik need funktsioonid muudavad selle väga skaleeritavaks ja sobivad keerukate rakenduste arendamiseks.

TypeScripti seadistamine sõlmes. JS

Peate siin-seal üles tõmbama mõned konfiguratsioonid, et alustada TypeScripti kasutamist oma Node.js projektiga. Kuid ärge muretsege, see on lihtne.

Siiski veenduge, et te installige pakett Node.js npm enne jätkamist.

Käivitage fail package.json

Avage oma terminal ja looge projekti kaust. Seejärel sisestage see uus kataloog ja lähtestage Node.js projekt:

npm init

Ülaltoodud käsk loob a package.json faili oma sõltuvuste salvestamiseks.

Installige TypeScript ja muud sõltuvused

Järgmisena installige TypeScript oma Node.js projekti:

npm i -D masinakiri

The -D Märksõna tagab, et TypeScript installitakse osana devSõltuvused sisse package.json.

Peate ka installima @types/express, Express.js-i TypeScripti definitsioon:

npm install -D @tüübid/express

Järgmisena lähtestage a tsconfig.json faili. See kirjeldab teie projekti põhikompilaatori valikuid:

npx tsc --selles

Ülaltoodud käsk loob a tsconfig.json faili oma projekti juurkaustas.

Installige ka Express.js. Võite selle vahele jätta, kui kavatsete hallata servereid ainult Node.js-i sisseehitatud HTTP-primitiividega. Kuid Express.js teeb selle lihtsaks:

npm installida väljendada

Järgmisena installige sõlme, pakett, mis taaskäivitab teie serveri automaatselt, kui teie koodis tehakse muudatusi. Installige see kindlasti globaalselt, et see töötaks:

npm installida -g sõlme

Konfigureerige TypeScript sõlmega. JS

Ava tsconfig.json faili, mille initsialiseerisite varem oma valitud koodiredaktor. Selles failis võib olla palju. Kuigi võite selle faili praegusel kujul konfigureerida, saate selle lihtsamaks muutmiseks asendada kogu selle sisu allolevaga.

Siin on kõik, mida vajate tsconfig.json käima saamiseks:

{
"kompilaatori valikud": {
"moodul": "commonjs",
"esModuleInterop": tõsi,
"sihtmärk": "es6",
"moodulResolutsioon": "sõlm",
"allikakaart": tõsi,
"väljaDir": "dist" //Määrab transpileri kataloogi. 
 },
"lib": ["es2015"]
}

Nüüd avatud package.json. Pärast TypeScripti ja Expressi installimist see praegu näeb välja järgmine:

Järgmisena lisage järgmised konfiguratsioonid skriptid massiiv:

"skriptid": {
"katsetada": "kaja \"Viga: testi pole määratud\"&& väljapääs 1",
"ehitada": "npx tsc",
"alustada": "sõlm ./dist/app.js",
"dist": "tsc -p .",
 "dev": "nodemon ./src/app.ts", //Asenda see koos õige kataloogteejaoks app.ts sisse sinu juhtum
"tüüp": "moodul"
}

Ülaltoodud konfiguratsioon osutab teie serverile käivitamiseks app.js, transpilaator. Ärge muretsege, see on vaikefail, mis luuakse automaatselt a dist kausta käivitamisel ehitada stsenaarium. Teete seda hiljem.

Seejärel määrab konfiguratsioon esmase arendusskripti kui app.ts.

Seega, kui alustate arenduskeskkonda, sõlme jookseb app.ts. Seejärel kompileerib Node.js selle sees olevaks JavaScriptiks app.js –mis suhtleb HTTP-serveriga.

Järgmisena looge a src kausta oma projekti juurkataloogis. Looge selles kaustas tühi TypeScript-fail ja nimetage see app.ts.

Looge Transpileri kataloog

Transpiler on JavaScripti fail, mis kompileerib TypeScripti koodi natiivseks JavaScriptiks. See tagab, et server saab teie koodiga seostuda JavaScriptina, mitte rangelt sisestatud skriptina.

Ehkki TypeScript tegeleb koodistruktuuriga, kompileerib transpilerifail selle JavaScriptiks.

Nüüd käivitage ehitada skripti loomiseks dist transpileri kataloog automaatselt:

npm run build

Ülaltoodud käsk kompileerib teie TypeScripti koodi JavaScriptiks. Loodud kaust sisaldab kahte faili; app.js ja app.js.map.

Avatud package.json uuesti. Näete massiivi nimega võtit peamine. Näete, et selle väärtus viitab index.js. Asendage see app.js (transpileri) failikataloog:

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

Pärast vormindamist package.json peaks välja nägema selline:

See on konfiguratsioonide osa jaoks.

Looge ja käivitage HTTP-päring

Proovige nüüd luua ja käivitada HTTP-päring Express.js serveri kaudu, et näha, kas teie kood kompileerub nii, nagu peaks.

Sees app.ts:

importida ekspress, {taotlus, vastus} alates 'väljendama'
konst rakendus = express()
app.get('/', async (req: Request, res: Response)=>{
 console.log('Tere, Maailm')
 res.send('Tere, Maailm')
})
konst port = 8080
app.listen (port, (): tühine=>{
konsool.log(`Rakendus kuulab kell http://localhost:${port}`)
})

Järgmisena avage oma projekti juurkataloogi käsurida ja käivitage dev skript projekti käivitamiseks:

npm käivita dev

Avage brauser ja minge aadressile kohalik host: 8080, ja sa näed vastust (Tere, Maailm). Kui olete selle rakendanud, näete seda ka terminalis console.log käsk, nagu tegime ülaltoodud näites.

TypeScriptil on suur nõudlus

TypeScripti ja JavaScripti vahel pole suurt vahet. Kuid esimene hõlbustab arendamist, lisades sellele range trükkimise.

TypeScript on väärtuslik keel sellistes kasutajaliidese raamistikes nagu Angular ja me ei saa eitada selle jõudlust ja mastaapsust. See muutub populaarsemaks ja TypeScripti arendajate tööväljavaated kasvavad pidevalt.

Sissejuhatus Angularisse

Loe edasi

Autori kohta