Instalacja TypeScript i minimalistyczny set-up projektu

W poprzednim wpisie wprowadziłem nas w świat TypeScript, a dziś zajmiemy się pokazaniem jak przebiega instalacja TypeScript oraz zestawienie (set-up) minimalistycznego projektu, bez nadmiarowych narzędzi jak Webpack czy Babel. Na to przyjdzie czas później.

Instalacja NodeJs

Zacznijmy od instalacji NodeJS, czyli środowiska uruchomieniowego dla JavaScript po stronie serwera. Dzięki temu będziemy mogli uruchamiać kod JavaScript (skompilowany z TypeScript) bez konieczności angażowania przeglądarki. NodeJS możemy pobrać ze strony nodejs.org. Wraz z Node instaluje się npm. Jest to manager paczek (i nie tylko, jeśli znasz Jave to możesz o nim myśleć jak o czymś na kształt Mavena).

Instalacja Visual Studio Code

Kolejnym krokiem jest instalacja IDE bądź edytora kodu. My skorzystamy z Visual Studio Code. Moim zdaniem jest to najlepszy edytor do pracy z TypeScript. Za ten edytor również odpowiada ekipa z Microsoft, więc cokolwiek nowego pojawia się w TypeScript jest momentalnie wspierane w Visual Studio Code. Poza tym edytor ten jest bardzo prosty w opanowaniu podstawowych funkcjonalności, a gigantyczna ilość wtyczek pozwala na rozbudowanie jego możliwości. VSC pobieramy ze strony https://code.visualstudio.com/ .

Instalacja TypeScript

Po instalacji niezbędnych narzędzi stwórzmy katalog dla naszego projektu (w moim wypadku będzie on nosił nazwę HelloTS). Otwórzmy ten folder w edytorze kodu. Otwieramy menu File, a w nim wybieramy Open Folder:

Następnie otwieramy wbudowaną w VSC linie komend. Z menu wybieramy opcje Terminal, a z niej New Terminal i u dołu edytora pojawi nam się nowe okno.

W terminalu wpisujemy komendę npm init -y, dzięki to której do naszego katalogu zostanie dodany plik package.json, który jest plikiem konfigurującym projekt dla npm (np. określa zewnętrzne zależności projektu).

TypeScript możemy zainstalować globalnie bądź lokalnie. Ja preferuję instalacje lokalną. Wówczas każdy projekt jest odizolowany od innych, nie współdzieli z nimi zależności na konkretną, globalną wersję TypeScript.

By zainstalować TS lokalnie używamy komendy npm i typescript --save-dev Wówczas zostanie utworzony katalog node_modules z plikami TypeScript, oraz zależność ta zostanie dodana do pliku package.json w sekcji devDependencies:

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

Następnie warto odpalić komende npx tsc --init, która doda plik konfiguracyjny dla TypeScript dla naszego projektu. W pliku tym ustawiamy m.in. do jakiej wersji ECMAScript ma kompilować się plik TypeScript, jakie są obostrzenia dotyczące typów (strict mode). Są tam też dziesiątki innych możliwych ustawień, ale to materiał na inny wpis, na chwilę obecną starczy nam to, co mamy.

Dzięki użyciu komendy npx mamy pewność, że zostanie użyta lokalna (przebywająca w node_modules/.bin) wersja kompilatora TypeScript. Dodatkowo npx spowoduje, że jeśli nie mamy danej aplikacji zainstalowanej to zostanie ona ściągnięta. W przypadku, gdy nie mamy globalnie zainstalowanego TypeScript to używanie tej komendy jest nadmiarowe… ale moim zdaniem lepiej przyzwyczaić się do jej używania. Zresztą po ulepszeniach naszego środowiska pracy nie będzie konieczne ciągle jej podawanie, ale o tym później.

Pierwszy kod TypeScript

Teraz możemy w końcu coś napisać, zaczniemy tradycyjnie od Hello World. Tworzymy plik Hello.ts:

