React & TypeScript: Typy formularzy

0:00W tej lekcji pokażę Ci, w jaki sposób dodawać typy w przypadku formularzy.

0:04Zatem w pierwszej kolejności utwórzmy

0:06sobie jakiś prosty formularz, który będzie posiadał dwa pola EM, pole email oraz pole

0:11Name, a następnie oczywiście przycisk Submit.

0:13I teraz wysłanie takiego formularza będzie uruchamiało specjalną akcję,

0:17Zatem proponuję, abyśmy ją sobie teraz zdefiniowali.

0:20Będzie to prosta funkcja, do której

0:22będziemy przekazywać zdarzenie wysłania naszego formularza i będzie to oczywiście

0:26w formie event, do którego przekazujemy typ elementu form.

0:30Wewnątrz tej funkcji będziemy zajmować się obsługą samego formularza i przykładowo na

0:34coś takiego będzie składać się odczytanie wartości pola email.

0:41Musimy zaimportować typ form event bezpośrednio z zbijaka, a następnie

0:45otrzymujemy tutaj błąd informujący nas o tym, że właściwość i mail nie istnieje

0:49wewnątrz typu wewnątrz typu naszego eventu.

0:52Rzeczywiście tak jest, więc musimy w jakiś sposób o to zadbać.

0:55W tym celu utworzymy sobie nowy interfejs.

0:58Niech będzie to filtr, wewnątrz którego umieścimy dwie właściwości.

1:01Pierwszą z nich będzie e-mail up.

1:03To go mam zarówno w pierwszym, jak i w drugim przypadku.

1:06Będziemy tutaj wykorzystywać HTML input element a.

1:09Oczywiście jeżeli mielibyśmy do czynienia np.

1:11z text aria, to analogicznie moglibyśmy to określić w ten sposób.

1:15I teraz mając tak przygotowany interfejs musimy wykorzystać esencję oraz interfejs

1:20typu asercji po to, aby powiedzieć, że nasz event target tak naprawdę posiada

1:24specjalny typ składający się z typu event target oraz interfejsu in Files.

1:30No dobra, to teraz jeszcze.

1:31W ten sposób określiliśmy, że Event Target

1:34jest typu składającego się z typu event Target oraz interfejsu API Filter.

1:39I tutaj jeszcze wykorzystaliśmy operator

1:41typeof do tego, aby pobrać typ Event Target.

1:45W ten sposób uzyskaliśmy odpowiednie połączenie i dzięki temu, jeżeli teraz

1:49wykorzystamy podpowiedzi naszego IDE, to rzeczywiście mamy tutaj dostępne pole,

1:53w przypadku których mamy też dodatkowe informacje dotyczące samego ich typu.

1:58Oczywiście w przypadku formularzy im

2:00bardziej rozbudowany formularz, tym trudniej.

2:02Natomiast ogólna zasada typowania

2:03formularzy sprowadza się właśnie do tego, co właśnie pokazałem.

2:07Czyli w pierwszej kolejności dbamy o to, aby typować handler naszego formularza,

2:11bądź też handler jakiejś akcji, która dzieje się na którymś z elementów, ale

2:15również możemy wykorzystać bardziej zaawansowane techniki do tego, aby ułatwić

2:19sobie pracę, chociażby tak jak w tym przypadku z Event Target.

2:23Przykładowo mogłoby się zdarzyć tak, że do naszego elementu email chcielibyśmy

2:27dorobić jakąś walidację sprawdzającą już podczas wpisywania czy mamy do czynienia z

2:32adresem email, czy jego format jest niepoprawny.

2:35W takiej sytuacji tworzymy prostą funkcję,

2:37której typ ustawimy jako Change event handler, ponieważ jest to zdarzenie

2:41zmiany, a następnie przekażemy do niej HTML input element.

2:45I to oczywiście wynika z faktu, że mamy tutaj input element.

2:48Następnie, jeżeli tylko wykorzystamy

2:50parametr Event podane tutaj w script zinterpretuje jego odpowiedni typ.

2:54No i wewnątrz tej funkcji możemy dokonać odpowiedniej walidacji.

2:58Zatem jak widzisz w przypadku typowania formularzy sprawdza się tutaj w zasadzie

3:02cała wiedza, którą zdobyliśmy na przestrzeni ostatnich lekcji.

3:05Teraz już dziękuję Ci za uwagę i zapraszam Cię do kolejnej lekcji.