React & TypeScript: Typy zdarzeń

0:00W tej lekcji pokażę Ci w jaki sposób typować zdarzenia i akcje.

0:03Przykładowo, jeżeli będziemy mieć jakiś

0:05przycisk, do którego będziemy chcieli podpiąć zdarzenie, to oczywiście handler

0:09tego zdarzenia możemy wpisać bezpośrednio w kodzie HTML.

0:13I tutaj uwagę, że jeżeli przekazałem tutaj

0:15parametr event to od razu informuje tutaj typ tego zdarzenia.

0:20I zwróć uwagę, że wykorzystujemy tutaj moz

0:22Event, do którego przekazywany jest typ generyczny wskazujący na button.

0:27I oczywiście wynika to z faktu, że wykorzystujemy tutaj button.

0:30Natomiast jeżeli byłby to inny element HTML, ta klasa uległaby tutaj zmianie.

0:35Jest to niezwykle istotne, aby zapamiętać,

0:37że właśnie w ten sposób typujemy zdarzenia, gdzie i swoją drogą posługujemy

0:41się tutaj max eventem, ale pochodzącym z biblioteki.

0:44Jak za chwilę pokażę Ci co to dokładnie oznacza.

0:47Tym razem, jeżeli teraz wewnątrz tej funkcji spróbujemy odczytać właściwość np.

0:51text content, to oczywiście nie będzie z tym żadnego problemu.

0:55Tak samo, jeżeli teraz spróbujemy

0:56wyświetlić listę dostępnych tutaj właściwości, no to faktycznie TypeScript

1:00podpowiada nam ten, do której rzeczywiście mamy tutaj dostęp.

1:03I to właśnie związane jest z tym, że przekazujemy tutaj typ opisujący button.

1:07Jeżeli mielibyśmy do czynienia z importem, wtedy moglibyśmy odczytać np.

1:11jego właściwość Valium.

1:13Dodatkowo chciałbym zwrócić Twoją uwagę na

1:15wykorzystanie tutaj właściwości Current target ze względu na to, że w przypadku

1:19kliknięcia faktycznie chodzi nam o to, aby odwołać się tutaj do elementu, który

1:23wywołał to zdarzenie, a nie tego, który faktycznie został tknięty.

1:26Tak czy inaczej taki zapis Chandlera ma

1:28może jakiś sens w przypadku bardzo prostych zdarzeń.

1:31Tak, w większości przypadków będziemy

1:33tutaj sięgać po zdefiniowane wcześniej metody.

1:36I w tym momencie sytuacja się nieco komplikuje ze względu na to, że jeżeli

1:39chcielibyśmy tutaj wykorzystać zdarzenie, to otrzymamy błąd skryptu informujący nas

1:44o tym, że mamy tutaj niejawny typ, co jest oczywiście prawdą.

1:47Aby to tutaj działało musimy wykorzystać

1:50Max event, do którego przekazujemy typy HTML button element.

1:54Dzięki temu teoretycznie wszystko powinno być tutaj w porządku, Natomiast mamy tutaj

1:58błąd informujący nas o tym, że event nie jest medykiem.

2:01Oznacza to mniej więcej tyle, że potrzebujemy ten moz event zaimportować

2:05bezpośrednio, zmieniajac w ten sposób nasz błąd znika.

2:08I tutaj faktycznie nie mamy event tylko literę E.

2:11No i w ten sposób doszliśmy do punktu, w

2:13którym mamy poprawnie oznaczony typ naszego zdarzenia.

2:16W tej chwili też nic nie stoi na przeszkodzie, abyśmy w tym miejscu

2:19przekazali Unie typów i wykorzystali to zdarzenie nie tylko w

2:22przypadku buttonów, ale również elementów E.

2:25W tej sytuacji jednak musimy zabezpieczyć

2:27się na wypadek wystąpienia albo jednej, albo drugiej sytuacji.

2:31To znaczy przypisze sobie teraz nasz target do zmiennej i sprawdzę czy np.

2:35właściwość href wewnątrz niego istnieje.

2:37Jeżeli tak, to będę w stanie je odczytać, a w przeciwnym razie mam tutaj w zasadzie

2:41pewność, że mamy do czynienia z elementem typu button.

2:44Zatem tak jak widzisz, typowanie zdarzeń wybij akcję sprowadza się do tego, aby

2:48odwołać się do rodzaju zdarzenia, które ma tutaj miejsce.

2:51I to teraz.

2:52Jeżeli chodzi o rodzaje zdarzeń, to jest ich przynajmniej kilkanaście.

2:55Natomiast u nas w większości przypadków będą interesowały te trzy, czyli zdarzenia

2:59dotyczące formularzy, klawiatury oraz myszy.

3:01Oczywiście w niektórych przypadkach

3:03będziemy chcieli być bardziej specyficzni, aby jeszcze lepiej opisać typy zdarzeń.

3:07Natomiast w sytuacji, gdy staniesz np.

3:09przed implementacją event, to w zasadzie wystarczy Ci świadomość, że takie typy

3:13zdarzeń po prostu istnieją i wtedy będziesz mógł po nie sięgnąć.

3:16No i dodatkowo musisz pamiętać o tym, że jeżeli przygotowujesz handler do obsługi

3:21zdarzeń, które mogą zostać podłączone do różnego rodzaju elementów, to w takiej

3:25sytuacji musisz upewnić się, że masz do czynienia z konkretnym typem.

3:29Tutaj słowo kluczowe int sprawdza się

3:31doskonale do tego, aby sprawdzić, czy dana właściwość istnieje.

3:34Przykładowo, tak jak tutaj w aktualnie klikniemy tym elemencie.

3:38W tym wszystkim muszę jeszcze dodać, że

3:39nie tylko możemy dodawać typy do samego parametru zdarzenia, natomiast również

3:44możemy wykorzystać do tego, aby dodać typ do samego Chandlera.

3:49Czyli w tej sytuacji nie będziemy dodawać typu do parametru, tylko do całej funkcji.

3:54W takiej sytuacji sięgamy po React oraz Math Event Handler i swoją drogą

3:58analogicznie będziemy mieć tutaj handler dla obsługi zdarzeń, klawiatury czy np.

4:03formularza.

4:04Tak czy inaczej zwróćcie uwagę, że od razu do naszego elementu zdarzenia został

4:08przypisany nie tylko typ, ale również został do genetyka przekazany element.

4:12Oczywiście nic nie stoi na przeszkodzie, aby w niektórych przypadkach zostało to

4:15tak jak dokładnie jest tutaj opisane, ale analogicznie jak mieliśmy wtedy możemy

4:19tutaj przekazać odpowiednie typy poszczególnych elementów.

4:22W ten sposób otrzymujemy tutaj kompletną

4:24definicję typu naszego Chandlera i to, po której zapis sięgniesz tak naprawdę zależy

4:29od Ciebie, ale również od sytuacji, ponieważ czasem może zdarzyć się tak, że

4:33ten handler będzie gdzieś przekazywany i w takiej sytuacji pomocny może okazać się o

4:37typowanie całej funkcji, a nie tylko parametru zdarzenia.

4:41Jeżeli chodzi o obsługę zdarzeń w akcje to

4:43byłoby już na tyle, co chciałbym Ci powiedzieć.

4:45Zatem nie pozostaje mi nic innego jak zaprosić Cię do kolejnej lekcji.