Dynamické duo pro Web Dev

autor:
Tweet
Share
Share
Pin

TypeScript se stává stále populárnějším programovacím jazykem v moderních firmách.

Je to kompilovaný, striktně typovaný nadstavbový jazyk JavaScriptu (postavený na JavaScriptu). Tento staticky typovaný jazyk, vyvinutý a spravovaný společností Microsoft, podporuje objektově orientované programování, podobně jako jeho základní jazyk JavaScript.

Tento open-source jazyk má široké využití, od vytváření webových aplikací po rozsáhlé a mobilní aplikace. TypeScript je vhodný pro vývoj frontendu i backendu. Nabízí také řadu frameworků a knihoven, které usnadňují vývoj a rozšiřují jeho možnosti použití.

Proč byste měli používat TypeScript s Node.js? Tento článek se zabývá tím, proč je TypeScript považován za „lepší“ než JavaScript, jak jej nainstalovat s Node.js, jak ho nakonfigurovat a jak vytvořit jednoduchý program s TypeScriptem a Node.js.

TypeScript s Node.js: Přednosti

  • Volitelné statické typování: JavaScript je dynamicky typovaný, což znamená, že typ proměnné se určuje za běhu, nikoli při kompilaci. TypeScript nabízí volitelné statické typování, kde typ proměnné je určen při deklaraci a nelze jej později změnit.
  • Předvídatelnost: S TypeScriptem si můžete být jisti, že definované typy proměnných zůstanou konzistentní. Například, pokud deklarujete proměnnou jako booleovskou, nemůže se později změnit na řetězec. Tato stabilita se vztahuje i na definice funkcí.
  • Včasné odhalování chyb: TypeScript dokáže detekovat většinu chyb souvisejících s typy již v rané fázi vývoje. Tím se snižuje pravděpodobnost, že se tyto chyby dostanou do produkčního prostředí, což šetří čas vývojářů při testování kódu.
  • Podpora v mnoha IDE: TypeScript je kompatibilní s většinou moderních vývojových prostředí (IDE). Tyto IDE poskytují automatické doplňování kódu a zvýrazňování syntaxe. V tomto článku budeme používat Visual Studio Code, další produkt od společnosti Microsoft.
  • Snadný refaktoring kódu: Aplikace napsané v TypeScriptu lze bez problémů aktualizovat a refaktorovat, aniž by to narušilo jejich funkčnost. Nástroje pro navigaci a porozumění kódu v IDE usnadňují refaktorování kódu.
  • Využití existujících balíčků: Nemusíte začínat od nuly, můžete využít stávající balíčky NPM s TypeScriptem. TypeScript má silnou komunitu, která spravuje a vytváří definice typů pro populární balíčky.

Jak používat TypeScript s Node.js

Přestože má TypeScript mnoho výhod, moderní prohlížeče neumí jeho kód interpretovat přímo. Proto je nutné kód TypeScript nejprve přeložit do JavaScriptu, 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, ale s dalšími funkcemi, které nejsou v JavaScriptu dostupné.

Předpoklady

  • Node.js: Node.js je běhové prostředí pro více platforem, které umožňuje spouštění JavaScript kódu mimo prostředí prohlížeče. Pomocí následujícího příkazu můžete ověřit, zda je Node.js nainstalován na vašem počítači:

node -v

Pokud Node.js nemáte, stáhněte si jej z oficiálních stránek. Po instalaci znovu spusťte výše uvedený příkaz a ověřte, zda je vše správně nastaveno.

  • Node Package Manager: Můžete použít NPM nebo Yarn. NPM je standardně nainstalován s Node.js. V tomto článku budeme používat NPM jako správce balíčků. Zkontrolujte jeho verzi pomocí příkazu:

npm -v

Instalace TypeScript s Node.js

Krok 1: Vytvoření složky projektu

Začneme vytvořením složky pro náš projekt. Můžete si ji pojmenovat libovolně. K vytvoření složky a přechodu do ní použijte tyto příkazy:

mkdir typescript-node

cd typescript-node

Krok 2: Inicializace projektu

Inicializujte projekt pomocí npm s tímto příkazem:

npm init -y

Tento příkaz vytvoří soubor package.json. Parametr -y zajistí, že se použijí výchozí hodnoty. Vygenerovaný soubor bude vypadat podobně jako níže:

