0:00 / 0:00

React & TypeScript: Istniejący projekt

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:00W tej lekcji pokażę Ci w jaki sposób skonfigurować swój start.

0:03W zasadzie podłączyć go do istniejącego, który jak.

0:06W tym celu mamy tutaj bardzo prosty projekt.

0:08Jest to po prostu projekt wygenerowany z pomocą AP.

0:12Natomiast zawiera takie podstawowe komponenty i jednocześnie jest świetnym

0:15przykładem do tego, aby podłączyć do niego taczkę.

0:18Zatem w pierwszej kolejności musimy zainstalować odpowiednie zależności.

0:22Przede wszystkim musimy zainstalować

0:23samego klienta oraz odpowiednie definicje typów.

0:26Dla noda, React, DOM oraz biblioteki jest o ile z nich korzystamy.

0:31W momencie gdy to zrobimy, kolejnym krokiem będzie zamiana plików.

0:34Jest na rozszerzenie ts ext.

0:36Dokładnie analogicznie jak mieliśmy to w poprzednich lekcjach.

0:39Zatem teraz wykorzystując magię kina dokładnie to teraz zrobię.

0:43W tym momencie wszystkie zależności

0:44zostały zainstalowane, a rozszerzenia plików zostały zmienione.

0:47Ostatnim krokiem jaki nam tutaj pozostał

0:49jest wygenerowanie pliku konfiguracyjnego ts config.

0:53W momencie gdy taki plik się pojawia ma taką podstawową konfiguracja.

0:56Natomiast ja teraz wkleję swoją

0:58konfigurację, którą dołączam do zasobów tej lekcji.

1:01Tak naprawdę nie jest to moja

1:02konfiguracja, tylko po prostu podałem ją z sieci i wykorzystuję w swoich projektach.

1:07Znajdziesz tutaj również opisy poszczególnych właściwości i tak naprawdę

1:10to co powinieneś zrobić to przede wszystkim skupić się na tym, aby

1:13dostosować to, jak surowo będzie tutaj interpretował nasz kod.

1:17Przykładowo, jeżeli nasz projekt jest rozwinięty, to będziemy chcieli stopniowo

1:21integrować z nim tej płyty, w związku z czym będziemy chcieli wyłączyć np.

1:26po to, aby nasz projekt w ogóle się uruchomił.

1:28Dodatkowo mamy tutaj opcję no limit, którą

1:31ustawiam na to ze względu na to, że nie chcę aby to skrypt przetwarzał mój

1:35projekt, tylko żeby zajął się tym skonfigurowany już jak scripts.

1:39Zatem sytuacja wygląda tak, że teraz prawdopodobnie możemy po prostu uruchomić

1:42nasz projekt i zobaczyć czy wszystko jest w porządku.

1:45Wygląda na to, że mamy tutaj błąd

1:46znajdujący się w pliku index TSS, w którym wywołujemy funkcję Report Web Site.

1:52Jeżeli teraz podajemy sobie błąd, to

1:53zobaczymy, że oczekiwany jest tutaj jeden argument.

1:56Nie przekazujemy żadnego.

1:57Zatem tak jak mówi komentarz, możemy

1:59przekazać tutaj chociażby console log, ale to również nie rozwiąże naszego

2:03problemu, a przynajmniej rozwiązało 1, ale stworzyło kolejne.

2:06Jeżeli przejdziemy sobie do definicji tej

2:08funkcji, to zobaczymy, że przekazywany tutaj parametr nie posiada żadnego typu.

2:13No i będziemy musieli go dodać.

2:15Tylko pytanie co tutaj dokładnie musimy podać?

2:17Wiemy, że przekazaliśmy tam funkcję, więc

2:19jeżeli ustawię teraz tutaj typ na function, no to otrzymujemy tutaj kolejny

2:24błąd, który informuje nas o tym, że potrzebujemy tutaj raport Chandlera.

2:28Czyli generalnie mamy tutaj jasną

2:30informację o typie, który musimy wykorzystać w momencie, gdy to zrobimy.

2:34Dostajemy błąd informujący nas o tym, że musimy ten typ zaimportować i w przypadku

2:38IntelliJ, z którego aktualnie korzystam jak widzisz wystarczyło wcisnąć skrót

2:41klawiszowy Command Center i skorzystać z dostępnej funkcji.

2:45Teraz jeszcze mamy mały Warning

2:46informujący nas o tym, że ten typ nie jest tutaj wymagany ze względu na to, że na

2:50pewno mamy tutaj do czynienia z report bledem.

2:53W związku z tym pozbyliśmy się wszystkich błędów i jesteśmy gotowi do tego, aby

2:57dalej kontynuować pracę nad rozwojem naszej aplikacji.

3:00Oczywiście im bardziej złożona aplikacja,

3:02tym więcej pracy musimy włożyć wytypowanie naszego kodu.

3:05Natomiast zwracam jeszcze raz uwagę na to,

3:07aby ewentualnie posłużyć się tutaj opcjami, które zmniejszą wrażliwość

3:11skryptu i pozwolą nam na większą elastyczność.

3:14Oczywiście zachęcam do tego, aby z czasem

3:16włączać kolejne opcje i pokrywać z typami kolejne fragmenty naszej aplikacji.

3:20Natomiast to już będzie działo się

3:21stopniowo, z czasem i w zależności od możliwości, którymi dysponujesz.

3:26Jeżeli chodzi o samą konfigurację

3:28TypeScript, to w projekcie jak to byłoby na tyle?

3:30A ja zapraszam Cię teraz do kolejnej lekcji.