React & TypeScript: PropTypes

0:00Teraz zajmiemy się wykorzystaniem typów w przypadku prob tips.

0:03Swoją drogą, jeżeli wiemy, że tips służą nam do tego, aby upewnić się, że dany

0:07komponent otrzyma konkretne propsy, to tak naprawdę po co nam one, skoro

0:11wykorzystujemy skrypt, który zasadniczo robi to samo?

0:14Cała różnica polega na tym, że TypeScript chroni nas na etapie developmentu.

0:18A jeżeli chodzi o prop tips, one są również wykorzystywane na etapie runtime.

0:22W praktyce rekomendowane jest to, że

0:24jeżeli korzystamy z text skryptu to po prop tips sięgamy tylko w sytuacji, gdy

0:28tworzymy jakąś zewnętrzną bibliotekę i chcemy upewnić się, że np.

0:31osoba, która nie będzie wykorzystywać pages skryptu również będzie miała

0:35zapewnione odpowiednie bezpieczeństwo typów.

0:37Zatem zobaczmy teraz jak to może wyglądać w praktyce.

0:40Na początek proponuję, abyśmy utworzyli sobie dwa komponenty.

0:43Będą to bliźniacze komponenty, przy czym jeden będzie funkcyjny, a drugi klasowe.

0:48Pokazuję to po to, aby w sytuacji, gdy

0:50będziesz miał jeszcze do czynienia z komponentami klasowymi, po prostu aby było

0:53dla Ciebie jasne, w jaki sposób pracować z props.

0:56Zwróć uwagę, że tutaj props podajemy

0:59dokładnie jako właściwość statyczną dla tej klasy.

1:02W przypadku komponentu funkcyjnego, podobnie jak w przypadku Default,

1:05po prostu podajemy je jako właściwość Prototype.

1:09Zatem sytuacja wygląda teraz tak, że mamy

1:11tutaj mnóstwo błędów, więc na początek importujemy sobie tutaj klasę.

1:14Aby pozbyć się tych najprostszych, a następnie musimy zainstalować bibliotekę

1:18Prop Tabs i jednocześnie utworzyć odpowiednie obiekty oraz interface.

1:23Zatem importujemy je tutaj.

1:25I swoją drogą widzę już, że paczka jest

1:27już zainstalowana, więc ten krok możemy po prostu pominąć.

1:30Zatem utwórzmy sobie tutaj nowy obiekt

1:32zawierający poszczególne właściwości naszego komponentu.

1:35Będzie to właściwość title, która będzie wymagana jednocześnie będzie z treningiem,

1:40a więc właściwość duration, która będzie liczbą i nie będziemy jej wymagać.

1:44No i ostatecznie mamy właściwość platform, która będzie tablicą stringów i również

1:48zarówno elementy, jak i sama tablica będzie tutaj wymagana.

1:52No to teraz mamy załatwione już jeden

1:54temat i rzeczywiście nasze komponenty w momencie, gdy spróbujemy je tutaj

1:57wykorzystać, będą oczekiwały tego, aby podać tutaj odpowiednie propsy.

2:01Natomiast na ten moment nie widzimy tutaj

2:03tego błędu, ponieważ właśnie działa na etapie Rampage.

2:07A jeżeli utworzymy sobie interfejs, to

2:09zabezpieczymy ja również na etapie developmentu.

2:12Zatem tutaj sytuacja wygląda tak, że

2:14tworzymy interfejsy i jak zwykle podajemy odpowiednie właściwości oznaczając

2:18właściwość domyślną oraz odpowiednio tablicę stringów.

2:21No i teraz jeżeli już wykorzystujemy nasz komponent, to faktycznie widzimy tutaj, że

2:26wymaga on podania tych wszystkich wymaganych właściwości.

2:29Zatem będziemy tutaj posłuszni i po prostu je dodamy.

2:32No i teraz widzimy, że wszystko jest w porządku, niezależnie od tego, czy

2:35wykorzystamy zarówno pierwszy, jak i drugi komponent.

2:38Natomiast trzeba zwrócić tutaj uwagę na

2:40jedną małą rzecz i nie mam tutaj na myśli dodania metody render.

2:43Chodzi o to, że przykładowo jeżeli sprawimy, że tutaj właściwość tańca będzie

2:48opcjonalna, to jeżeli ją usuniemy z naszego

2:50komponentu, to tak naprawdę na tym etapie nie będziemy mieć tutaj żadnego błędu.

2:55A już jeżeli uruchomimy naszą aplikację, to okaże się, że mamy tutaj błąd.

2:59I teraz powiększy się nieco ekran, aby wszystko było widoczne.

3:02I rzeczywiście otrzymaliśmy tutaj informacja o tym, że brakuje nam tutaj

3:06title ze względu na to, że w przypadku komponentu mówi jest on oznaczony jako

3:10wymagane, a w tej chwili jest ustawione na undefined.

3:13To się oczywiście zgadza, ponieważ zadbaliśmy o to dokładnie w tym miejscu.

3:17Zatem teraz widzisz doskonałą różnicę pomiędzy wykorzystaniem props a pomiędzy

3:21typowanie z wykorzystaniem pay To take chroni nas tutaj na etapie developmentu

3:26oraz ewentualnie budowania naszej aplikacji.

3:29Natomiast props chronią nas w przypadku uruchomienia aplikacji.

3:32No i znowu wracamy do tego, że w przypadku

3:34wykorzystania tej skryptu nie warto do końca korzystać z prop tabs, aczkolwiek

3:38mogą zdarzyć się do tej reguły wyjątki i warto mieć to na uwadze.

3:42Jeżeli chodzi o to by było na tyle.

3:44Dziękuję za uwagę i zapraszam do kolejnej lekcji.