{
  "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: Instalace kompilátoru TypeScript

Nyní můžete nainstalovat kompilátor TypeScript do svého projektu. Spusťte tento příkaz:

npm install --save-dev typescript

Výstup ve vašem terminálu bude vypadat přibližně takto:

added 1 package, and audited 2 packages in 26s
found 0 vulnerabilities

Poznámka: TypeScript se nainstaluje lokálně do složky projektu. Můžete ho nainstalovat i globálně, abyste ho nemuseli instalovat pro každý projekt zvlášť. Pro globální instalaci použijte tento příkaz:

npm install -g typescript

Ověřte, zda je TypeScript nainstalován, tímto příkazem:

tsc -v

Krok 2: Přidání definic typů pro Node.js

TypeScript nabízí různé typy, například implicitní, explicitní a ambientní. Ambientní typy se přidávají do globálního rozsahu. Přidejte definice typů pro Node.js pomocí tohoto příkazu:

npm install @types/node --save-dev

Krok 3: Vytvoření souboru tsconfig.json

Soubor tsconfig.json obsahuje nastavení kompilátoru TypeScript. Vytvořte ho pomocí tohoto příkazu, který obsahuje výchozí volby:

npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true

V terminálu byste měli vidět zprávu o vygenerování souboru tsconfig.json s výchozím nastavením a komentáři.

Nastavili jsme:

  • rootDir: Určuje, kde bude TypeScript hledat zdrojový kód. V tomto případě je to složka /src.
  • outDir: Určuje, kam se uloží zkompilovaný kód. V tomto případě je to složka build/.

Použití TypeScript s Node.js

Krok 1: Vytvoření složky src a souboru index.ts

Máme základní konfiguraci. Nyní můžeme vytvořit jednoduchou TypeScript aplikaci a zkompilovat ji. Soubory TypeScript mají příponu .ts. Vytvořte složku a soubor pomocí těchto příkazů:

mkdir src

touch src/index.ts

Krok 2: Přidání kódu do index.ts

Můžete začít s jednoduchým kódem:

console.log('Ahoj světe!')

Krok 3: Kompilace kódu TypeScript do JavaScriptu

Spusťte příkaz:

npx tsc

Ve složce build/ by se měl objevit soubor index.js:

Kód TypeScript byl přeložen do JavaScriptu.

Krok 4: Spuštění zkompilovaného kódu JavaScript

Kód TypeScript nelze spustit přímo v prohlížeči. Spustíme proto kód index.js ve složce build/:

node build/index.js

Výstup by měl vypadat takto:

Krok 5: Automatická kompilace kódu TypeScript

Manuální kompilace kódu při každé změně v souborech může být časově náročná. Můžete si nainstalovat ts-node (spouští kód TypeScript přímo bez nutnosti kompilace) a nodemon (sleduje změny v kódu a automaticky restartuje server).

Spusťte tento příkaz:

npm install --save-dev ts-node nodemon

Poté přidejte do souboru package.json tento skript:

"scripts": {
  "start": "ts-node ./src/index.ts"
}

Jako příklad 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ýstup by měl vypadat takto:

Součet 3 čísel

Nastavení lintování TypeScript s ESLint

Krok 1: Instalace ESLint

Lintování kódu je užitečné pro udržování konzistence a pro včasné odhalování chyb. Nainstalujte ESLint tímto příkazem:

npm install --save-dev eslint

Krok 2: Inicializace ESLint

Inicializujte ESLint s příkazem:

npx eslint --init

Průvodce inicializací vás provede několika kroky. Použijte následující obrázek jako nápovědu:

Po dokončení procesu se vytvoří soubor .eslintrc.js s obsahem podobným tomuhle:

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: 'standard-with-typescript',
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
  }
};

Krok 3: Spuštění ESLint

Zkontrolujte všechny soubory s příponou .ts pomocí příkazu:

npx eslint . --ext .ts

Krok 4: Aktualizace souboru package.json

Přidejte do souboru skript pro automatické lintování:

"scripts": {
  "lint": "eslint . --ext .ts",
},

TypeScript s Node.js: Doporučené postupy

  • Aktualizujte TypeScript: Vývojáři TypeScript pravidelně vydávají nové verze. Ujistěte se, že máte nainstalovanou nejnovější verzi, abyste mohli využívat nové funkce a opravy chyb.
  • Povolte striktní režim: V souboru tsconfig.json povolte striktní režim. To vám pomůže odhalit časté chyby již při kompilaci, což ušetří čas při ladění a zvýší produktivitu.
  • Povolte striktní kontroly null: Povolte striktní kontroly null v souboru tsconfig.json, abyste zachytili chyby související s null a undefined již při kompilaci.
  • Používejte IDE s podporou TypeScript: Vybírejte IDE s podporou TypeScript, jako jsou VS Code, Sublime Text nebo Atom, které poskytují pokročilé funkce a usnadňují vývoj.
  • Používejte typy a rozhraní: Definujte vlastní typy a rozhraní pro opakované použití v celém projektu. Tím získáte modulárnější a lépe udržovatelný kód.

Závěrem

Nyní máte vytvořenou základní strukturu aplikace s využitím TypeScriptu na Node.js. Můžete používat běžné balíčky Node.js a zároveň psát kód v TypeScriptu a využívat jeho výhod.

Pokud s TypeScriptem teprve začínáte, ujistěte se, že rozumíte rozdílům mezi TypeScriptem a JavaScriptem.