TypeScript: TypeScript compiler

3.8+

0:00Na tym etapie możemy już zadbać, aby nasze pliki były uruchamiane w przeglądarce.

0:05Oczywiście same przeglądarki nie potrafią rozumieć kodu napisanego w TypeScripcie,

0:09dlatego musimy go wcześniej przetłumaczyć do czystego JavaScript'u.

0:13I w tym celu będziemy wykorzystywać narzędzia jakim jest TypeScript compiler.

0:17Przejdźmy już zatem do naszego pliku, który za chwilę przetłumaczymy. Na ten moment

0:21wystarczy, że zapiszemy w nim jakiś prosty console.log.

0:25Teraz z pomocą TypeScript compilera, czyli polecenia tsc.

0:32No i w katalogu głównym pojawił się plik app.js, który zawiera dokładnie ten sam kod i w

0:37tym akurat nie ma nic dziwnego, ponieważ consol.log jest poprawnym kodem

0:41JavaScript, więc sam compiler nie miał tutaj nic do roboty.

0:44Ale co się stanie w sytuacji, gdy dodamy

0:47tutaj funkcję foo, która będzie wykorzystywać składnię async/await.

0:50I poza tym, jak widzisz, ma dodatkowe oznaczenie pochodzące z TypeScriptu.

0:54W tej sytuacji wykonanie polecenia tsc zakończy się wygenerowaniem pliku,

0:59który będzie posiadał nieco inną zawartość.

1:02Zobacz, że mamy tutaj mnóstwo kodu, którego wcale nie pisaliśmy.

1:06Mało tego: jest to jakiś stary kod, wykorzystujący słowa kluczowe var.

1:11Ostatecznie jednak tutaj na dole pliku znajduje się nasz console.log, który napisaliśmy

1:16oraz funkcja foo, co prawda ze zmienioną składnią,

1:19natomiast nadal jest to funkcja, którą napisaliśmy.

1:22To wszystko wynika z faktu, że domyślnie compiler kompiluje pliki do wersji

1:26zgodnej z ECMAScript 3, czyli dość starej wersji JavaScript.

1:30No ale w tej chwili mamy pewność, że ten

1:32kod zadziała nawet na starszych przeglądarkach.

1:34Jeżeli jednak chcielibyśmy zmienić to

1:37zachowanie moglibyśmy przekazać dodatkową opcję, mówiącą o tym, do której wersji języka

1:41chcemy kompilować nasz kod i to akurat możemy zrobić, wykorzystując flagę target.

1:47Zawartość naszego pliku uległa co prawda

1:50zmianie, natomiast zwróć uwagę, że nadal mamy tutaj dużo dodatkowego kodu.

1:54To jest oczywiście ok i z tym akurat nie

1:56musimy już nic więcej robić, ale może z jakiegoś powodu chciałbyś skompliować

2:01tę wersję do najnowszego JavaScript'u. Wtedy tutaj podajemy wersję ESNext.

2:07I w tej sytuacji ze względu na to, że składnia async/await jest już dostępna w

2:11nowym JavaScripcie, jedyne co zostało zrobione podczas tłumaczenia to została usunięta

2:16dodatkowa składnia, dotycząca typów tej funkcji.

2:19Na tym etapie mogą zainteresować Cię

2:21dodatkowe opcje compilera, takie jak chociażby outDir.

2:24Dzięki niej jesteśmy w stanie wskazać

2:27folder, do którego trafią przetłumaczone pliki.

2:29Zazwyczaj jest to katalog dist.

2:32Jak widzisz po kompilacji faktycznie ten

2:34katalog został utworzony. Wewnątrz niego znajduje się nasz kod.

2:38No i musimy tylko zadbać o to, aby w pliku

2:40indeks HTML odpowiednio zaktualizować ścieżkę do tego pliku.

2:44W każdym razie jesteśmy teraz gotowi do tego, aby uruchomić ten plik w przeglądarce.

2:49Nasza strona to obecnie pusty plik, ale w

2:52konsoli pojawił się komunikat, o który nam chodziło.

2:54Oczywiście to nie jest teraz tak, że za każdym razem, gdy będziemy chcieli

2:58tłumaczyć plik TypeScript, będziemy musieli uruchamiać to polecenie,

3:02ponieważ w pierwszej kolejności możemy wykorzystać flagę watch do tego, aby

3:06obserwować plik TypeScript i wtedy, w momencie gdy będziemy wprowadzać w nim jakieś

3:10zmiany, zostaną one automatycznie zastosowane w pliku app.js.

3:15W praktyce jednak, pomimo tego, że flaga watch jest dość wygodna i tak będziemy

3:20korzystać z narzędzi takich jak chociażby WebPack czy np.

3:23Parcel do tego, aby budować naszą aplikację.

3:26Jednak problem, który nadal nie pozostaje

3:28rozwiązany to kwestia opcji, którą przekazujemy do compilera.

3:32Na ten moment przekazywaliśmy ich dosłownie kilka, ale w momencie gdy uruchomisz

3:37polecenie tsc zobaczysz, że opcji, które oferuje compiler, jest zdecydowanie więcej.

3:42Zapisywanie ich wszystkich bezpośrednio

3:45przy uruchamianiu komendy tsc byłoby bardzo uciążliwe. Dlatego TypeScript

3:49oferuje nam plik konfiguracyjny, którym zajmiemy się już w kolejnej lekcji.

3:54No to do usłyszenia za chwilę.