Ako používať TypeScript s projektom Node.js

TypeScript je užitočný na vytváranie zložitých aplikácií a robustných architektúr, ako sú mikroslužby. Samozrejme, TypeScript nemôže robiť nič, čo JavaScript nedokáže, ale môže urobiť komplexnejšie projekty spravovateľnejšími. Striktné písanie a podpora rozhraní TypeScript znamenajú, že je skvelý pre objektovo orientované programovanie. Videli sme, že mnoho spoločností sa obrátilo na TypeScript na kódovanie svojho backendu.

Nie je lepší čas začať používať TypeScript vo svojom projekte Node.js ako teraz. Ale ako ho môžete nastaviť pre svoj projekt Node.js? To sa dozviete v tomto článku.

Čo je TypeScript?

TypeScript je skompilovaná, striktne napísaná verzia JavaScriptu vyvinutá a udržiavaná spoločnosťou Microsoft. Kód TypeScript sa prenesie do JavaScriptu.

Prísny charakter TypeScriptu pomáha vývojárom vyhnúť sa chybám v kóde. Skompiluje iba kód, ktorý spĺňa pravidlá jej špecifikovaných dátových typov. Vďaka tomu je kód TypeScript robustnejší ako jeho čistý JavaScriptový náprotivok.

Podporuje tiež funkčné a objektovo orientované programovanie. Všetky tieto funkcie ho robia vysoko škálovateľným a vhodným na vývoj zložitých aplikácií.

Ako nastaviť TypeScript v Node. JS

Ak chcete začať používať TypeScript s projektom Node.js, budete musieť sem-tam stiahnuť niekoľko konfigurácií. Ale žiadny strach, je to jednoduché.

Uistite sa však, že vy nainštalujte balík Node.js npm pred pokračovaním.

Inicializujte súbor package.json

Otvorte terminál a vytvorte priečinok projektu. Potom zadajte tento nový adresár a inicializujte projekt Node.js:

npm init

Vyššie uvedený príkaz vytvorí a package.json súbor na uloženie vašich závislostí.

Nainštalujte TypeScript a ďalšie závislosti

Ďalej pokračujte a nainštalujte TypeScript do svojho projektu Node.js:

npm i -D strojopis

The -D kľúčové slovo zaisťuje, že TypeScript sa nainštaluje ako súčasť devDependencies v package.json.

Budete tiež musieť nainštalovať @typy/expres, definícia TypeScript pre Express.js:

inštalácia npm -D @typy/express

Ďalej inicializujte a tsconfig.json súbor. Toto podrobne popisuje možnosti základného kompilátora pre váš projekt:

npx tsc --init

Vyššie uvedený príkaz vytvorí a tsconfig.json súbor v koreňovom priečinku vášho projektu.

Nainštalujte si aj Express.js. Toto môžete preskočiť, ak máte v úmysle spravovať servery iba pomocou vstavaných primitív HTTP Node.js. Express.js to však uľahčuje:

npm Inštalácia expresné

Ďalej nainštalujte uzol, balík, ktorý automaticky reštartuje váš server vždy, keď dôjde k zmenám vo vašom kóde. Aby to fungovalo, nezabudnite to nainštalovať globálne:

npm Inštalácia -g uzol

Nakonfigurujte TypeScript s Node. JS

Otvor tsconfig.json súbor, ktorý ste predtým inicializovali pomocou vášho vybraný editor kódu. V tomto súbore môže byť veľa. Aj keď môžete tento súbor nakonfigurovať v jeho aktuálnej podobe, celý jeho obsah môžete nahradiť nižšie uvedeným, aby ste to zjednodušili.

Tu je všetko, čo potrebujete tsconfig.json ísť do toho:

{
"možnosti kompilátora": {
"modul": "commonjs",
"esModuleInterop": pravda,
"cieľ": "es6",
"modulRozlíšenie": "uzol",
"zdrojová mapa": pravda,
"outDir": "dist" //Určuje adresár transpilera. 
 },
"lib": ["es2015"]
}

