React & TypeScript: useEffect
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 przyjrzymy się temu, jak wygląda typowanie hooka us.
Efekt, który wykorzystywany jest do tego, aby wykonywać różnego rodzaju akcje,
które naturalnie wykonywali byśmy w metodach links, czyli np.
komponent Bid Update.
Zatem utworzymy teraz nowy komponent.
Będzie to komponent fetch, do którego będziemy przekazywać jakiś adres URL,
analogicznie jak było to w jednym z poprzednich przykładów.
No i teraz wyobraźmy sobie, że chcemy połączyć się z jakimś API i pobrać z niego
dane pochodzące dokładnie z tego adresu URL, który przekazaliśmy jako props.
Takie dane będziemy chcieli pobrać właśnie z wykorzystaniem hooka use efekt, wewnątrz
którego wykonamy naszą funkcję i wykonamy jakieś operacje na tych danych.
Na koniec jeszcze tutaj przekazuje
zależności i tutaj tak naprawdę jedyne co zostało nam do zrobienia to po prostu
opisanie procesów przekazanych do tego komponentu.
Zatem utworzymy teraz nowy interfejs opisujący właściwość URL.
Mogłoby się wydawać, że na tym nasza praca
się kończy, ponieważ skrypt nie ostrzega nas przed jakimkolwiek kolejnym błędem.
Natomiast chciałbym zwrócić Twoją uwagę na jeden mały fakt.
W przypadku US Effect spodziewamy się
tego, aby ta funkcja przyjmowała callback, który nie zwraca żadnej wartości.
Więc jeżeli tutaj zwrócimy tak naprawdę
cokolwiek, otrzymamy błąd skryptu informujący nas o tym, że nie możemy tego
zrobić, ponieważ pracujemy tutaj z efekt callback, który spodziewa się tego, że nie
będziemy tutaj zwracać wartości, bądź ewentualnie zwrócimy tutaj kolejną
funkcję, która jest z kolei sama w sobie również nie może zwracać żadnej wartości.
Zatem albo nie zwracamy tutaj nic, albo
zwracamy funkcję, która nie będzie zwracać żadnej wartości.
W ten sposób mamy pewność, że posługujemy się tutaj właściwymi typami i
jednocześnie, że we właściwy sposób wykorzystujemy w hooka just Efekt.
Oczywiście sama implementacja, jak
widzisz, jest tutaj bardzo robocza, natomiast to nie zmienia faktu, że jego
praktyczne wykorzystanie wygląda dokładnie w taki sposób.