const hello : string = 'Hello World';
console.log(hello);

docelowo ten kawałek kodu wypisze nam Hello World na konsoli.

Kompilacja i uruchomienie

Teraz możemy skompilować nasz kod za pomocą komendy npx tsc w wyniku jej pojawi się plik Hello.js. Zawarty jest w nim kod JavaScript, jaki powstał po kompilacji pliku TypeScript

"use strict";
var hello = 'Hello World';
console.log(hello);

Odpalamy ten kod za pomocą komendy node Hello.js. Na konsoli pojawi nam się śliczne Hello World

Upgrade 1 – Watch mode

O ile powyższe jest już dobrze zestawionym procesem to możemy wprowadzić pewne automatyzacje. Pierwszą z nich będzie uruchomienie kompilatora TypeScript w trybie –watch, dzięki któremu sam będzie nasłuchiwał na zmiany w plikach .ts i automatycznie je kompilował. Wystarczy w konsoli wpisać komende npx tsc --watch i teraz, gdy zmienimy coś w naszym kodzie źródłowym kod zostanie automatycznie przekompilowany. Na przykład wpiszmy

const hello : string = 'Hello, Paweł';
console.log(hello);

i po zapisaniu zostaniemy na konsoli poinformowani o rekompilacji. Jeśli zajrzymy do pliku Hello.js zobaczymy, że jego zawartość się zmieniła.

Żeby go uruchomić będziemy musieli odpalić drugą konsolę. Klikamy w plusik po prawej stronie okienka z terminalem

Możemy przepinać się między okienkami z pomocą menu rozwijanego znajdującego się obok plusika.

Wybieramy drugi terminal, uruchamiamy node ./Hello.js i mamy zaktualizowany kod. Teraz wszelkie zmiany w plikach .ts będą automatycznie kompilowane. Jedna komenda mniej do uruchamiania

Upgrade 2 – Nodemon

Nodemon jest to aplikacja, dzięki której możemy stworzyć swoisty watch-mode dla pliku .js. Za każdym razem, gdy zmieni się zawartość pliku Hello.js zostanie on ponownie uruchomiony (automatycznie wykona się komenda node Hello.js).

Instalujemy nodemon i uruchamiamy za pomocą komend npm i nodemon -save-dev oraz npx nodemon ./Hello.js

(npm install jest namiarowe… bo npx instaluje za nas barkujące rzeczy, ale warto pokazywać pewne rzeczy by informacja się utrwaliła)

Na konsoli otrzymamy komunikat o uruchomieniu nodemon oraz napis Hello Paweł.

Zmieńmy teraz tekst w pliku Hello.ts na powrót na Hello World. Po zapisaniu najpierw automatycznie zostanie ten plik skompilowany na plik js dzięki watch-mode kompilatora TypeScript, a następnie nodemon automatycznie uruchomi zmieniony plik.

Upgrade 3 – Lepsza widoczność w Visual Studio Code

Jedyna niedogodność, jaka nam została to fakt, że musimy przepinać się między dwoma konsolami, by zobaczyć czy kompilacja się powiodła, a następnie efekt naszych prac. Możemy to zmienić.

Zamykamy drugi terminal (ctr+c, a następnie komenda exit). Wybieramy terminal pierwszy, a następnie możemy wybrać albo w menu na górze Terminal -> Split Terminal

Bądź też kliknąć ikonkę podzielonego terminala na prawo od plusika służącego do tworzenia nowych linii komend.

W ten sposób mamy dwa terminale otworzone w jednym okienku na dole edytora. W drugim odpalamy ponownie nodemon i cieszymy się pełną automatyzacją oraz mamy wszystko widoczne na pierwszy rzut oka, gdyby gdzieś w naszym programie pojawił się błąd. Czy to kompilacji, czy w działaniu.

Tyle na dziś. Kod dostepny na GitHub.

Interesuje Cię TypeScript? Wprowadzenie do tego języka jest jednym z darmowych kursów dostępnych na kursy.clockworkjava.pl.