TypeScript si razí cestu jako jeden z nejoblíbenějších programovacích jazyků pro moderní organizace.
TypeScript je zkompilovaný, přísně napsaný horní index JavaScriptu (vybudovaný nad jazykem JavaScript). Tento staticky typovaný jazyk, vyvinutý a spravovaný společností Microsoft, podporuje objektově orientované koncepty, jako je jeho podmnožina JavaScript.
Tento programovací jazyk s otevřeným zdrojovým kódem má mnoho případů použití, jako je vytváření webových, rozsáhlých a mobilních aplikací. TypeScript lze použít pro vývoj frontendu a backendu. Má také různé rámce a knihovny, které zjednodušují vývoj a rozšiřují jeho případy použití.
Proč používat TypeScript s Node.js? Tento článek pojednává o tom, proč je TypeScript považován za „lepší“ než JavaScript, jak jej nainstalovat pomocí Node.js, nakonfigurovat a vytvořit malý program pomocí TypeScript a Node.js.
Table of Contents
TypeScript s Node.js: Výhody
- Volitelné statické typování: JavaScript je zadáván dynamicky, což znamená, že datový typ proměnné se určuje za běhu, nikoli během kompilace. Na druhou stranu TypeScript nabízí volitelné statické psaní, což znamená, že jakmile proměnnou deklarujete, nezmění svůj typ a bude mít pouze určité hodnoty.
- Předvídatelnost: Při práci s TypeScriptem máte jistotu, že vše, co definujete, zůstane stejné. Pokud například deklarujete určitou proměnnou jako booleovskou, nikdy se nemůže během cesty změnit na řetězec. Jako vývojář máte jistotu, že vaše funkce zůstanou stejné.
- Snadné včasné odhalení chyb: TypeScript detekuje většinu typových chyb brzy, takže pravděpodobnost přechodu do produkce je nízká. To snižuje čas, který inženýři stráví testováním kódu v pozdějších fázích.
- Podporováno na většině IDE: TypeScript funguje s většinou integrovaných vývojových prostředí (IDE). Většina těchto IDE poskytuje dokončování kódu a zvýraznění syntaxe. Tento článek bude používat Visual Studio Code, další produkt společnosti Microsoft.
- Snadné refaktorování kódu: Svou aplikaci TypeScript můžete aktualizovat nebo refaktorovat, aniž byste změnili její chování. Přítomnost navigačních nástrojů a IDE porozumění vašemu kódu usnadňuje refaktorování kódové základny bez námahy.
- Využívá existující balíčky: Nemusíte vytvářet vše od začátku; můžete použít stávající balíčky NPM s TypeScriptem. Tento jazyk má také silnou komunitu, která udržuje a vytváří definice typů pro oblíbené balíčky.
Jak používat TypeScript s Node.js
Přestože má TypeScript tyto výhody, moderní prohlížeče nedokážou přečíst jeho kód v prosté formě. Proto musí být kód TypeScript nejprve transpilován do kódu JavaScript, aby jej bylo možné spustit v prohlížečích. Výsledný kód bude mít stejnou funkčnost jako původní kód TypeScript a další funkce nedostupné v JavaScriptu.
Předpoklady
- Node.js: Node je běhové prostředí pro více platforem, které umožňuje spouštění kódu JavaScript mimo prostředí prohlížeče. Pomocí tohoto příkazu můžete zkontrolovat, zda je uzel nainstalován na vašem počítači;
uzel -v
Jinak si můžete Node.js stáhnout z oficiálních stránek. Po instalaci spusťte znovu výše uvedený příkaz a zkontrolujte, zda byl správně nakonfigurován.
- A Node Package Manager: Můžete použít NPM nebo Yarn. První jmenovaný je standardně nainstalován při instalaci Node.js. V tomto článku použijeme NPM jako správce balíčků. Tento příkaz použijte ke kontrole jeho aktuální verze;
npm -v
Instalace TypeScript s Node.js
Krok 1: Nastavte složku projektu
Začneme vytvořením složky projektu pro projekt TypeScript. Této složce můžete dát libovolný název. Tyto příkazy můžete použít k zahájení;
mkdir typescript-uzel
cd typescript-node
Krok 2: Inicializujte projekt
Použijte npm k inicializaci projektu pomocí tohoto příkazu;
npm init -y
Výše uvedený příkaz vytvoří soubor package.json. Parametr -y v příkazu říká npm, aby zahrnul výchozí hodnoty. Vygenerovaný soubor bude mít podobný výstup.
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Konfigurace TypeScript s Node.js
Krok 1: Nainstalujte kompilátor TypeScript
Nyní můžete nainstalovat kompilátor TypeScript do svého projektu. Spusťte tento příkaz;
npm install –save-dev typescript
Výstup na vašem příkazovém řádku bude podobný tomuto;
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
Poznámka: Výše uvedený přístup nainstaluje TypeScript lokálně do složky projektu, na které pracujete. TypeScript můžete na svůj systém nainstalovat globálně, takže jej nemusíte instalovat pokaždé, když pracujete na projektu. Tento příkaz použijte pro globální instalaci TypeScript;
npm install -g typescript
Pomocí tohoto příkazu můžete zkontrolovat, zda byl TypeScript nainstalován;
tsc -v
Krok 2: Přidejte Ambient Node.js typy pro TypeScript
TypeScript má různé typy, jako je Implicitní, Explicitní a Ambientní. Okolní typy jsou vždy přidány do globálního rozsahu provádění. Tento příkaz použijte k přidání okolních typů;
npm install @types/node –save-dev
Krok 3: Vytvořte soubor tsconfig.json
Toto je konfigurační soubor, který specifikuje všechny možnosti kompilace TypeScript. Spusťte tento příkaz, který je dodáván s několika definovanými možnostmi kompilace;
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
Toto bude výstup na terminálu;
Bude vygenerován soubor tsconfig.json, který obsahuje některá výchozí nastavení a komentáře.
soubor tsconfig.json
Toto jsme nakonfigurovali:
- V rootDir bude TypeScript hledat náš kód. Přesměrovali jsme to do složky /src, kde zapíšeme náš kód.
- Složka outDir definuje, kam se umístí zkompilovaný kód. Takový kód je nakonfigurován tak, aby byl uložen ve složce build/.
Použití TypeScriptu s Node.js
Krok 1: Vytvořte složku src a soubor index.ts
Nyní máme základní konfiguraci. Nyní můžeme vytvořit jednoduchou aplikaci TypeScript a zkompilovat ji. Přípona souboru TypeScript je .ts. Spusťte tyto příkazy ve složce, kterou jsme vytvořili v předchozích krocích;
mkdir src
dotkněte se src/index.ts
Krok 2: Přidejte kód do souboru TypeScript (index.ts)
Můžete začít něčím jednoduchým jako;
console.log('Hello world!')
Krok 3: Kompilace kódu TypeScript do kódu JavaScript
Spusťte tento příkaz;
npx tsc
Můžete zkontrolovat složku sestavení (build/index.js) a uvidíte, že s tímto výstupem byl vygenerován index.js;
TypeScript byl zkompilován do kódu JavaScript.
Krok 4: Spusťte zkompilovaný kód JavaScript
Pamatujte, že kód TypeScript nelze spustit v prohlížečích. Spustíme tedy kód v index.js ve složce build. Spusťte tento příkaz;
node build/index.js
Toto bude výstup;
Krok 5: Nakonfigurujte TypeScript pro automatickou kompilaci do kódu JavaScript
Ruční kompilace kódu TypeScript při každé změně souborů TypeScript může ztrácet čas. Můžete nainstalovat ts-node (spouští kód TypeScript přímo bez čekání na kompilaci) a nodemon (kontroluje změny v kódu a automaticky restartuje server).
Spusťte tento příkaz;
npm install --save-dev ts-node nodemon
Poté můžete přejít do souboru package.json a přidat tento skript;
"scripts": {
"start": "ts-node ./src/index.ts"
}
Pro demonstrační účely můžeme použít nový blok kódu;
function sum (num1:number, num2:number, num3:number){
return num1 + num2 +num3;
}
console.log(sum(10,15,30))
Smažte soubor index.js (/build/index.js) a spusťte npm start.
Váš výstup bude podobný tomuto;
součet 3 čísel
Nakonfigurujte Lining TypeScript pomocí eslint
Krok 1: Nainstalujte eslint
Lining může být užitečný, pokud chcete zachovat konzistenci kódu a zachytit chyby před spuštěním. Nainstalujte eslint pomocí tohoto příkazu;
npm install --save-dev eslint
Krok 2: Inicializujte eslint
Pomocí tohoto příkazu můžete inicializovat eslint;
npx eslint --init
Proces inicializace vás provede několika kroky. Použijte následující snímek obrazovky, který vás provede;
Jakmile proces skončí, uvidíte soubor s názvem .eslintrc.js s obsahem podobným tomuto;
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
Krok 3: Spusťte eslint
Spuštěním tohoto příkazu zkontrolujete a zprovozníte všechny soubory s příponou .ts;
npx eslint . --ext .ts
Krok 4: Aktualizujte soubor package.json
Přidejte k tomuto souboru skript lint pro automatické lintování.
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript s Node.js: Doporučené postupy
- Udržujte TypeScript aktuální: Vývojáři TypeScript vždy vydávají nové verze. Ujistěte se, že máte na svém počítači/složce projektu nainstalovanou nejnovější verzi a těžte z nových funkcí a oprav chyb.
- Povolit přísný režim: Běžné programovací chyby můžete zachytit v době kompilace, když v souboru tsconfig.json povolíte přísný režim. To zkrátí dobu ladění, což povede k vyšší produktivitě.
- Povolit přísné kontroly null: Všechny null a nedefinované chyby můžete zachytit v době kompilace povolením přísných null kontrol v souboru tsconfig.json.
- Použijte editor kódu, který podporuje TypeScript: Existuje spousta editorů kódu. Osvědčeným postupem je vybrat editory kódu, jako je VS Code, Sublime Text nebo Atom, které podporují TypeScript prostřednictvím zásuvných modulů.
- Použití typů a rozhraní: Pomocí typů a rozhraní můžete definovat vlastní typy, které můžete znovu použít v celém projektu. Takový přístup učiní váš kód modulárnějším a snadno se udržuje.
Zabalit se
Nyní máte základní strukturu aplikace vytvořenou pomocí TypeScript na Node.js. Nyní můžete používat běžné balíčky Node.js, ale přesto napište svůj kód v TypeScriptu a užijte si všechny další funkce, které s ním přicházejí.
Pokud s TypeScriptem teprve začínáte, ujistěte se, že rozumíte rozdílům mezi TypeScriptem a JavaScriptem.