Jak korzystać z TypeScript w projekcie Node.js?

TypeScript jest przydatny do tworzenia złożonych aplikacji i niezawodnych architektur, takich jak mikrousługi. Oczywiście TypeScript nie może zrobić niczego, czego nie może JavaScript, ale może ułatwić zarządzanie złożonymi projektami. Ścisłe pisanie TypeScript i obsługa interfejsów oznacza, że ​​doskonale nadaje się do programowania obiektowego. Widzieliśmy, jak wiele firm zwraca się do TypeScript w celu kodowania swojego zaplecza.

Nie ma lepszego czasu na rozpoczęcie korzystania z TypeScript w projekcie Node.js niż teraz. Ale jak możesz to skonfigurować dla swojego projektu Node.js? Dowiesz się w tym artykule.

Co to jest TypeScript?

TypeScript to skompilowana, ściśle określona wersja JavaScript opracowana i utrzymywana przez Microsoft. Kod TypeScript transpiluje się do JavaScript.

Ścisła natura TypeScript pomaga programistom uniknąć błędów w ich kodzie. Skompiluje tylko kod, który spełnia zasady określonych typów danych. Dzięki temu kod TypeScript jest bardziej niezawodny niż jego czysty odpowiednik JavaScript.

Obsługuje również programowanie zarówno funkcjonalne, jak i obiektowe. Wszystkie te cechy sprawiają, że jest wysoce skalowalny i nadaje się do tworzenia złożonych aplikacji.

Jak skonfigurować TypeScript w węźle. JS

Będziesz musiał wyciągnąć kilka konfiguracji tu i tam, aby zacząć używać TypeScript w swoim projekcie Node.js. Ale nie martw się, to proste.

Upewnij się jednak, że: zainstaluj pakiet Node.js npm przed kontynuowaniem.

Zainicjuj plik package.json

Otwórz terminal i utwórz folder projektu. Następnie wejdź do tego nowego katalogu i zainicjuj projekt Node.js:

początek npm

Powyższe polecenie tworzy pakiet.json plik do przechowywania zależności.

Zainstaluj TypeScript i inne zależności

Następnie zainstaluj TypeScript w swoim projekcie Node.js:

npm i -D maszynopis

ten -D słowo kluczowe zapewnia, że ​​TypeScript zostanie zainstalowany jako część devDependencies w pakiet.json.

Będziesz także musiał zainstalować @typy/ekspresowe, definicja TypeScript dla Express.js:

npm instalacja -D @typy/express

Następnie zainicjuj a tsconfig.json plik. To szczegółowo opisuje podstawowe opcje kompilatora dla twojego projektu:

npx tsc --w tym

Powyższe polecenie tworzy tsconfig.json plik w folderze głównym projektu.

Zainstaluj również Express.js. Możesz to pominąć, jeśli zamierzasz zarządzać tylko serwerami za pomocą wbudowanych prymitywów HTTP Node.js. Ale Express.js to ułatwia:

npm zainstalować wyrazić

Następnie zainstaluj nodemon, pakiet, który automatycznie restartuje serwer po każdej zmianie w kodzie. Upewnij się, że zainstalowałeś to globalnie, aby działało:

npm zainstalować -g nodemon

Skonfiguruj TypeScript z węzłem. JS

Otworzyć tsconfig.json plik, który zainicjowałeś wcześniej przy użyciu swojego wybrany edytor kodu. W tym pliku może być dużo. Chociaż możesz skonfigurować ten plik w jego obecnej formie, możesz zastąpić całą jego zawartość poniższą, aby to uprościć.

Oto wszystko, czego potrzebujesz w tsconfig.json zacząć:

{
"Opcje kompilatora": {
"moduł": "commonjs",
"esModuleInterop": PRAWDA,
"cel": "es6",
"modułRozdzielczość": "węzeł",
"ŹródłoMapa": PRAWDA,
"outDir": "odległość" //Określa katalog transpilera. 
 },
"lib": ["es2015"]
}

