React & TypeScript: Wprowadzenie

0:00Cześć, Witam Cię w kolejnym kursie serwisu.

0:02PL Ja nazywam się Adam Gospodarczych i tym razem będę miał okazję pokazać Ci jak

0:06wykorzystywać TypeScript w aplikacjach React.

0:09Zacznijmy od tego, że w tym kursie

0:10zakładam, że znasz już zarówno VI jak jak i przynajmniej podstawy tej.

0:14Natomiast jeżeli tak nie jest, bądź

0:15chciałbyś uzupełnić swoją wiedzę, odsyłam Cię do pozostałych kursów PPL dotyczących

0:20podstaw oraz wykorzystania BI jak ta w praktyce.

0:23I analogicznie do Twojej dyspozycji są też

0:25kursy wprowadzające do tego pakietu oraz kurs.

0:28Pokazuję techniki zaawansowane.

0:30Jeżeli to wszystko masz już za sobą i jesteś gotowy do tego, aby zacząć naukę

0:34z wykorzystaniem SWIFT u, to przede wszystkim zobaczmy dlaczego warto go

0:38wykorzystać oraz co czeka Cię w tym kursie.

0:40Jeżeli chodzi o sam skrypt, to jego najważniejszą zasadą jest to, aby pomagać

0:44nam wychwytywać błędy dotyczące typowania we wczesnym etapie developmentu.

0:49Zatem jeżeli w tej aplikacji dodamy sobie nowy komponent, a następnie wykorzystamy w

0:53naszej aplikacji, to w tej chwili wszystko jest w porządku, A jak wiemy komponenty

0:56funkcyjne muszą zwracać albo poprawny element GPX, ewentualnie NULL.

1:01Także jeżeli zamienimy tą wartość na NULL to wszystko będzie w porządku.

1:04Natomiast jeżeli z jakiegoś powodu zwrócimy tutaj string bądź np.

1:08wartość undefined, no to od razu mamy informację o błędzie sygnalizująca, że nie

1:12mamy tutaj do czynienia z poprawnym komponentem React.

1:15Przywrócimy sobie teraz tę zmianę, aby nie

1:17było tutaj żadnych błędów i jak widzisz mamy już korzyści płynące z wykorzystania

1:21tej skryptu, a tak naprawdę jeszcze nie do końca zaczęliśmy z niego korzystać.

1:25Jeżeli teraz utworzymy kolejny komponent,

1:27to znowu od razu mamy informację o błędzie, że nie mamy tutaj definicji

1:31takiego komponentu, zatem możemy ją teraz po prostu utworzyć.

1:34Taki komponent będzie przyjmował jakieś

1:36propsy, a następnie zwracał jest w postaci fragmentu g sex.

1:40I teraz co ciekawe, w naszym komponencie

1:42od razu pojawił się błąd mówiący o tym, że spodziewamy się nam oraz Message.

1:48Zatem jeżeli dodamy nasz błąd zniknie.

1:50Natomiast dalej mamy błąd znajdujący się tutaj.

1:53Ten z kolei informuje nas o tym, że mamy niejawny typ, a więc nie dodaliśmy typu do

1:58naszych procesów, co jest oczywiście prawdą i możemy to teraz naprawić.

2:02W tym przypadku utworzę interfejs zawierający definicje tych typów.

2:06No i jak widzisz nasze błędy zniknęły.

2:08Swoją drogą jeżeli chodzi o wykorzystanie

2:10interfejsów, to tutaj równie dobrze moglibyśmy wykorzystać aliasy typów.

2:14Jak wiesz istnieje trochę różnic pomiędzy nimi i generalnie interfejsy dają nam

2:18większą elastyczność, a aliasy typów są bardziej specyficzne.

2:22Ale tak naprawdę nie ma jakiejś

2:23szczególnej zasady mówiącej o tym, które z nich powinniśmy wykorzystywać.

2:27Według mnie dobrą decyzją jest po prostu

2:29podjęcie decyzji, a następnie zachowanie spójności bądź ewentualnie ustalenie

2:33konkretnych zasad, kiedy sięgamy po interfejsy, a kiedy po aliasy.

2:36W każdym razie, tak jak widzisz, dodaliśmy

2:38trochę kodu, a jednocześnie zyskaliśmy ogromną przewagę polegającą na tym, że

2:43przechwytuje błędy dotyczące typów już na bardzo wczesnym etapie developmentu.

2:47Oczywiście poruszamy się teraz bardzo prostym przykładzie, ale im dalej w las,

2:51tym więcej korzyści, ale jednocześnie poniekąd będzie to od nas nieco więcej

2:54wymagać i zresztą będę to pokazywał na przestrzeni kolejnych lekcji.

2:58Natomiast jeżeli chodzi o samą zawartość kursu, to to co nas czeka to sama

3:02konfiguracja typu I to zarówno w nowym, jak jej istniejącym projekcie React.

3:05Następnie przejdziemy sobie też szczegółowo przez opcje konfiguracji i

3:09możliwości, które mamy do dyspozycji, a potem zajmiemy się już typowanie psów,

3:13komponentów zarówno klasowych, jak i funkcyjnych oraz wykorzystaniem hubów.

3:17A na koniec zostawimy sobie eventy, formularze oraz samego DAX a.

3:21To wszystko pokaże Ci w praktyce, z naciskiem na to, abyś jak najszybciej

3:25wyciągnął maksimum wiedzy, która pomoże Ci wykorzystywać TypeScript w reakcjach.

3:29Tymczasem dzięki za uwagę i do usłyszenia w kolejnej lekcji.