React & TypeScript: useRef
Podstawy
1 godz. 31 min · Typescript · Full-stack i Programowanie
Adam GospodarczykCzego się nauczysz
- Konfiguracja TypeScript w React
- Typowanie propsów
- Typowanie komponentów (również klasowych)
- Typowanie hooków (również własnych)
- Typowanie zdarzeń i formularzy
- Dodawanie typów do Redux
Co daje TypeScript?
TypeScript umożliwia opisanie naszego kodu typami oraz wychwytywanie dotyczących ich błędów na wczesnym etapie developmentu. W efekcie wykorzystanie TypeScript'u w projekcie podnosi jego jakość i zmniejsza ryzyko pomyłek, które mogą być nie wychwycone na etapie testowania lub mogą pojawić się dopiero w środowisku produkcyjnym.
TypeScript & React
Z pomocą Reacta tworzymy coraz bardziej złożone aplikacje w których ryzyko popełnienia błędów jest wysokie. TypeScript nie tylko je zmniejsza ale również wpływa pozytywnie na tzw. developer experience (doświadczenia programisty) poprzez to, że nasze IDE "wie więcej" na temat kodu który piszemy. A to z kolei przekłada się na lepszą wydajność i komfort pracy.
Bariera wejścia
Przy założeniu że znamy już samego Reacta oraz TypeScript, połączenie tych dwóch umiejętności jest stosunkowo proste. Wystarczy poznać ogólne zasady typowania propsów, komponentów oraz hooków aby z powodzeniem móc wykorzystywać zalety płynące z posiadania typów w naszym kodzie. W tym kursie dowiesz się jak to zrobić, w najszybszy możliwy sposób.
Informacje które pomogą Ci zacząć
Kurs został przygotowany tak aby na prostych przykładach pokazać Ci w jaki sposób wykorzystywać TypeScript w projektach React.js. Jeżeli szukasz źródła które pozwoli Ci szybko zacząć - jesteś w dobrym miejscu.
Najważniejsze zasady i dobre praktyki
Materiał zawiera dobre praktyki i sugestie dotyczące wykorzystania TypeScript'u oraz konfiguracji środowiska pracy (np. IDE) oraz ustawień samego projektu. Jest to wiedza którą możesz wykorzystać również w przypadku pracy z innymi technologiami.
Dla kogo jest ten kurs?
Kurs został przygotowany z myślą o osobach, które znają już React oraz TypeScript i chcą dowiedzieć się w jaki sposób połączyć te umiejętności. Materiał niemal całkowicie pomija informacje na temat mechanizmów Reacta oraz TypeScript'u. Jeżeli potrzebujesz poszerzyć swoją wiedzę na ich temat, zapraszamy Cię do naszych pozostałych kursów.
W tej lekcji przechodzimy do typowania kolejnego Chucka.
W tym przypadku będzie to juz rew.
Jak wiesz służy do tego, aby móc odnosić
się do konkretnych elementów bezpośrednio w naszym komponencie.
Zatem utwórzmy sobie teraz komponent C3,
wewnątrz którego umieścimy prosty formularz zawierający input wyszukiwania.
I tutaj przypiszemy sobie a o nazwie input ref.
W momencie gdy go teraz utworzymy wykorzystując wew.
Początkowo będziemy musieli go zainicjować wartością NULL.
Wynika to z faktu, że rzeczywiście na
samym początku mamy tutaj null, a dopiero potem odniesienie do tego input.
Następnie wykorzystamy tutaj hooka efekt
do tego, aby odwołać się do wartości tego RV.
Tak naprawdę spotykamy tutaj pewien problem.
Problem ten polega na tym, że skoro na samym początku mamy tutaj wartość null, no
to musimy sprawdzić czy ten node w ogóle istnieje.
Zatem z pomocą IF weryfikujemy jego jego
właściwość current i jeżeli ta wartość jest prawdziwa, czyli mamy odniesienie do
naszego input, a możemy wykonać na nim jakąś konkretną akcję.
Natomiast jak widzisz dalej mamy tutaj
błąd, ponieważ tak naprawdę nie wiesz z jakim elementem mamy do czynienia.
W momencie gdy jedziemy na nasz input to
znajdziemy tutaj definicje typu html input element i to właśnie jego musimy przekazać
do naszego hooka i dzięki temu błędy tutaj znikną, a my
ewentualnie możemy skrócić ten zapis wykorzystując składnie Optional Binding.
Zatem znowu uwierz lub nie, ale jeżeli
chodzi o typowanie, to tak naprawdę byłoby na tyle.
To co trzeba tutaj zapamiętać to fakt, że do genetykę musimy przekazać tutaj
odpowiedni typ elementu, do którego podłączamy defa, a następnie w momencie
gdy po niego sięgamy, musimy upewnić się, że rzeczywiście on już istnieje.
Jeżeli zadbamy o jedno i drugie, tak
naprawdę jesteśmy w domu i nie musimy robić nic więcej.
Zatem nie ma już tutaj o czym mówić, więc przechodzimy do kolejnej lekcji.