Teraz otvorené package.json. Takto to momentálne vyzerá po inštalácii TypeScript a Express:

Ďalej pridajte nasledujúce konfigurácie do skripty pole:

"skripty": {
"testovať": "ozvena \"Chyba: nebol zadaný žiadny test\"&& výstup 1",
"stavať": "npx tsc",
"začať": "uzol ./dist/app.js",
"dist": "tsc -p .",
 "dev": "nodemon ./src/app.ts", //Nahradiť toto s správne adresárcestapre app.ts v tvoj prípad
"typu": "modul"
}

Vyššie uvedená konfigurácia nasmeruje váš server na spustenie app.js, transpilátor. Žiadny strach, toto je predvolený súbor, ktorý sa vytvorí automaticky v a dist pri spustení priečinka stavať skript. Urobíte to neskôr.

Konfigurácia potom špecifikuje primárny vývojový skript ako app.ts.

Keď teda spustíte vývojové prostredie, uzol beží app.ts. Node.js to potom skompiluje do JavaScriptu vo vnútri app.js –ktorý komunikuje s HTTP serverom.

Ďalej vytvorte a src priečinok v koreňovom adresári projektu. V tomto priečinku vytvorte prázdny súbor TypeScript a pomenujte ho app.ts.

Vytvorte adresár Transpiler

Transpiler je súbor JavaScript, ktorý kompiluje kód TypeScript do natívneho JavaScriptu. Takže to zaisťuje, že server môže súvisieť s vaším kódom ako JavaScript namiesto striktne napísaného skriptu.

Takže zatiaľ čo TypeScript spracováva štruktúru kódu, súbor transpiler ho skompiluje do JavaScriptu.

Teraz spustite stavať skript na vytvorenie dist adresár transpiler automaticky:

npm spustiť zostavenie

Vyššie uvedený príkaz skompiluje váš kód TypeScript do JavaScriptu. Vytvorený priečinok obsahuje dva súbory; app.js a app.js.map.

OTVORENÉ package.json znova. V poli s názvom uvidíte kľúč Hlavná. Môžete vidieť, že jeho hodnota ukazuje na index.js. Nahraďte to app.js (transpiler) adresár súboru:

"Hlavná": "./dist/app.js",

Po naformátovaní package.json by mal vyzerať takto:

To je všetko pre časť konfigurácie.

Vytvorte a spustite požiadavku HTTP

Teraz skúste vytvoriť a spustiť požiadavku HTTP prostredníctvom servera Express.js, aby ste zistili, či sa váš kód skompiluje tak, ako by mal.

Vnútri app.ts:

importovať expresné, {požiadavka, odpoveď} od 'expresné'
konšt app = express()
app.get('/', async (požiadavka: požiadavka, res: odpoveď)=>{
 console.log('Ahoj svet')
 znovu.odoslať('Ahoj svet')
})
konšt prístav = 8080
app.listen (port, (): neplatné=>{
konzola.log(„Aplikácia počúva o http://localhost:${port}`)
})

Ďalej otvorte príkazový riadok do koreňového adresára projektu a spustite dev skript na spustenie projektu:

npm spustiť dev

Otvorte prehliadač a prejdite na localhost: 8080, a uvidíš odpoveď (Ahoj svet). Uvidíte to aj v termináli, ak ste použili konzola.log príkaz, ako sme to urobili vo vyššie uvedenom príklade.

TypeScript má vysoký dopyt

Medzi TypeScript a JavaScript nie je takmer žiadny rozdiel. Prvý z nich však uľahčuje vývoj pridaním prísneho písania.

TypeScript je cenný jazyk vo frontendových frameworkoch ako Angular a nemôžeme mu uprieť výkon a škálovateľnosť. Stáva sa čoraz populárnejším a vyhliadky na prácu pre vývojárov TypeScript neustále rastú.

Úvod do Angular

Prečítajte si ďalej

O autorovi