TypeScript toruje sobie drogę jako jeden z najpopularniejszych języków programowania dla nowoczesnych organizacji.
TypeScript to skompilowany indeks górny JavaScript o ściśle określonym typie (zbudowany na bazie języka JavaScript). Ten statycznie typowany język, opracowany i utrzymywany przez firmę Microsoft, obsługuje koncepcje zorientowane obiektowo, takie jak jego podzbiór, JavaScript.
Ten język programowania typu open source ma wiele zastosowań, takich jak tworzenie aplikacji internetowych, aplikacji na dużą skalę i aplikacji mobilnych. TypeScript może być używany do tworzenia frontendu i backendu. Posiada również różne frameworki i biblioteki, które upraszczają programowanie i rozszerzają przypadki użycia.
Dlaczego warto używać TypeScript z Node.js? W tym artykule omówimy, dlaczego TypeScript jest uważany za „lepszy” niż JavaScript, jak go zainstalować za pomocą Node.js, skonfigurować i stworzyć mały program za pomocą TypeScript i Node.js.
Spis treści:
TypeScript z Node.js: Korzyści
- Opcjonalne typowanie statyczne: JavaScript jest pisany dynamicznie, co oznacza, że typ danych zmiennej jest określany w czasie wykonywania, a nie w czasie kompilacji. Z drugiej strony TypeScript oferuje opcjonalne typowanie statyczne, co oznacza, że raz zadeklarowana zmienna nie zmieni swojego typu i przyjmie tylko określone wartości.
- Przewidywalność: gdy masz do czynienia z TypeScript, masz pewność, że wszystko, co zdefiniujesz, pozostanie takie samo. Na przykład, jeśli zadeklarujesz określoną zmienną jako wartość logiczną, nigdy nie zmieni się ona po drodze w ciąg znaków. Jako programista masz pewność, że Twoje funkcje pozostaną takie same.
- Łatwe wczesne wykrywanie błędów: TypeScript wcześnie wykrywa większość błędów tekstowych, więc prawdopodobieństwo ich przeniesienia do produkcji jest niskie. Skraca to czas, jaki inżynierowie spędzają na testowaniu kodu na późniejszych etapach.
- Obsługiwane w większości środowisk IDE: TypeScript współpracuje z większością zintegrowanych środowisk programistycznych (IDE). Większość tych IDE zapewnia uzupełnianie kodu i podświetlanie składni. W tym artykule będzie używany Visual Studio Code, inny produkt firmy Microsoft.
- Łatwa refaktoryzacja kodu: Możesz aktualizować lub refaktoryzować swoją aplikację TypeScript bez zmiany jej zachowania. Obecność narzędzi nawigacyjnych i IDE rozumiejącego Twój kod ułatwia bezproblemową refaktoryzację bazy kodu.
- Wykorzystuje istniejące pakiety: Nie musisz tworzyć wszystkiego od podstaw; możesz użyć istniejących pakietów NPM z TypeScript. Ten język ma również silną społeczność, która utrzymuje i tworzy definicje typów dla popularnych pakietów.
Jak używać TypeScript z Node.js
Mimo że TypeScript ma te zalety, nowoczesne przeglądarki nie potrafią odczytać jego kodu w czystej postaci. Dlatego kod TypeScript musi zostać najpierw transpilowany do kodu JavaScript, aby działał w przeglądarkach. Wynikowy kod będzie miał taką samą funkcjonalność jak oryginalny kod TypeScript oraz dodatkowe funkcjonalności niedostępne w JavaScript.
Wymagania wstępne
- Node.js: Node to wieloplatformowe środowisko uruchomieniowe, które umożliwia uruchamianie kodu JavaScript poza środowiskiem przeglądarki. Możesz sprawdzić, czy węzeł jest zainstalowany na twoim komputerze za pomocą tego polecenia;
węzeł -v
W przeciwnym razie możesz pobrać Node.js z oficjalnej strony internetowej. Uruchom powyższe polecenie ponownie po instalacji, aby sprawdzić, czy zostało dobrze skonfigurowane.
- Menedżer pakietów węzłów: Możesz użyć NPM lub Yarn. Ten pierwszy jest instalowany domyślnie podczas instalacji Node.js. W tym artykule użyjemy NPM jako menedżera pakietów. Użyj tego polecenia, aby sprawdzić jego aktualną wersję;
npm -v
Instalowanie TypeScript z Node.js
Krok 1: Skonfiguruj folder projektu
Zaczniemy od utworzenia folderu projektu dla projektu TypeScript. Możesz nadać temu folderowi dowolną nazwę. Możesz użyć tych poleceń, aby rozpocząć;
węzeł maszynopisu mkdir
cd maszynopis-węzeł
Krok 2: Zainicjuj projekt
Użyj npm, aby zainicjować projekt za pomocą tego polecenia;
npm init -y
Powyższe polecenie utworzy plik package.json. Flaga -y w poleceniu mówi npm o uwzględnieniu wartości domyślnych. Wygenerowany plik będzie miał podobny wynik.
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Konfigurowanie TypeScript za pomocą Node.js
Krok 1: Zainstaluj kompilator TypeScript
Możesz teraz zainstalować kompilator TypeScript w swoim projekcie. Uruchom to polecenie;
npm install –save-dev maszynopis
Dane wyjściowe w wierszu poleceń będą podobne do tego;
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
Uwaga: Powyższe podejście instaluje TypeScript lokalnie w folderze projektu, nad którym pracujesz. Możesz zainstalować TypeScript globalnie w swoim systemie, więc nie musisz go instalować za każdym razem, gdy pracujesz nad projektem. Użyj tego polecenia, aby globalnie zainstalować TypeScript;
npm install -g typescript
Możesz sprawdzić, czy TypeScript został zainstalowany za pomocą tego polecenia;
tsc -v
Krok 2: Dodaj typy Ambient Node.js dla języka TypeScript
TypeScript ma różne typy, takie jak Implicit, Explicit i Ambient. Typy otoczenia są zawsze dodawane do globalnego zakresu wykonania. Użyj tego polecenia, aby dodać typy otoczenia;
npm install @types/node –save-dev
Krok 3: Utwórz plik tsconfig.json
Jest to plik konfiguracyjny określający wszystkie opcje kompilacji TypeScript. Uruchom to polecenie, które zawiera kilka zdefiniowanych opcji kompilacji;
npx tsc --init --rootDir src --outDir build \ --esModuleInterop --resolveJsonModule --lib es6 \ --module commonjs --allowJs true --noImplicitAny true
Zostanie to wyświetlone na terminalu;
Zostanie wygenerowany plik tsconfig.json, który zawiera niektóre wartości domyślne i komentarze.
plik tsconfig.json
Oto, co skonfigurowaliśmy:
- Katalog główny to miejsce, w którym TypeScript będzie szukał naszego kodu. Skierowaliśmy go do folderu /src, gdzie będziemy pisać nasz kod.
- Folder outDir określa miejsce umieszczenia skompilowanego kodu. Taki kod jest skonfigurowany do przechowywania w folderze build/.
Używanie TypeScript z Node.js
Krok 1: Utwórz folder src i plik index.ts
Teraz mamy podstawową konfigurację. Możemy teraz stworzyć prostą aplikację TypeScript i skompilować ją. Rozszerzenie pliku TypeScript to .ts. Uruchom te polecenia w folderze, który utworzyliśmy w poprzednich krokach;
mkdir src
dotknij src/index.ts
Krok 2: Dodaj kod do pliku TypeScript (index.ts)
Możesz zacząć od czegoś prostego, takiego jak;
console.log('Hello world!')
Krok 3: Skompiluj kod TypeScript do kodu JavaScript
Uruchom to polecenie;
npx tsc
Możesz sprawdzić folder kompilacji (build/index.js), a zobaczysz, że z tymi danymi wyjściowymi został wygenerowany plik index.js;
TypeScript został skompilowany do kodu JavaScript.
Krok 4: Uruchom skompilowany kod JavaScript
Pamiętaj, że kod TypeScript nie może działać w przeglądarkach. W ten sposób uruchomimy kod w index.js w folderze build. Uruchom to polecenie;
node build/index.js
To będzie wyjście;
Krok 5: Skonfiguruj TypeScript do automatycznej kompilacji do kodu JavaScript
Ręczne kompilowanie kodu TypeScript za każdym razem, gdy zmieniasz pliki TypeScript, może być stratą czasu. Możesz zainstalować ts-node (uruchamia kod TypeScript bezpośrednio bez czekania na kompilację) i nodemon (sprawdza twój kod pod kątem zmian i automatycznie restartuje serwer).
Uruchom to polecenie;
npm install --save-dev ts-node nodemon
Następnie możesz przejść do pliku package.json i dodać ten skrypt;
"scripts": {
"start": "ts-node ./src/index.ts"
}
Możemy użyć nowego bloku kodu do celów demonstracyjnych;
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.
Twój wynik będzie podobny do tego;
suma 3 liczb
Skonfiguruj Linting TypeScript za pomocą eslint
Krok 1: Zainstaluj eslinta
Linting może być przydatny, jeśli chcesz zachować spójność kodu i wychwycić błędy przed uruchomieniem. Zainstaluj eslint za pomocą tego polecenia;
npm install --save-dev eslint
Krok 2: Zainicjuj eslint
Możesz zainicjować eslint za pomocą tego polecenia;
npx eslint --init
Proces inicjalizacji przeprowadzi Cię przez kilka kroków. Skorzystaj z poniższego zrzutu ekranu, aby przeprowadzić Cię przez to;
Po zakończeniu procesu zobaczysz plik o nazwie .eslintrc.js z zawartością podobną do tej;
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
Krok 3: Uruchom eslint
Uruchom to polecenie, aby sprawdzić i usunąć wszystkie pliki z rozszerzeniem .ts;
npx eslint . --ext .ts
Krok 4: Zaktualizuj plik package.json
Dodaj skrypt lint do tego pliku w celu automatycznego lintingu.
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript z Node.js: najlepsze praktyki
- Aktualizuj TypeScript: Programiści TypeScript zawsze publikują nowe wersje. Upewnij się, że masz najnowszą wersję zainstalowaną na komputerze/folderze projektu i korzystaj z nowych funkcji i poprawek błędów.
- Włącz tryb ścisły: Typowe błędy programistyczne można wykryć w czasie kompilacji po włączeniu trybu ścisłego w pliku tsconfig.json. Skróci to czas debugowania, prowadząc do większej produktywności.
- Włącz ścisłe kontrole zerowe: możesz przechwycić wszystkie błędy zerowe i niezdefiniowane w czasie kompilacji, włączając ścisłe kontrole zerowe w pliku tsconfig.json.
- Użyj edytora kodu, który obsługuje TypeScript: istnieje mnóstwo edytorów kodu. Dobrą praktyką jest wybieranie edytorów kodu, takich jak VS Code, Sublime Text lub Atom, które obsługują TypeScript za pośrednictwem wtyczek.
- Używaj typów i interfejsów: Dzięki typom i interfejsom możesz definiować niestandardowe typy, które możesz ponownie wykorzystać w całym projekcie. Takie podejście sprawi, że Twój kod będzie bardziej modułowy i łatwy w utrzymaniu.
Podsumowanie
Masz teraz podstawową strukturę aplikacji utworzonej za pomocą TypeScript w Node.js. Możesz teraz używać zwykłych pakietów Node.js, ale nadal możesz pisać swój kod w TypeScript i cieszyć się wszystkimi dodatkowymi funkcjami, które są dostarczane z tym drugim.
Jeśli dopiero zaczynasz pracę z TypeScript, upewnij się, że rozumiesz różnice między TypeScript i JavaScript.