Dynamiczny duet do tworzenia stron internetowych

TypeScript zyskuje coraz większą popularność wśród współczesnych organizacji jako preferowany język programowania.

TypeScript, będący rozszerzeniem JavaScript z silnym typowaniem, opiera się na fundamentach JavaScript. Stworzony i rozwijany przez Microsoft, ten statycznie typowany język wspiera paradygmaty obiektowe, podobnie jak jego protoplasta – JavaScript.

Ten otwartoźródłowy język programowania znajduje zastosowanie w rozmaitych obszarach, w tym w tworzeniu aplikacji webowych, rozbudowanych systemów i aplikacji mobilnych. TypeScript sprawdza się zarówno w warstwie front-end, jak i back-end. Dysponuje również szeroką gamą frameworków i bibliotek, które usprawniają proces programowania i poszerzają zakres jego zastosowań.

Dlaczego warto wybrać TypeScript w połączeniu z Node.js? W tym artykule przyjrzymy się, dlaczego TypeScript jest często postrzegany jako „lepszy” wybór niż JavaScript, jak go zainstalować za pomocą Node.js, jak go skonfigurować i jak stworzyć prosty program z wykorzystaniem TypeScript i Node.js.

TypeScript i Node.js: Zalety

• Opcjonalne typowanie statyczne: JavaScript, jako język dynamicznie typowany, ustala typ zmiennej w trakcie wykonywania, a nie w procesie kompilacji. TypeScript oferuje opcjonalne typowanie statyczne, co oznacza, że typ zmiennej, raz zdefiniowany, nie ulegnie zmianie i przyjmie tylko wartości zgodne z tym typem.
• Przewidywalność działania: Używając TypeScript, możemy być pewni, że elementy, które definiujemy, zachowają swój charakter. Na przykład, jeśli określimy zmienną jako boolean, nie zmieni się ona w trakcie działania programu na string. Jako programiści, mamy gwarancję, że nasze funkcje będą działać w przewidywalny sposób.
• Szybkie wykrywanie błędów: TypeScript pozwala na wczesne wychwytywanie większości błędów literówek, co zmniejsza ryzyko ich wystąpienia w środowisku produkcyjnym. Dzięki temu inżynierowie poświęcają mniej czasu na testowanie kodu na późniejszych etapach.
• Wsparcie w większości IDE: TypeScript współpracuje z większością zintegrowanych środowisk programistycznych (IDE). Wiele z nich oferuje funkcje automatycznego uzupełniania kodu i podświetlania składni. W tym artykule użyjemy Visual Studio Code, innego produktu firmy Microsoft.
• Łatwa refaktoryzacja kodu: Aplikacje napisane w TypeScript można modyfikować i refaktoryzować bez obawy o zmianę ich działania. Dostępność narzędzi do nawigacji i inteligentnych IDE znacznie upraszcza proces refaktoryzacji.
• Wykorzystanie istniejących pakietów: Nie ma konieczności tworzenia wszystkiego od zera. Można z powodzeniem korzystać z istniejących pakietów NPM w projektach TypeScript. Ponadto, prężna społeczność tworzy i utrzymuje definicje typów dla popularnych pakietów, co dodatkowo ułatwia pracę.

Jak wykorzystać TypeScript w Node.js

Mimo licznych zalet TypeScript, przeglądarki internetowe nie są w stanie natywnie interpretować jego kodu. Z tego powodu, kod TypeScript musi przejść proces transpilacji do JavaScript, aby mógł być uruchomiony w przeglądarkach. Wynikowy kod będzie miał te same funkcjonalności co oryginalny kod TypeScript, a także może zawierać dodatkowe elementy, których nie ma w czystym JavaScript.

Wymagania wstępne

• Node.js: Node.js to środowisko uruchomieniowe działające na różnych platformach, które pozwala wykonywać kod JavaScript poza środowiskiem przeglądarki. Możesz sprawdzić, czy Node.js jest zainstalowany, używając polecenia:

