React & TypeScript: Komponenty funkcyjne

0:01W tej lekcji przechodzimy już do typowania komponentów i tak naprawdę z komponentów

0:05funkcyjnych już zdarzyło nam się korzystać.

0:07Natomiast teraz przejdziemy sobie krok po

0:08kroku przez wszystkie elementy, o których musisz wiedzieć.

0:12Zatem znowu zaczynamy tutaj od zera i

0:14utworzymy sobie tutaj nowy komponent funkcyjny.

0:17Tak naprawdę w tym momencie możemy już go

0:19wykorzystać, ponieważ mamy tutaj zwykłą funkcję i gdy wykorzystując impedancję

0:24typów domyślił się, że mamy tutaj do czynienia z komponentem funkcyjnym.

0:28Mało tego, od razu zabezpiecza nas na wypadek, gdyby np.

0:31ta funkcja zwróciła undefined bądź nie zwróciła żadnej wartości.

0:35No to wtedy będziemy mieć błąd informujący

0:37nas o tym, że nie mamy tutaj do czynienia z komponentem.

0:40Ponieważ tak jak już powiedziałem,

0:42komponent musi zwracać albo poprawne elementy g sex lub ewentualnie null.

0:47Natomiast idąc dalej możemy tutaj

0:48przekazać również propsy i tak długo, dopóki nie określimy, że spodziewamy się

0:53takich procesów w naszym komponencie, będziemy otrzymywać tutaj błąd.

0:57Zatem jeżeli tutaj jak myślę, że spodziewam się tutaj

1:00tekst, a następnie określa jego typ, no to wszystko wraca do normy.

1:05I swoją drogą zwróćcie uwagę co tutaj zrobiłem.

1:08Chciałem zwrócić tutaj bezpośrednio tekst,

1:10a jeżeli po prostu zostawię to w ten sposób, to otrzymamy tutaj błąd, ponieważ

1:14tekst nie jest poprawnym elementem, że jest tekst.

1:17Z tego powodu najprostszym możliwym

1:19rozwiązaniem jest właśnie opakowanie tego, co zwracamy z naszego komponentu.

1:23Fragment, a właściwie zapis skrótowy.

1:26W ten sposób nie otrzymujemy tutaj błędu,

1:28a efekt końcowy jest dokładnie taki, jakbyśmy się tego spodziewali.

1:32Następnie wspominając już o tym, że w

1:34przypadku komponentów funkcyjnych możemy określić ich typ za pomocą Function

1:38komponent I jest to specjalny typ, który importujemy bezpośrednio z ACTA.

1:43W tym momencie okazuje się, że mamy tutaj błąd, ponieważ w tej sytuacji typy props

1:47przekazujemy wykorzystując zapis generyczny.

1:50No i teraz ponownie wszystko wróciło do normy.

1:53Tutaj raz jeszcze tylko podkreślam, że w

1:54takiej sytuacji, w momencie gdy wykorzystujemy function component

1:58niejawnie otrzymujemy bonus w postaci typowania.

2:03Czyli jeżeli teraz wykorzystali byśmy,

2:05no to nie otrzymujemy tutaj żadnego błędu, a nie zawsze jest to oczekiwane.

2:09Z tego powodu w momencie, gdy wykorzystuję

2:11komponenty funkcyjne, raczej korzystam z tego poprzedniego zapisu, czyli po prostu

2:15określenia typu parametrów tej funkcji dosłownie w taki sposób.

2:19Dzięki temu, jak widzisz jasno mamy tutaj błąd informujący nas o tym, że właściwość

2:23hidden nie znajduje się w naszym typie i tak długo, dopóki nie określimy jej typu,

2:28nie będziemy mogli z niej skorzystać, co oczywiście może uchronić nas przed

2:32jakimiś dodatkowymi błędami w tej sytuacji.

2:36Ostatnim elementem, który możemy zrobić

2:38jest po prostu wyciągnięcie definicji typów procesów do np.

2:42interfejsów bądź aliasu typu.

2:44Zatem jeżeli teraz określimy typ, a

2:46następnie przekażemy go tutaj, no to definicja naszego komponentu

2:50funkcyjnego jest kompletna i jedyne co musimy tutaj zrobić to usunąć zawartość

2:55tego komponentu, ponieważ nie wykorzystujemy tutaj children.

2:58Uwierz lub nie, ale jeżeli chodzi o

3:00wykorzystanie komponentów funkcyjnych tak naprawdę to byłoby na tyle.

3:04Ale oczywiście, wszystko to, co powiedziałem teraz, należy połączyć z

3:07wiedzą zawartą w poprzednich lekcjach, dotyczącą typowania wzorców.

3:11Tymczasem z mojej strony to już wszystko i słyszymy się za chwilę w kolejnej lekcji.