TypeScript: Czym jest TypeScript

3.8+

0:00W tym filmie odpowiem Ci na pytanie czym

0:02jest TypeScript. A odpowiedź jest stosunkowo prosta, ponieważ jest to stworzony przez

0:07firmę Microsoft rozszerzenie języka JavaScript.

0:10Istotny w tej odpowiedzi jest fakt, że jest to rozszerzenie, czyli inaczej mówiąc kod

0:15napisany w JavaScript jest w pełni kompatybilny z TypeScriptem.

0:18Dzięki temu możesz zacząć korzystanie z TypeScriptu

0:21już dziś, nawet w projektach, które nie zostały w nim napisane.

0:25Wystarczy, że stopniowo będziesz przepisywał kod na TypeScript.

0:29I teraz: najważniejszą cechą TypeScriptu jest fakt, że wprowadza on tzw.

0:33statyczne typowanie do JavaScriptu.

0:35Pytanie teraz co to statyczne typowanie

0:38oznacza i pozwól, że wyjaśnię Ci to na przykładzie.

0:41Zapewne doskonale wiesz, że w JavaScript

0:43nie mamy problemu z tym, aby przypisywać różne wartości do zmiennych.

0:47Oczywiście tak długo, o ile nie mamy tutaj const.

0:50W każdym razie w pierwszej linii number to oczywiście liczba.

0:53Natomiast już w kolejnej linii, number

0:56staje się stringiem. No i ostatecznie staje się wartością logiczną.

1:00Jak widzisz JavaScript nie ma absolutnie

1:02żadnego problemu z tym, że w trakcie wykonywania programu kilkukrotnie

1:06zmieniliśmy tryb jednej konkretnej zmiennej.

1:09Inaczej mówiąc, mamy tutaj do czynienia z dynamiczną zmianą typów czy też

1:14dynamicznym typowaniem, który charakteryzuje JavaScript.

1:17Natomiast spójrzmy teraz na ten sam kod w przypadku TypeScriptu.

1:21Jak widzisz te dwa pliki w tej chwili różni wyłącznie rozszerzenie.

1:25W przypadku TypeScriptu korzystamy z rozszerzenia TS.

1:29W każdym razie zauważ, że już na tym etapie

1:32nasz edytor sygnalizuje nam, że w tym kodzie znajduje się błąd.

1:35Pytanie tylko dlaczego ten kod przed chwilą działał.

1:39Otóż okazuje się, że zadziałało tutaj

1:41właśnie statyczne typowanie i mamy informację o tym, że w przypadku zmiennej

1:46number został już przypisany typ NUMBER, więc nie możemy zmienić go na kolejne.

1:52Być może zastanawiasz się teraz dlaczego w ogóle chcemy sprawdzać typy.

1:55Otóż chodzi tutaj o fakt, że w ramach

1:57działającego programu zmienna raczej nie zmienia swojego typu, a jeżeli już tak się

2:03dzieje to często prowadzi to do nieoczekiwanych rezultatów i największy

2:06problem polega na tym, że o tego typu błędach najczęściej dowiadujemy się od

2:10użytkowników korzystających z naszej aplikacji. A więc mamy tutaj pierwszą

2:15zaletę TypeScriptu, czyli wyłapywanie błędów na wczesnym etapie developmentu.

2:20Błędy, o których mówiłem mogą wyglądać np. tak:

2:23Mamy tutaj proste działanie na dwóch

2:25typach: liczbie oraz tekście. Teoretycznie spodziewamy się tutaj 3.

2:30Natomiast w praktyce otrzymujemy 12.

2:34I być może powiesz mi teraz, że taki błąd jest oczywisty.

2:37No na takim przykładzie rzeczywiście tak

2:39jest. Ale co w sytuacji, gdy jakaś wartość pochodzi np.

2:43z formularza.

2:44W takim przypadku o pomyłkę już bardzo łatwo.

2:46Do statecznego typowania niejednokrotnie będziemy jeszcze wracać.

2:50A tymczasem zobaczmy co jeszcze TypeScript ma nam do zaoferowania.

2:54Statyczne typowanie daje nam coś jeszcze, czyli definicje typów.

2:59Konkretnie chodzi tutaj o informacje

3:01jakiego typu jest zmienna, parametr funkcji czy np.

