TypeScript: Plik konfiguracyjny

3.8+

0:00Wszystkie ustawienia dotyczące tego w jaki sposób kompilowane są nasze pliki TypeScript

0:04na JavaScript możemy zapisać w pliku konfiguracyjnym

0:08tsconfig. I teraz pokaże Ci w jaki sposób możemy dokładnie z niego korzystać.

0:13Plik konfiguracyjny możemy utworzyć ręcznie lub wykorzystując polecenie tsc z flagą init.

0:19Dzięki niemu w głównym katalogu projektu powstał plik tsconfig i właśnie w nim

0:24znajduje się masa różnych opcji wraz z komentarzami dotyczącymi tego w jaki

0:29sposób możemy konfigurować nasz kompilator.

0:31Pozwól jednak, że usunę tutaj zbędne

0:34komentarze, bo nas będzie interesować dosłownie kilka opcji.

0:38Jak widzisz na początek nie potrzebujemy ich zbyt wiele i aby zrozumieć do czego

0:42one służą możemy po prostu najechać na ich nazwę.

0:45Dzięki temu wiemy, że target określa do której wersji JavaScriptu kompilowany jest

0:49nasz kod. Natomiast module określa z którego systemu modułów będziemy korzystać i nas

0:55oczywiście interesuje obecnie najbardziej popularny commonjs.

0:58No i ostatecznie mamy opcję strict.

1:01I tutaj nie chodzi o tryb strict z samego

1:03JavaScriptu tylko tego, jak surowy to będzie dla nas TypeScript

1:07podczas weryfikacji typów. Z całą pewnością

1:10chcemy zadbać o to, aby ta opcja była włączona.

1:13Teraz z pewnością interesuje Cię w jaki sposób możemy z tego pliku konfiguracyjnego

1:17skorzystać i odpowiedź na to pytanie jest bardzo prosta, ponieważ wystarczy, że

1:21uruchomimy polecenie tsc. TypeScript od razu zauważył, że w naszym

1:26katalogu znajduje się plik konfiguracyjny i po prostu go wykorzystał.

1:30Dzięki temu faktycznie mamy tutaj skompilowany plik.

1:33Jeżeli chcielibyśmy wrócić do tego, aby pliki generowały się również w katalogu

1:37dist wystarczy, że dodamy tutaj opcję outDir. Dzięki temu ponowne uruchomienie

1:42polecenia tsc wygeneruje pliki w odpowiednim miejscu.

1:47Teoretycznie na ten moment ostatnia rzecz,

1:49która może nas interesować to obserwowanie plików.

1:52W tym celu wykorzystujemy flagę 'w' przy poleceniu TypeScript.

1:56Natomiast ja osobiście mam z tym mały problem.

1:58Chodzi mi konkretnie o to, że teraz co prawda jeżeli będę wprowadzał jakieś

2:02zmiany do pliku app.ts to plik app.js zostanie automatycznie wygenerowany, ale

2:08nadal w przeglądarce będę musiał odświeżać stronę.

2:11Jestem wielkim fanem ułatwienia sobie życia na każdym kroku,

2:14dlatego nie będziemy korzystać z polecenia

2:16tsc, tylko wykorzystamy narzędzie jakim jest Parcel.

2:20Jest to alternatywa dla Webpack'a, przy czym

2:23Parcel nie wymaga od nas praktycznie żadnej konfiguracji. Wystarczy, że globalnie

2:28zainstalujemy go w naszym systemie i w ciągu kilku chwil jest dla nas dostępny.

2:33Teraz uruchamiamy go poleceniem parcel indeks.html z opcją watch.

2:38Teraz nasz serwer został uruchomiony, ale

2:41nas interesuje jeszcze jedna mała zmiana. Mianowicie tutaj mamy link do naszego

2:45pliku z katalogu dist, a teraz Parcel będzie dbał o to, aby przetłumaczyć plik TypeScript.

2:51Więc teraz bezpośrednio możemy do niego linkować.

2:54Dzięki temu nie tylko nasza aplikacja działa, ale również gdy wprowadzę w niej

2:58jakąś zmianę i powiedzmy, że zrobimy teraz tak, to zaraz po zapisaniu pliku Parcel

3:04zadba o to, aby odświeżyć okna przeglądarki.

3:07Dzięki temu mamy już pełną konfigurację, która umożliwi nam dalszą naukę TypeScriptu.

3:11Oczywiście, jeżeli Cię to interesuje,

3:14możesz również skonfigurować tutaj Webpack'a.

3:17Natomiast w mojej opinii w tym przypadku zdecydowanie lepszą opcją jest Parcel.

3:21Zresztą jak widzisz uruchomienie go było bajecznie proste.

3:25Teraz jesteśmy gotowi do tego, aby przejść do kolejnej lekcji.

3:28Do usłyszenia za chwilę.