node -v

Jeśli nie, możesz pobrać Node.js z oficjalnej strony. Po instalacji, uruchom polecenie ponownie, aby upewnić się, że konfiguracja przebiegła pomyślnie.

• Menedżer pakietów Node: Możesz użyć NPM lub Yarn. NPM jest instalowany domyślnie razem z Node.js. W tym artykule będziemy korzystać z NPM. Aby sprawdzić jego wersję, użyj polecenia:

npm -v

Instalacja TypeScript z Node.js

Krok 1: Przygotowanie folderu projektu

Zaczynamy od stworzenia folderu, w którym będzie umieszczony nasz projekt TypeScript. Możesz nadać mu dowolną nazwę. Użyj tych poleceń:

mkdir typescript-node

cd typescript-node

Krok 2: Inicjalizacja projektu

Użyj npm, aby zainicjować projekt za pomocą polecenia:

npm init -y

Powyższe polecenie utworzy plik package.json. Flaga -y nakazuje npm przyjęcie wartości domyślnych. Wygenerowany plik powinien mieć podobną strukturę do poniższego:

{
  "name": "typescript-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Konfiguracja TypeScript z Node.js

Krok 1: Instalacja kompilatora TypeScript

Teraz możesz zainstalować kompilator TypeScript w swoim projekcie. Uruchom to polecenie:

npm install –save-dev typescript

W konsoli zobaczysz komunikat podobny do tego:

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

Uwaga: Powyższa metoda instaluje TypeScript lokalnie w folderze projektu. Możesz również zainstalować TypeScript globalnie w systemie, unikając konieczności jego ponownej instalacji przy każdym nowym projekcie. Użyj polecenia:

npm install -g typescript

Aby sprawdzić, czy TypeScript został poprawnie zainstalowany, użyj polecenia:

tsc -v

Krok 2: Dodanie deklaracji typów Node.js dla TypeScript

TypeScript rozróżnia różne rodzaje typów: Implicit, Explicit i Ambient. Deklaracje typów otoczenia zawsze są dodawane do globalnego zakresu. Użyj tego polecenia, aby dodać deklaracje typów:

npm install @types/node –save-dev

Krok 3: Utworzenie pliku tsconfig.json

Jest to plik konfiguracyjny, w którym definiujemy opcje kompilacji TypeScript. Uruchom to polecenie, które zawiera szereg predefiniowanych opcji:

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

Na terminalu zobaczysz komunikat:

Zostanie wygenerowany plik tsconfig.json, który zawiera domyślne wartości i komentarze.

Oto, co skonfigurowaliśmy:

• rootDir wskazuje lokalizację, w której TypeScript będzie szukać kodu. Ustawiliśmy ją na folder /src, w którym będziemy pisać nasz kod.
• outDir określa, gdzie zostanie zapisany skompilowany kod. W tym przypadku ustawiliśmy go na folder build/.

Używanie TypeScript z Node.js

Krok 1: Utworzenie folderu src i pliku index.ts

Mając gotową podstawową konfigurację, możemy przystąpić do napisania prostej aplikacji TypeScript i skompilowania jej. Pliki TypeScript mają rozszerzenie .ts. Uruchom te polecenia w folderze, który utworzyliśmy we wcześniejszych krokach:

mkdir src

touch src/index.ts

Krok 2: Dodanie kodu do pliku TypeScript (index.ts)

Możesz zacząć od prostego przykładu:

console.log('Hello world!')

Krok 3: Kompilacja kodu TypeScript do JavaScript

Uruchom polecenie:

npx tsc

Sprawdź folder kompilacji (build/index.js), w którym powinien znajdować się wygenerowany plik index.js, zawierający skompilowany kod:

TypeScript został pomyślnie skompilowany do JavaScript.

Krok 4: Uruchomienie skompilowanego kodu JavaScript

Pamiętaj, że kod TypeScript nie jest bezpośrednio wykonywalny w przeglądarkach. Uruchomimy więc kod w pliku index.js znajdującym się w folderze build. Użyj polecenia:

node build/index.js

Otrzymasz następujący wynik:

Krok 5: Konfiguracja automatycznej kompilacji TypeScript do JavaScript

Ręczne kompilowanie kodu TypeScript za każdym razem, gdy wprowadzimy zmiany, może być uciążliwe. Możemy zainstalować ts-node (który umożliwia bezpośrednie uruchamianie kodu TypeScript bez kompilacji) i nodemon (który monitoruje zmiany w kodzie i automatycznie restartuje serwer).

Uruchom polecenie:

npm install --save-dev ts-node nodemon

Następnie dodaj skrypt start w pliku package.json:

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

Użyjmy teraz nowego fragmentu kodu do demonstracji:

function sum (num1:number, num2:number, num3:number){
    return num1 + num2 +num3;
}
console.log(sum(10,15,30))

Usuń plik index.js (/build/index.js) i uruchom npm start.

Otrzymasz wynik podobny do tego:

suma 3 liczb

Konfiguracja lintingu TypeScript za pomocą ESLint

Krok 1: Instalacja ESLint

Linting jest przydatny do utrzymania spójności kodu i wykrywania potencjalnych błędów przed uruchomieniem aplikacji. Zainstaluj ESLint za pomocą polecenia:

npm install --save-dev eslint

Krok 2: Inicjalizacja ESLint

Możesz zainicjować ESLint za pomocą polecenia:

npx eslint --init

Proces inicjalizacji przeprowadzi cię przez kilka kroków. Skorzystaj z poniższego zrzutu ekranu, aby pomóc sobie w tym procesie:

Po zakończeniu zobaczysz plik o nazwie .eslintrc.js o zawartości podobnej do poniższej:

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

Krok 3: Uruchomienie ESLint

Uruchom to polecenie, aby przeanalizować wszystkie pliki z rozszerzeniem .ts:

npx eslint . --ext .ts

Krok 4: Aktualizacja pliku package.json

Dodaj skrypt lint do tego pliku, aby automatyzować proces lintingu:

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

TypeScript z Node.js: Dobre praktyki

• Aktualizuj TypeScript: Twórcy TypeScript regularnie wydają nowe wersje. Upewnij się, że korzystasz z najnowszej wersji w swoim projekcie, aby móc korzystać z nowych funkcji i poprawek.
• Włącz tryb ścisły: Włączenie trybu ścisłego w pliku tsconfig.json pomaga w wykrywaniu wielu błędów programistycznych już na etapie kompilacji, co skraca czas debugowania i zwiększa produktywność.
• Włącz ścisłe sprawdzanie null: Włączając ścisłe sprawdzanie null w pliku tsconfig.json, można wykryć błędy związane z wartościami null i undefined już na etapie kompilacji.
• Używaj edytora kodu wspierającego TypeScript: Dostępnych jest wiele edytorów kodu. Wybierz edytor (np. VS Code, Sublime Text czy Atom), który oferuje dobre wsparcie dla TypeScript, np. poprzez dedykowane wtyczki.
• Wykorzystuj typy i interfejsy: Typy i interfejsy pozwalają na definiowanie niestandardowych typów, które można wielokrotnie wykorzystywać w projekcie. Dzięki temu kod staje się bardziej modułowy i łatwiejszy w utrzymaniu.

Podsumowanie

Masz teraz podstawową strukturę aplikacji napisanej w TypeScript z użyciem Node.js. Możesz teraz korzystać z standardowych pakietów Node.js, jednocześnie pisząc kod w TypeScript i ciesząc się dodatkowymi funkcjonalnościami tego języka.

Jeśli dopiero zaczynasz przygodę z TypeScript, upewnij się, że rozumiesz różnice między TypeScript a JavaScript.