3:05wartość zwracana przez funkcję.

3:07To wszystko sprawia, że możemy skorzystać z

3:09mechanizmu IntelliSense, dzięki któremu nasz edytor staje się

3:14mądrzejszy a nam programuje się zdecydowanie łatwiej.

3:17Zobaczmy jak to wygląda w praktyce.

3:20Programując w JavaScripcie niejednokrotnie musimy

3:22korzystać z zewnętrznych bibliotek, które oferują nam jakieś API.

3:26Przykładem takiej biblioteki może być chociażby ramda.

3:30Po jej instalacji i zaimportowaniu do naszego pliku, nie mamy w tej chwili żadnej

3:35opcji zobaczyć jakie metody nam udostępnia.

3:37Jak widzisz w tej chwili Visual Studio Code nie ma tutaj nic do powiedzenia.

3:42W takiej sytuacji informacje o definicjach

3:45typów możemy sobie doinstalować. W przypadku ramdy wygląda to tak:

3:51Instalując taki pakiet, nagle Visual Studio

3:54Code staje się bardziej przydatny niż zwykle.

3:57Swoją drogą, aby wyświetlić to menu wcinąłem CTR i spację.

4:00Tak czy inaczej, jak widzisz, mamy tutaj

4:02informacje o wszystkich udostępnianych przez ramde metodach.

4:06Mało tego mamy tutaj opis tej metody.

4:08Także w tej chwili możemy ją po prostu wykorzystać.

4:12Tego typu zachowanie sprawdza się świetnie

4:15również w ramach naszego kodu, czyli pisząc funkcje i definiując typy.

4:19Jesteśmy w stanie w ramach aplikacji po prostu

4:21sprawniej się poruszać i wykorzystywać istniejące funkcje.

4:25Nie muszę chyba podkreślać faktu, że coś takiego niesamowicie usprawnia pracę

4:29zarówno, nam jak i kolegom i koleżankom z zespołu. I na koniec mam jeszcze jeden

4:34argument mówiący za tym, że warto korzystać z TypeSciptu.

4:37To mianowicie chodzi o nowe funkcje języka JavaScript. Jak wiesz sam, JavaScript

4:43zmienia się bardzo dynamicznie. Natomiast dodawanie nowych funkcji, często tych

4:47bardzo przydatnych, zajmuje jednak trochę czasu.

4:50No i tak się składa, że bardzo często te nowe funkcje szybciej implementowane są do

4:55TypeScriptu, dzięki czemu możemy z nich korzystać już teraz.

4:58Taka możliwość oczywiście wpływa pozytywnie na komfort naszej pracy.

5:02Zobaczmy teraz na przykład takiej funkcji.

5:05W najnowszej wersji TypeScript daje nam do dyspozycji prywatne właściwości klas.

5:11Bo jak doskonale wiesz, w tej chwili, jeżeli tworzymy jakąś klasę a następnie obiekt na

5:16podstawie tej klasy, możemy bez problemu odczytywać jej właściwości.

5:20Niejednokrotnie jest to przyczyną wielu

5:22błędów a poza tym po prostu nie zawsze tak być powinno.

5:26Tak się akurat składa, że obecnie w

5:29procesie TC 39, konkretnie na stage'u trzecim, czyli już tym bardzo zaawansowanym

5:35znajduje się propozycja dotycząca prywatnych właściwości klas.

5:39Zanim jednak będziemy mogli z niej

5:40korzystać minie jeszcze przynajmniej kilka miesięcy od momentu nagrywania tego filmu.

5:45Natomiast zwróć uwagę na to: powiększę

5:48tylko trochę ekran i mamy informację o tym, że TypeScript w wersji 3.8 jest już dostępny i to co

5:55nam oferuje to właśnie prywatne właściwości klas.

5:59Dlatego w tym momencie wystarczy, że

6:01przełączę się na plik TypeScript i dodam odpowiednią składnię,

6:06aby otrzymać informację o tym, że popełniłem błąd a ten błąd polega na tym,

6:11że próbuje odczytać wartość prywatnej właściwości.

6:14Zatem jak widzisz, dzięki temu

6:16TypeScriptowi już dziś korzystam z funkcji, które jeszcze nie są dostępne.

6:20I w ten sposób mamy kolejny argument za tym, że warto nauczyć się TypeScriptu.