React & TypeScript: Typowanie propsów

0:00W tym momencie przechodzimy już do wykorzystania skryptów reakcję i zaczniemy

0:04od tego, w jaki sposób możemy typować propsy komponentów.

0:08Mamy tutaj konfigurację naszej aplikacji i

0:10wewnątrz pliku SPC utworzymy sobie katalog components i wewnątrz niego utworzymy

0:14sobie nowy komponent o nazwie Used List PSX.

0:17No i teraz interesuje nas to, aby utworzyć

0:19faktycznie ten komponent z jakąś podstawową zawartością.

0:23I tutaj jeszcze aby wszystko było w porządku musimy zaimportować jako element

0:27i o typować i konkretnie oznaczyć co dokładnie zwraca nam ta funkcja.

0:31Oczywiście normalnie nie musimy tego robić, ponieważ skrypt sam jest w stanie

0:34się tego domyślić, natomiast w tym przypadku wymaga tego od nas link.

0:38Oczywiście nic nie stoi na przeszkodzie, aby po prostu tą opcję wyłączyć.

0:42Z tego powodu skopiuję ją teraz i

0:44przejdziemy do pliku konfiguracyjnego, a następnie ustawimy ją na wyłączoną.

0:49W ten sposób nasz błąd zniknie i nie

0:50będziemy musieli dodawać tutaj czegoś, czego faktycznie być nie musi.

0:54No i teraz wyobraźmy sobie, że zamiast

0:56elementu Eli będziemy wyświetlać tutaj lista użytkowników.

0:59Sam użytkownik będzie dodatkowym

1:01komponentem, który zdefiniujemy sobie tutaj.

1:03I aby to wszystko działało teraz

1:05poprawnie, musimy określić dokładnie, jakie propsy są tutaj przyjmowane.

1:08W tym momencie jest to imię i mail oraz ewentualnie Done.

1:12Od razu widzimy, że mamy tutaj błąd wynikający z tego, że musimy nadać

1:16odpowiednie typy temu poszczególnym właściwością.

1:18Zatem jeżeli chodzi o imię będzie to string.

1:21Jeżeli chodzi o email również.

1:23Natomiast sama tablica będzie tablicą stringów.

1:26W momencie gdy zapisujemy plik wszystko

1:28tutaj działa poprawnie i możemy uzupełnić zawartość naszego komponentu.

1:32Załóżmy, że będzie wyglądać ona następująco.

1:35Jak widzisz mamy tutaj wyświetlenie

1:37imienia, adresu email oraz wylosowanych ról z tego użytkownika.

1:41Zatem w ten sposób dodaliśmy typy do naszych props.

1:44Natomiast muszę przyznać, że jest to dość

1:46mało czytelne i zdecydowanie nie polecam robić tego w ten sposób, no może

1:50wyłączając naprawdę pojedyncze przypadki bardzo prostych komponentów.

1:53Zdecydowanie lepiej jest wykorzystać tutaj

1:55interfejs I od razu tutaj zaznaczę, że jeżeli chodzi o nazwy interfejsów w formie

2:00jaką tutaj widzisz, czyli mamy tutaj poszczególne słowa napisane wielkimi

2:04literami oraz sama nazwa interfejsu poprzedzona jest wielką literą i dzięki

2:08temu wiemy, że mamy do czynienia z interfejsem.

2:11Jeżeli chodzi o sam zapis poszczególnych właściwości tego interfejsu, to tak

2:14naprawdę nawet wskazane jest, aby wykorzystywać tutaj komentarze zapisane w

2:18formule Test, dzięki czemu zyskamy tutaj dodatkowe możliwości.

2:22Oczywiście ja teraz zapiszę tutaj

2:24poszczególne właściwości naszego interfejsu, natomiast różnica jaką tutaj

2:28mamy będzie widoczna po najechaniu na konkretną właściwość.

2:31Konkretnie musimy teraz wykorzystać ten nasz interfejs i w momencie gdy mamy nasze

2:36propsy okazuje się, że mamy tutaj również opis tego konkretnego komentarza.

2:40Zatem ja osobiście w większości przypadków

2:42spotykam się z opiniami, że dodawanie komentarzy w kodzie jest raczej

2:46niepożądane i powinniśmy pisać kod tak, abyś zapisywał się sam.

2:50I po części jest to oczywiście prawda.

2:52Natomiast jednocześnie warto uwzględnić,

2:54że w przypadku tego skryptu możemy na tym niesamowicie dużo zyskać.

2:57Oczywiście w tym przypadku może ten

2:59komentarz nie jest absolutnie tutaj wymagany, ale wyobrażam sobie, że w

3:02przypadku niektórych właściwości może okazać się bardzo przydatny.

3:06Zatem tak jak widzisz, jeżeli chodzi o

3:08wykorzystanie procesów, możemy dodać je z pomocą interfejsu bądź aliasu typu.

3:13I oczywiście jeżeli tutaj popełnimy jakiś

3:15błąd i przekażemy niewłaściwy typ, to od razu otrzymujemy konkretną informację.

