React & TypeScript: useState

0:00W tej lekcji przechodzimy do typowania chórków i zaczynamy od Stage.

0:04Co prawda spotkaliśmy się z nimi już na przestrzeni poprzednich lekcji, natomiast

0:07tym razem przyjrzymy się jemu nieco bliżej.

0:10Zacznijmy od tego, że utworzymy sobie

0:11tutaj komponent Counter, który będzie posiadał stan przechowujący sam licznik.

0:16No to nie pozostaje nic innego jak zdefiniować ten komponent i wykorzystamy

0:19tutaj komponent funkcyjny, wewnątrz którego skorzystamy z Hooka State.

0:23Tak jak powiedziałem, przechowujemy tutaj

0:25aktualny stan licznika i dodatkowo stworzymy metodę, która będzie reagować na

0:29kliknięcie przycisku i jednocześnie zwiększać nasz counter.

0:33Zatem ostatnią rzeczą, o którą musimy tutaj zadbać jest ładowanie naszego

0:37przycisku oraz aktualnego stanu naszego licznika.

0:40W tym momencie jedynym błędem, który tutaj mamy jest fakt, że nie zaimportować

0:44naszego hooka, ale w momencie gdy to zrobimy nagle okaże

0:47się, że tak naprawdę niczego dodatkowego tutaj od nas nie oczekuje.

0:51Co prawda dodaliśmy tutaj definicję typu dla eventów, natomiast jeżeli chodzi o sam

0:56stan, no to jeżeli sprawdzimy, to rzeczywiście tips domyślił się na

1:00podstawie domyślnej wartości, że mamy tutaj do czynienia z liczbą.

1:04Zatem za każdym razem, gdy będziemy

1:05przekazywać tutaj jakąś inną wartość, otrzymamy błąd.

1:09Jest to dobra wiadomość ze względu na to, że nie wymaga to od nas dodatkowego

1:12zaangażowania, a jednocześnie zyskujemy tutaj na bezpieczeństwie typów.

1:17Oczywiście mogą zdarzyć się sytuacje, w

1:18których na przykład w stanie przechowujemy dane, które na początku są Nole.

1:23Zatem w takiej sytuacji tekst nikt już nie

1:25domyśli się odpowiednio naszego typu i musimy mu tutaj w tym pomóc.

1:30Wystarczy, że w tym celu wykorzystamy

1:31zapis genetycznej i przekażemy tutaj number lub NULL.

1:35W tym momencie nasza sytuacja zaczyna się

1:37tutaj zmieniać, aczkolwiek ten konkretny przykład nie jest dostosowany do tego,

1:40abyśmy mogli przechowywać tutaj wartość null, ponieważ tutaj ją implementujemy.

1:45Zatem tak naprawdę chodzi tylko o to, abyś

1:48wiedział, że w sytuacji, gdy inicjalizacja stanie jakąś inną wartością, to po prostu

1:52wykorzystując zapis genetyczny możesz tutaj przekazać odpowiedni typ.

1:56W naszym przypadku nie będzie to potrzebne i tak naprawdę możemy w ogóle usunąć tutaj

2:00definicje typów i za nic zasiać nasz licznik.

2:03Dodam jeszcze, że oczywiście też nic nie stoi na przeszkodzie.

2:06Robiliśmy to w poprzednich lekcjach, aby przekazać tutaj dowolne np.

2:10aliasy typów bądź też interfejs.

2:12Dzięki temu uzyskujemy dodatkową elastyczność, bo np.

2:15może okazać się, że będziemy tutaj wykorzystywać podwójny zapis genetyczny

2:19do tego, aby odpowiednio opisać dane przechowywane w naszym stanie.

2:23Ostatecznie jednak myślę, że jest to dość

2:24oczywiste i nie będziemy się tutaj zgłębiać jeżeli chodzi o samo typowanie.

2:30To byłoby na tyle.

2:31Zatem proponuję, abyśmy zobaczyli w

2:33kolejnych lekcjach jak typować kolejne huki.