Teraz otwarte pakiet.json. Oto jak wygląda obecnie po zainstalowaniu TypeScript i Express:

Następnie dodaj następujące konfiguracje do skrypty szyk:

"skrypty": {
"test": "Echo \"Błąd: nie określono testu\"&& wyjście 1",
"budować": "npx tsc",
"początek": "węzeł ./dist/app.js",
"odległość": "tsc -p .",
 "dev": "nodemon ./src/app.ts", //Zastąpić ten z prawidłowe informatorścieżkadla app.ts w Twój walizka
"rodzaj": "moduł"
}

Powyższa konfiguracja wskazuje na uruchomienie serwera app.js, transpilator. Bez obaw, to jest domyślny plik, który zostanie utworzony automatycznie w odległość folder po uruchomieniu budować scenariusz. Zrobisz to później.

Konfiguracja następnie określa podstawowy skrypt programistyczny jako app.ts.

Dlatego po uruchomieniu środowiska programistycznego nodemon biegnie app.ts. Node.js następnie kompiluje to do JavaScript wewnątrz app.js—który komunikuje się z serwerem HTTP.

Następnie utwórz src folder w katalogu głównym projektu. Wewnątrz tego folderu utwórz pusty plik TypeScript i nazwij go app.ts.

Utwórz katalog transpilatorów

Transpiler to plik JavaScript, który kompiluje kod TypeScript do natywnego kodu JavaScript. Dzięki temu serwer może odnosić się do twojego kodu jako JavaScript zamiast ściśle wpisanego skryptu.

Tak więc, podczas gdy TypeScript obsługuje strukturę kodu, plik transpilera kompiluje go do JavaScript.

Teraz uruchom budować skrypt do tworzenia odległość katalog transpilatorów automatycznie:

npm uruchom kompilację

Powyższe polecenie kompiluje kod TypeScript do JavaScript. Utworzony folder zawiera dwa pliki; app.js oraz app.js.map.

otwarty pakiet.json ponownie. Zobaczysz klucz w tablicy o nazwie Główny. Widać, że jego wartość wskazuje na index.js. Zastąp to app.js (transpiler) katalog plików:

"Główny": "./dist/app.js",

Po sformatowaniu pakiet.json powinien wyglądać tak:

To tyle, jeśli chodzi o część konfiguracyjną.

Utwórz i uruchom żądanie HTTP

Teraz spróbuj utworzyć i uruchomić żądanie HTTP za pośrednictwem serwera Express.js, aby sprawdzić, czy Twój kod skompiluje się tak, jak powinien.

W środku app.ts:

import ekspres, {Żądanie, Odpowiedź} od 'wyrazić'
stały aplikacja = ekspres ()
aplikacja.pobierz('/', async (wymagane: żądanie, odp.: odpowiedź)=>{
 konsola.log('Witaj świecie')
 wyślij ponownie('Witaj świecie')
})
stały port = 8080
app.listen (port, (): próżnia=>{
konsola.dziennik(`Aplikacja nasłuchuje o http://localhost:${port}`)
})

Następnie otwórz wiersz poleceń w katalogu głównym projektu i uruchom dev skrypt do rozpoczęcia projektu:

npm uruchom dev

Otwórz przeglądarkę i przejdź do Lokalny Gospodarz: 8080, i zobaczysz odpowiedź (Witaj świecie). Zobaczysz to również w terminalu, jeśli zastosowałeś konsola.log tak jak w powyższym przykładzie.

TypeScript ma duże perspektywy popytu

Nie ma dużej różnicy między TypeScript i JavaScript. Ale ten pierwszy ułatwia rozwój dzięki dodaniu ścisłego pisania.

TypeScript to cenny język we frontendowych frameworkach, takich jak Angular, i nie możemy zaprzeczyć jego wydajności i skalowalności. Staje się coraz bardziej popularny, a perspektywy pracy dla programistów TypeScript stale rosną.

Wprowadzenie do Angular

Czytaj dalej

O autorze