TypeScript: Custom Guards

3.9+

0:00Nadszedł czas abym pokazał ci w jaki sposób możesz definiować własne type guard

0:04aby dostosować je bardziej do swoich potrzeb mało tego okazują

0:08się one szczególnie przydatne w momencie gdy mamy do czynienia z literałami obiektu tym

0:13razem nie będziemy korzystać z klas tylko do określenia struktury obiektów użyj

0:17interfejsów jeżeli teraz utworzę funkcję która będzie przyjmować

0:22albo jeden albo drugi interfejs a następnie w zależności od tego z

0:26jakim typem danych będziemy mieć do czynienia będziemy zwracać odpowiednio tytuł

0:30lub nazwę playlisty do zdefiniowania logiki tej funkcji za chwilę

0:34sobie przejdziemy a teraz po prostu spróbujmy ją wywołać zarówno

0:38dla utworu oraz playlisty zwróć uwagę że w żaden sposób

0:42nie określam tutaj typu tego obiektu który przekazuje a pomimo tego

0:46typescript jest z tym jak najbardziej okej wynika to z faktu o

0:50którym już wspominałem na przestrzeni tego i poprzedniego kursu a mianowicie faktu

0:55że typescript do porównywania typów wykorzystuje tak zwany duck typing krótko

0:59przypomnę że chodzi tutaj o zachowanie kształtu obiektu więc tak długo

1:03jak przekazany przez nas obiekt posiada kształt który pasuje do jednego z tych interfejsów

1:07wszystko jest w porządku na przykład jeżeli tutaj dodałbym jakąś inną właściwość no

1:13to mamy jasny błąd informujący nas o tym że nie możemy tego zrobić w

1:17każdym razie teraz nasuwa się pytanie w jaki sposób możemy sprawdzić czy przekazany

1:22argument jest utworem bądź playlistą w poprzedniej lekcji pokazałem

1:26ci że jesteśmy w stanie wykorzystać asercję typów do tego aby sprawdzić czy występuje

1:30konkretna właściwość danego obiektu i faktycznie z perspektywy typescriptu

1:35jest to poprawne rozwiazanie natomiast jak zapewne pamiętasz typescript

1:39na ten moment nie wie dalej czy mamy do czynienia z utworem czy playlistą aby

1:44odczytywać właściwości naszego obiektu dalej będziemy musieli posługiwać sie tutaj asercją

1:48aby tego uniknąć możemy zdefiniować własny type guard który

1:53będzie przekazywał typescriptowi odpowiednią informację o typie w tym momencie

1:57nasuwa się pytanie w jaki sposób taki type guard utworzyć otóż

2:01nie jest to wcale takie trudne ponieważ type guard to po prostu funkcja której

2:05zadaniem jest zwrócenie prawdy lub fałszu proponuję więc

2:10abyśmy utworzyli sobie nową funkcję do której będziemy przekazywać ten jeden argument

2:14pochodzący stąd następnie typem tego argumentu będzie utwór lub

2:18playlista no bo tylko takich rodzajów danych spodziewamy się wewnątrz tej funkcji

2:22a następnie podobnie jak wcześniej a następnie w związku z tym

2:26że sprawdzamy czy przekazany argument jest typu song wystarczy

2:30że po prostu sprawdzimy czy właściwość title istnieje wewnątrz niego w

2:34tym momencie typescript informuje nas tutaj o ewentualnym błędzie który wystąpi

2:39w momencie gdy przekażemy tutaj playlistę no bo faktycznie w żaden sposób nie

2:43bronimy się tutaj przed tym że typ media będzie typu playlist możemy

2:47to jednak zrobić wykorzystując następującą konstrukcję

2:51możemy to jednak zrobić lekko modyfikując naszą funkcję przede

2:56wszystkim zamienimy tutaj typ przekazanego argumentu na any i choć

3:00z jednej strony pozbyliśmy się tutaj naszego błędu to niestety straciliśmy

3:04również informację o typie ale zobaczmy teraz co stanie się w momencie

3:08gdy wykorzystamy naszą funkcję okazuje się

3:12że pomimo tego że utworzyliśmy tutaj naszą funkcję która zwraca prawdę lub fałsz

3:16no to typescript dalej nie posiada tutaj informacji o tym czy

3:20mamy do czynienia z utworem czy też z playlistą dlatego musimy mu tą informację

3:25przekazać dodając informację o zwracanym typie w efekcie otrzymujemy

3:29tutaj type guard który daje typescriptowi informację o tym że

3:33w tym miejscu mamy do czynienia z utworem i w tym momencie wystarczy

3:37że naprawię jeszcze to odwołanie no i wszystko jest tutaj w porządku zatem

3:42podsumowując zwróć uwagę że pomimo tego że wykorzystujemy tutaj literały

3:46obiektu typescript akceptuje je jako argumenty naszej funkcji ze

3:50względu na to że pasują one kształtem do interfejsów które zdefiniowaliśmy

3:54tutaj następnie aby poradzić sobie z odróżnieniem tych typów

3:58wykorzystaliśmy custom type guard czyli po prostu utworzoną funkcję

4:03która zwraca prawdę lub fałsz ale też z informacją o tym

4:07jaki typ weryfikujemy i dopiero na podstawie takich informacji

4:11typescript jest w stanie samodzielnie określić w którym miejscu mamy do czynienia

4:15z jakim rodzajem danych oczywiście też nie chciałbym abyś zrozumiał

4:19że custom type guard jesteśmy w stanie wykorzystywać wyłącznie z literałami obiektów równie

4:25dobrze wewnątrz tej funkcji mogłyby się znaleźć operatory typeof albo

4:29instanceof tutaj nic nie stoi nam na przeszkodzie o ile

4:33pamiętamy o tym aby zwrócić informację który typ tutaj weryfikujemy

4:38ostatecznie już to co mi się tutaj jeszcze nie podoba to fakt że

4:42wykorzystujemy tutaj typ any ale również informuje nas tutaj eslint

4:46o tym że nie powinniśmy tego robić jeżeli wrócimy teraz do poprzedniego

4:50zapisu czyli song lub playlist no to mamy tutaj błąd który

4:54również mieliśmy w poprzednim odcinku i z nim akurat możemy sobie poradzić

4:58wykorzystując asercję typów czyli konkretnie robię teraz tak

5:03no i teraz nasz type guard jest perfekcyjnie napisany

5:07ani eslint ani typescript nie informuje nas o żadnym błędzie

5:11zatem na temat customowych type guardów to już wszystko ja

5:16dziękuję ci teraz za uwagę i nie pozostaje mi nic innego jak po prostu

5:20zaprosić cię do kolejnej lekcji