A TypeScript az egyik legnépszerűbb programozási nyelv a modern szervezetek számára.
A TypeScript egy lefordított, szigorúan begépelt JavaScript felső index (a JavaScript nyelvre épül). Ez a statikusan beírt nyelv, amelyet a Microsoft fejlesztett és karbantart, támogatja az objektum-orientált fogalmakat, például annak részhalmazát, a JavaScriptet.
Ennek a nyílt forráskódú programozási nyelvnek számos felhasználási módja van, például webes, nagyméretű és mobilalkalmazások létrehozása. A TypeScript használható frontend és backend fejlesztéshez. Különféle keretrendszerekkel és könyvtárakkal is rendelkezik, amelyek leegyszerűsítik a fejlesztést és kiterjesztik a felhasználási eseteket.
Miért érdemes TypeScriptet használni a Node.js-szel? Ez a cikk megvitatja, hogy a TypeScript miért tekinthető „jobbnak”, mint a JavaScript, hogyan kell telepíteni a Node.js használatával, konfigurálni és létrehozni egy kis programot a TypeScript és Node.js használatával.
Tartalomjegyzék
TypeScript Node.js-szel: Előnyök
- Opcionális statikus gépelés: A JavaScript dinamikusan van beírva, ami azt jelenti, hogy a változó adattípusát a rendszer futási időben határozza meg, nem pedig fordítási időben. Másrészt a TypeScript opcionális statikus gépelést is kínál, ami azt jelenti, hogy ha egyszer deklarál egy változót, az nem változtatja meg a típusát, és csak bizonyos értékeket vesz fel.
- Kiszámíthatóság: A TypeScript használatakor garantált, hogy minden, amit definiál, változatlan marad. Például, ha egy bizonyos változót logikai értéknek deklarál, az soha nem változhat karakterláncsá. Fejlesztőként biztos lehet benne, hogy funkciói változatlanok maradnak.
- Könnyen korán észrevehető a hibák: a TypeScript korán észleli a legtöbb típushibát, így kicsi annak a valószínűsége, hogy élesre kerüljenek. Ez csökkenti azt az időt, amelyet a mérnökök a kód tesztelésével töltenek a későbbi szakaszokban.
- A legtöbb IDE-n támogatott: A TypeScript a legtöbb integrált fejlesztői környezettel (IDE) működik. A legtöbb ilyen IDE kódkiegészítést és szintaxiskiemelést biztosít. Ez a cikk egy másik Microsoft-terméket, a Visual Studio Code-ot fogja használni.
- Könnyen átdolgozható kód: A TypeScript-alkalmazást anélkül frissítheti vagy alakíthatja át, hogy megváltoztatná a viselkedését. A navigációs eszközök jelenléte és a kódot megértő IDE megkönnyíti a kódbázis könnyed újrahasznosítását.
- Használja a meglévő csomagokat: Nem kell mindent a semmiből létrehoznia; használhatja a meglévő NPM-csomagokat a TypeScript-szel. Ennek a nyelvnek is van egy erős közössége, amely karbantartja és típusdefiníciókat készít a népszerű csomagokhoz.
A TypeScript használata a Node.js-szel
Annak ellenére, hogy a TypeScript rendelkezik ezekkel az előnyökkel, a modern böngészők nem tudják beolvasni a kódját egyszerű formában. Ezért a TypeScript-kódot először JavaScript-kódba kell átültetni a böngészőkben való futtatáshoz. Az eredményül kapott kód ugyanazokkal a funkciókkal fog rendelkezni, mint az eredeti TypeScript-kód, és további funkciók, amelyek nem érhetők el a JavaScriptben.
Előfeltételek
- Node.js: A Node egy többplatformos futásidejű környezet, amely lehetővé teszi JavaScript-kód futtatását böngészőkörnyezeten kívül. Ezzel a paranccsal ellenőrizheti, hogy a csomópont telepítve van-e a gépen;
csomópont -v
Ellenkező esetben letöltheti a Node.js fájlt a hivatalos webhelyről. A telepítés után futtassa újra a fenti parancsot, hogy ellenőrizze, jól van-e konfigurálva.
- Csomópont-csomagkezelő: NPM-et vagy fonalat használhat. Az előbbi alapértelmezés szerint a Node.js telepítésekor kerül telepítésre. Ebben a cikkben az NPM-et csomagkezelőként fogjuk használni. Ezzel a paranccsal ellenőrizheti az aktuális verziót;
npm -v
TypeScript telepítése a Node.js segítségével
1. lépés: Állítson be egy projektmappát
Kezdjük azzal, hogy létrehozunk egy projektmappát a TypeScript projekt számára. Ennek a mappának tetszőleges nevet adhatsz. A kezdéshez használhatja ezeket a parancsokat;
mkdir typescript-node
cd typescript-node
2. lépés: Inicializálja a projektet
Az npm segítségével inicializálja a projektet ezzel a paranccsal;
npm init -y
A fenti parancs egy package.json fájlt hoz létre. A parancs -y jelzője azt mondja, hogy az npm tartalmazza az alapértelmezett értékeket. A létrehozott fájlnak hasonló kimenete lesz.
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
A TypeScript konfigurálása a Node.js segítségével
1. lépés: Telepítse a TypeScript fordítót
Most már telepítheti a TypeScript fordítót a projektjére. Futtassa ezt a parancsot;
npm install –save-dev gépirat
A parancssor kimenete ehhez hasonló lesz;
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
Megjegyzés: A fenti megközelítés helyileg telepíti a TypeScript-et a projekt mappájába, amelyen dolgozik. A TypeScriptet globálisan telepítheti a rendszerére, így nem kell minden alkalommal telepítenie, amikor egy projekten dolgozik. Használja ezt a parancsot a TypeScript globális telepítéséhez;
npm install -g typescript
Ezzel a paranccsal ellenőrizheti, hogy a TypeScript telepítve van-e;
tsc -v
2. lépés: Adja hozzá az Ambient Node.js típusokat a TypeScripthez
A TypeScript különböző típusokkal rendelkezik, például implicit, explicit és ambient. A környezeti típusok mindig hozzáadódnak a globális végrehajtási hatókörhöz. Ezzel a paranccsal környezeti típusokat adhat hozzá;
npm install @types/node –save-dev
3. lépés: Hozzon létre egy tsconfig.json fájlt
Ez az a konfigurációs fájl, amely megadja a TypeScript összes fordítási beállítását. Futtassa ezt a parancsot, amely több definiált fordítási beállítást tartalmaz;
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
Ez megjelenik a terminálon;
A rendszer létrehozza a tsconfig.json fájlt, amely néhány alapértelmezést és megjegyzést tartalmaz.
tsconfig.json fájlt
Ezt konfiguráltuk:
- A gyökérkönyvtárban a TypeScript megkeresi a kódunkat. Átirányítottuk a /src mappába, ahol megírjuk a kódunkat.
- Az outDir mappa határozza meg, hová kerüljön a lefordított kód. Az ilyen kód úgy van beállítva, hogy a build/ mappában kerüljön tárolásra.
TypeScript használata Node.js-szel
1. lépés: Hozzon létre src mappát és index.ts fájlt
Most megvan az alapkonfiguráció. Most már létrehozhatunk egy egyszerű TypeScript alkalmazást és lefordíthatjuk. A TypeScript-fájlok kiterjesztése .ts. Futtassa ezeket a parancsokat az előző lépésekben létrehozott mappában;
mkdir src
érintse meg az src/index.ts elemet
2. lépés: Kód hozzáadása a TypeScript fájlhoz (index.ts)
Kezdheti valami egyszerűvel, például;
console.log('Hello world!')
3. lépés: Fordítsa le a TypeScript kódot JavaScript kódra
Futtassa ezt a parancsot;
npx tsc
Ellenőrizheti az összeállítási mappát (build/index.js), és látni fogja, hogy ezzel a kimenettel egy index.js-t generált;
A TypeScriptet JavaScript kódba fordították.
4. lépés: Futtassa a lefordított JavaScript kódot
Ne feledje, hogy a TypeScript kód nem futhat böngészőben. Így a kódot az index.js fájlban futtatjuk a build mappában. Futtassa ezt a parancsot;
node build/index.js
Ez lesz a kimenet;
5. lépés: Állítsa be a TypeScript-et a JavaScript kódra való automatikus fordításra
A TypeScript-kód manuális fordítása, amikor módosítja a TypeScript-fájlokat, időt veszíthet. Telepítheti a ts-node-ot (közvetlenül futtatja a TypeScript kódot, anélkül, hogy megvárná a fordítást) és a nodemont (ellenőrzi a kód változásait, és automatikusan újraindítja a kiszolgálót).
Futtassa ezt a parancsot;
npm install --save-dev ts-node nodemon
Ezután a package.json fájlhoz léphet, és hozzáadhatja ezt a szkriptet;
"scripts": {
"start": "ts-node ./src/index.ts"
}
Egy új kódblokkot használhatunk demonstrációs célokra;
function sum (num1:number, num2:number, num3:number){
return num1 + num2 +num3;
}
console.log(sum(10,15,30))
Törölje az index.js fájlt (/build/index.js), és futtassa az npm start parancsot.
A kimenet hasonló lesz ehhez;
3 szám összege
A TypeScript Linting konfigurálása eslint segítségével
1. lépés: Telepítse az eslint-et
A vonalvezetés akkor lehet hasznos, ha meg akarja őrizni a kód konzisztenciáját, és még a futási idő előtt szeretné elkapni a hibákat. Telepítse az eslint-et ezzel a paranccsal;
npm install --save-dev eslint
2. lépés: Az eslint inicializálása
Ezzel a paranccsal inicializálhatja az eslint-et;
npx eslint --init
Az inicializálási folyamat több lépésen keresztül vezet. Használja a következő képernyőképet, amely végigvezeti Önt;
A folyamat befejeztével megjelenik egy .eslintrc.js nevű fájl ehhez hasonló tartalommal;
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
3. lépés: Futtassa az eslint-et
Futtassa ezt a parancsot az összes .ts kiterjesztésű fájl ellenőrzéséhez és összefűzéséhez;
npx eslint . --ext .ts
4. lépés: Frissítse a package.json fájlt
Adjon hozzá egy lint szkriptet ehhez a fájlhoz az automatikus lintinghez.
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript Node.js-szel: bevált módszerek
- Tartsa naprakészen a TypeScriptet: A TypeScript-fejlesztők mindig új verziókat adnak ki. Győződjön meg róla, hogy a legújabb verzió telepítve van a gépen/projekt mappában, és élvezze az új funkciókat és hibajavításokat.
- Szigorú mód engedélyezése: A gyakori programozási hibákat fordításkor észlelheti, ha engedélyezi a szigorú módot a tsconfig.json fájlban. Ez csökkenti a hibakeresési időt, ami nagyobb termelékenységet eredményez.
- Szigorú null-ellenőrzés engedélyezése: A tsconfig.json fájl szigorú null-ellenőrzésének engedélyezésével az összes null és meghatározatlan hibát elkaphatja a fordítási időben.
- Használjon TypeScriptet támogató kódszerkesztőt: Rengeteg kódszerkesztő létezik. Jó gyakorlat olyan kódszerkesztők kiválasztása, mint például a VS Code, a Sublime Text vagy az Atom, amelyek bővítményeken keresztül támogatják a TypeScriptet.
- Típusok és interfészek használata: A típusok és interfészek segítségével egyéni típusokat határozhat meg, amelyeket újra felhasználhat a teljes projektben. Egy ilyen megközelítés modulárisabbá és könnyen karbantarthatóbbá teszi a kódot.
Becsomagolás
Mostantól megvan a Node.js-en a TypeScript segítségével létrehozott alkalmazás alapstruktúrája. Mostantól használhatja a szokásos Node.js csomagokat, de írja be a kódját TypeScript-be, és élvezze az utóbbival járó összes extra funkciót.
Ha most kezdi a TypeScript használatát, győződjön meg arról, hogy megértette a TypeScript és a JavaScript közötti különbségeket.