React & TypeScript: Children

0:00Zbliżamy się do momentu, w którym będziemy kończyć typowanie klapsów, natomiast

0:03musimy zwrócić jeszcze dodatkową uwagę na strzelbę.

0:07Jak już zdążyliśmy zauważyć, potrafią

0:09stworzyć trochę problemów ze względu na to, że jeżeli utworzymy sobie komponent

0:13funkcyjny, a następnie skorzystamy z typu akcji, to jak powiedziałem wcześniej

0:17dojdziemy do sytuacji, że jeżeli wykorzystamy teraz ten komponent map,

0:21okaże się, że możemy przekazać tutaj dowolny typ komponentu.

0:24Czyli byłem i nie będzie z tym najmniejszego problemu.

0:27Natomiast problem tutaj istnieje, ponieważ raczej nie chcemy oddawać kontroli nad

0:31typami, chyba że chcemy skorzystać z impedancji typów.

0:34W tym przypadku dochodzi do nie jawnego

0:36przypisania typów i z tego powodu możemy chcieć np.

0:39zabezpieczyć się przed tym, aby do naszego komponentu nie można było przekazać.

0:44Ewentualnie może zdarzyć się tak, że np.

0:46będziemy chcieli, aby posiadało określony typ, np.

0:50typ string. W takiej sytuacji w momencie gdy

0:52przekażemy nasz interfejs tutaj do genetyka.

0:56No to pojawi nam się błąd, ponieważ tutaj mamy element HTML, a nie string.

1:00Dopiero w tym momencie wszystko zaczyna być tutaj w porządku.

1:03Natomiast co w sytuacji, jeżeli

1:05chcielibyśmy przekazać tutaj zamiast stringa również number?

1:08Czyli moglibyśmy wykorzystać unie typów i połączyć je w ten sposób.

1:12I to również byłoby ok, ponieważ jeżeli

1:14przekażę tutaj jakąś liczbę, również nie otrzymamy żadnego błędu.

1:18Natomiast alternatywnie mógłbym skorzystać tutaj z typu react text.

1:21Jest on jak widzisz zaimportowany

1:23bezpośrednio z biblioteki VI i dodatkowo oznacza dokładnie to co zapisałem przed

1:27chwilą, czyli jest to unia typów String lub Number.

1:30Idąc dalej może się okazać, że faktycznie

1:33będę chciał umieścić tutaj element HTML albo tekst, albo liczbę.

1:37W takiej sytuacji, jeżeli umieścimy tutaj

1:39div zawierający ciąg znaków, no to oczywiście mamy błąd.

1:42Natomiast wystarczy, że skorzystamy z typu react element i w takiej sytuacji możemy

1:47przekazać element HTML, ale już jeżeli przekażemy np.

1:50ciąg znaków, to niestety pojawi się błąd.

1:53No to w tym momencie możemy iść dalej i znowu wykorzystać w tym przypadku chwilę.

1:58W momencie, gdy importujemy ten typ, okaże się, że mamy tutaj

2:02do dyspozycji albo wspomniany wcześniej jak ten element, czyli dowolny element G,

2:07cx lub alternatywnie jak tekst, czyli ciąg znaków bądź liczbę.

2:11Zatem w tym momencie nic nie stoi na przeszkodzie, abyśmy przekazali tutaj ciąg

2:15znaków, liczbę bądź też dowolny element HTML.

2:18Natomiast jeżeli zajdzie tutaj sytuacja,

2:20że przekazaliśmy tutaj wartość NULL, to niestety będziemy mieć problem.

2:24Może zdarzyć się tak, że będziemy tego oczekiwać.

2:27W związku z tym moglibyśmy tutaj dodać

2:29znowu unię typów lub ewentualnie skorzystać z typu react node.

2:33Zatem jeżeli importujemy teraz ten typ, okaże się, że możemy tutaj umieścić albo

2:38jak site ewentualnie wartości logiczne null bądź undefined.

2:42No i tutaj mamy jeszcze jak portal.

2:44W każdym razie nie wiem czy zauważyłeś.

2:47Natomiast mamy następujące zasady.

2:49Jeżeli chodzi o połączenie typu string oraz number wykorzystujemy React.

2:54Jeżeli chodzi o połączenie react element

2:56oraz jak tekst to wykorzystujemy do jak height.

3:00A jeżeli chcemy połączyć wszystkie poniższe i jeszcze dodać do nich wartości

3:03logiczne null lub undefined wykorzystujemy je jak node.

3:07I tak naprawdę w kontekście ar jak czas.

3:09To jest dokładnie to, co powinieneś zapamiętać.

3:12No i ewentualnie jeżeli korzystamy z

3:13function component w ten sposób, to musimy pamiętać, że definicja typów jest dodawana

3:18tutaj niejawnie i możemy ją po prostu napisać.

3:21Jeżeli chodzi o ten temat to byłoby już na tyle.

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