3:19No i tak samo, jeżeli będziemy chcieli wykorzystać ten komponent ponownie,

3:23no to w tym przypadku IntelliJ jest na tyle mądry, że możemy dodawać poszczególne

3:27właściwości i on dokładnie powie nam, czego się tutaj spodziewa.

3:31Zatem po najechaniu na poszczególne

3:32fragmenty naszego kodu mamy tutaj jasną informacja o tym, co tutaj dokładnie się

3:36dzieje, co jest oczekiwane i jaki ewentualnie błąd tutaj popełniliśmy.

3:41Jeżeli chodzi o komponenty funkcyjne, to trzeba wspomnieć, że są to tak naprawdę

3:44zwykłe funkcje zwracające element geje sex lub null.

3:47Natomiast co ciekawe, w momencie gdy nie

3:49dodamy w tym przypadku żadnego typu do naszej funkcji, rzeczywiście taki skrypt

3:53jest w stanie domyślić się, że mamy do czynienia z komponentem React.

3:57Natomiast nic nie stoi na przeszkodzie,

3:59abyśmy wykorzystali tutaj komponent o nazwie FC.

4:02Konkretnie jest to typ pochodzący jak

4:04widzisz bezpośrednio z samego DI, jak i w momencie gdy go importujemy.

4:08Możemy przekazać propsy w następujący sposób.

4:10Czyli zamiast robić to tutaj, przekazujemy je do genetyka.

4:14W ten sposób otrzymaliśmy tutaj jeszcze

4:15dodatkowe błędy, ale one pochodzą akurat nie z taksówek tu, tylko z S.

4:20Linda, informujące nas o tym, że nie dokonaliśmy tutaj walidacji procesów.

4:24W tym momencie możemy albo zignorować te

4:26linie lub ewentualnie dodać je do naszego pliku konfiguracyjnego.

4:32W każdym razie wracając do tej, to

4:34typowanie komponentu funkcyjnego w taki sposób ma pewne zaletę, ale również wadę.

4:39Okazuje się, że jeżeli wykorzystamy tutaj

4:42proxy filtrem, no to nagle okaże się, że posiada on określony typ.

4:46I nie otrzymujemy tutaj błędu pochodzącego z sufitu.

4:50Oznacza to, że typ tej właściwości został

4:52tutaj nadany właśnie ze względu na to, że wykorzystaliśmy tutaj typ FC.

4:56Oczywiście nic nie stoi na przeszkodzie,

4:58abyśmy po prostu określili, że mamy tutaj do czynienia ze string

5:01I swoją drogą od razu ta informacja jak widzisz tutaj się zmienia.

5:04Natomiast znowu jest to coś, o czym trzeba będzie pamiętać i z tego względu wiele

5:08osób preferuje ten wcześniejszy zapis jeżeli chodzi o typowanie.

5:13Natomiast z drugiej strony jak widzisz w momencie gdy nie będę wykorzystywał tego

5:17zapisu, to tutaj informacje o tych typach poszczególnych procesów wyświetlane

5:21bezpośrednio w moim edytorze po prostu zniknęły.

5:23One dalej są dostępne w momencie, gdy sobie na nie jedziemy.

5:27Natomiast tamta opcja może okazać się dla Ciebie bardziej czytelna.

5:30Znowu jest to kwestia preferencji i raczej

5:32poza tym co powiedziałem, nie ma różnicy pomiędzy jednym a drugim zapisem.

5:36Ostatnią rzeczą, o której chciałbym tutaj

5:37wspomnieć jest fakt wykorzystania właściwości opcjonalnych.

5:41Usunę sobie teraz tą właściwość filtrem i załóżmy, że przykładowo chcielibyśmy,

5:45aby właściwość Walls była ustawiona jako opcjonalna.

5:48W tej sytuacji w momencie gdy jej tutaj

5:50nie podamy, rzeczywiście nasze błędy znikają.

5:53Natomiast szybko okazuje się, że mamy

5:55tutaj ostrzeżenie, że ten obiekt może być ustawiony jako undefined.

5:59Ale na szczęście znowu nic nie stoi na przeszkodzie, abyśmy wykorzystali tutaj

6:03możliwość ustawiania domyślnych wartości dla parametru funkcji.

6:07Dzięki temu mamy tutaj początkowo pustą tablicę.

6:09Wszystkie błędy znikają, ponieważ

6:11faktycznie typy nam się zgadzają i nie ma możliwości wystąpienia błędu.

6:15Zatem jak widzisz, w momencie, gdy mamy do czynienia z opcjonalnym procesami,

6:19to zdecydowanie warto pamiętać jeszcze o tym, aby ustawić ich domyślne wartości.

6:23Oczywiście ewentualnie moglibyśmy

6:25zastosować tutaj jakiegoś IFA i też wszystko byłoby w porządku.

6:28Natomiast to znowu zależy od sytuacji, w której się znajdujemy.

6:32Jeżeli chodzi o wprowadzenie do typowania

6:34wzorców, to byłoby już na tyle, więc słyszymy się za chwilę w kolejnej lekcji.