0:00 / 0:00

React & TypeScript: Własne hooki

Podstawy

1 godz. 31 min · Typescript · Full-stack i Programowanie

Adam Gospodarczyk

Czego 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.

0:00Doszliśmy właśnie do ostatniej lekcji na

0:01temat hacków i tym razem pokażę Ci jak typować własne huki.

0:05Zatem przede wszystkim musimy utworzyć nasz własny hook, który będziemy

0:09wykorzystywać do tego, aby przyjmować jakąś wartość początkową i ją odwracać.

0:14Dla uproszczenia niech będzie to wartość logiczna.

0:17Następnie wewnątrz takiego hooka musimy wykorzystać w tym przypadku ustawkę do

0:21tego, aby ustawić aktualny status naszego przełącznika.

0:24Kolejnym elementem będzie funkcja

0:26zajmująca się tym, aby odwrócić naszą wartość, a ostatecznie zwrócimy tutaj

0:30wartość oraz naszą funkcję do przełączenia.

0:33No i teraz jeżeli spróbujemy wykorzystać

0:36naszego hooka przekazując do niego wartość początkową ustawioną na false.

0:40No to teraz jeżeli wykorzystamy te wartości do tego, aby wyświetlić aktualny

0:44status naszego przełącznika i oczywiście przycisk tutaj pozwoli nam go przełączyć,

0:48to okaże się, że w momencie gdy będziemy wykorzystywać Active to niestety nie

0:53będziemy w stanie zrobić tego w sposób bezpośredni.

0:56Otrzymujemy tutaj błąd typu I.

0:57Aby sobie z tym poradzić, możemy zrobić tak naprawdę dwie rzeczy.

1:01Pierwszą z nich jest dodanie tutaj typu,

1:03które jest Wracamy z naszej funkcji w taki oto sposób.

1:06Otóż mamy tutaj tablicę zawierającą dwa elementy.

1:08Pierwszym z nich jest wartość logiczna, a

1:11drugą funkcja, która nie zwraca żadnej wartości.

1:13Jak widać błąd w tej chwili znikną i wszystko jest w porządku.

1:17Aczkolwiek ja mam jeszcze inny sposób, który być może Cię zainteresuje.

1:21Mianowicie zamiast określać typ zwracany przez nas hook, możemy tutaj wykorzystać

1:25składnie as const, dzięki czemu sprawiamy, że wartości naszej tablicy są tylko do

1:29odczytu i tym samym nie ma problemu, aby wykorzystać je w tym miejscu.

1:33Zatem jeżeli chodzi o typowanie własnych

1:35łuków warto pamiętać o tym, aby określić typ zwracany przez nasz łuk lub

1:39ewentualnie wykorzystać je do tego, aby zamienić naszą wartość na

1:43const i tym samym ustawić jej wartości jako tylko do odczytu.

1:47I w ten oto sposób doszliśmy już do końca tematu dotyczącego typowania łuków.

1:51I tym samym nie pozostaje mi nic innego jak zaprosić Cię do kolejnej lekcji.