React & TypeScript: Komponenty generyczne

0:00Podczas gdy wiemy już, w jaki sposób

0:01wykorzystywać te typy w przypadku komponentów funkcyjnych oraz klasowych.

0:06Musimy iść dalej i zobaczyć, jak to

0:08wygląda chociażby na przykładzie komponentów generycznych.

0:11Tutaj sytuacja nieco się różni, ponieważ zbudujemy tutaj nieco bardziej

0:15zaawansowany komponent, który będzie wyświetlał nam Select box, przy czym

0:19będziemy mogli pracować na niego z danymi różnego typu.

0:22Zacznijmy od tego, aby zdefiniować sobie

0:24nasz nowy komponent, który będzie formularzem wyświetlający nasz Select box.

0:29Wewnątrz tego komponentu musimy mieć dostępne opcje, które normalnie będą

0:33pochodziły z bazy danych, a w tym przypadku wystarczy nam kodowana tablica.

0:37Następnie wykorzystamy juz stado do tego, aby wykorzystać tutaj możliwość ustawienia

0:41stanu w momencie gdy będziemy wybierać jakąś konkretną opcję.

0:45No i ostatecznie wyświetlamy nasz formularz, a w zasadzie element, który

0:49będzie zawierał jakiś tytuł oraz nasz Select box.

0:52Sam Select box będzie tutaj przyjmować

0:54propsy takie jak Options, czyli dokładnie tablicę, którą mamy tutaj.

0:58Następnie value, czyli nasz aktualny stan i ostatecznie zdarzenie on Change, które

1:03będzie przekazywane do niego tak aby po zmianie opcji zaktualizował się nasz stan.

1:08No to teraz nie pozostaje nic innego jak utworzyć komponent Select.

1:12Jeżeli chodzi o ten komponent, to tak

1:14naprawdę znowu mamy komponent funkcyjny, do którego przekazujemy propsy, które za

1:18chwilę sobie zdefiniujemy, ale zaczniemy od tego, aby wyświetlić jego zawartość.

1:22Będzie to po prostu element HTML typu SELECT, którego wartość ustawimy na

1:27przekazany tutaj props oraz oczywiście będziemy reagować na zmianę opcji

1:32odwołując się do metody update, którą za chwilę sobie utworzymy.

1:36Jeżeli chodzi o jego zawartość to będziemy tutaj wyświetlać opcje, które również będą

1:40pochodziły z procesów, a konkretnie będą pochodziły z tego miejsca.

1:44Zatem w momencie gdy skorzystamy tutaj z

1:46opcji map, one zostaną wyświetlone, o ile umieścimy je w odpowiednim elemencie HTML.

1:51No to teraz nie pozostaje nic innego jak

1:54utworzyć metodę Update value, która zajmie się tym, aby pobrać aktualnie wybrany

1:58element, następnie odnaleźć go na liście dostępnych opcji i w ten sposób uzyskamy

2:04dostęp do właściwości Value, a tym samym odwołując się do

2:08Change będziemy w stanie wykonać dokładnie tą metodę i zaktualizować nasz stan.

2:13Zatem sytuacja teraz wygląda tak, że wszystko jest tutaj kompletne,

2:17natomiast naszym zadaniem jest teraz dodanie tutaj typów.

2:20Sytuacja raczej nie jest tutaj bardzo

2:22skomplikowana ze względu na to, że w pierwszej kolejności musimy zadbać o to,

2:25aby dodać typ naszej wybranej opcji i w tym przypadku będzie to string.

2:30Następnie musimy utworzyć typ opisujący obiekty, które znajdują się tutaj.

2:34Czyli mamy tutaj do opisania dwie właściwości typu string, więc nie ma tutaj

2:38żadnych wyzwań przed nami, a następnie musimy określić również typ

2:42dla psów przekazywanych do komponentu Select.

2:45Jeżeli chodzi o te propsy, mamy tutaj do typowania Options Value oraz On Change.

2:50Jeżeli chodzi o nas, jest to tablica zawierająca obiekty, które posiadają

2:54dokładnie taką strukturę, więc zapisuję to w ten sposób.

2:57Następnie mamy właściwość Value i będzie to String.

3:00No i ostatecznie mamy metodę część, która

3:02przyjmuje string jako parametr, a następnie nie zwraca nam żadnej wartości,

3:06czy też będąc bardziej konkretnym zwraca wartość undefined.

3:10No to teraz musimy wykorzystać utworzone typy przekazując je w następujący sposób.

3:15Przede wszystkim do genetyka przekazujemy

3:17owszem value, aby upewnić się, że mamy tutaj do czynienia ze wynikiem.

3:21Następnie, jeżeli chodzi o propsy,

3:23przekazujemy tutaj interfejs, który określiliśmy w tym miejscu.

3:27No i ostatecznie mamy jeszcze błąd dotyczący samego zdarzenia.

3:30Jak wiemy, mamy tutaj do czynienia ze zdarzeniem związanym z formularzem Wy.

3:35Zatem odwołujemy się do oby jak form event, a następnie do genetyka.

3:39Przekazujemy element, z którym pracujemy i

3:41w tym przypadku będzie to element typu SELECT.

3:44Zatem odwołujemy się do klasy HTML select element.

3:47Jeżeli chodzi o obsługę zdarzeń na razie się tym nie przejmuj, ponieważ o tym

3:50będziemy mówić w jednej z kolejnych lekcji.

3:52W każdym razie jesteśmy teraz w punkcie, w którym wszystko nam się tutaj zgadza i

3:56nawet będziemy mogli wykorzystać tutaj nasz formularze.

3:59W tym momencie, jeżeli przykładowo

4:01zmienimy tutaj wartość któregoś z elementów na typ np.

4:04number, to okaże się, że mamy tutaj błąd,

4:07ponieważ przekazaliśmy tutaj typ, który nie jest dozwolony.

4:10Natomiast sytuacja tutaj wygląda tak, że chciałbym utworzyć tutaj komponent

4:14generyczny i generyczny na tyle, aby przyjmował nie tylko opcje zawierające

4:19ciągi znaków jako klucze, ale również liczbę.

4:22Czyli zmienimy teraz zestaw naszych danych

4:24na taki, który będzie posiadał liczby jako klucze.

4:27No i oczywiście mamy tutaj błąd.

4:29Natomiast rozwiązaniem tego problemu nie

4:31będzie tutaj zamiana typu string na number, ale upewnienie się, że nasz

4:35komponent może przyjmować zarówno jeden, jak i drugi typ danych.

4:38Tutaj sytuacja się nieco komplikuje, bo przykładowo w tym miejscu będziemy musieli

4:42wykorzystać typ generyczny, który możemy przekazać w tym miejscu i musimy się tylko

4:47upewnić, że będzie on ograniczony do typu określonego obszar.

4:51Zatem mamy tutaj możliwość przekazania albo ciągu znaków lub ewentualnie liczbę.

4:56Idąc dalej mamy błąd poniżej, ponieważ wykorzystujemy tutaj ten.

4:59Interfejs, natomiast nie przekazujemy typu do genetyka.

5:03Z tego powodu znowu tutaj musimy przekazać nasz typ.

5:06No i tak samo tutaj musimy zastosować analogiczną opcję.

5:09No i w tym momencie dochodzimy do punktu, w której wykorzystujemy tutaj gierek do

5:13tego, aby móc przekazać go do naszych psów.

5:16I w tym momencie ostatnią jeszcze rzeczą, którą musimy tutaj zrobić jest zamiana na

5:20typ generyczny dokładnie tych typów String.

5:23I w tym momencie wszystkie błędy, które mieliśmy tutaj zniknęły.

5:26I mało tego, nawet jeżeli podmienię teraz

5:29zestaw tych danych, to dalej wszystko będzie tutaj absolutnie w porządku.

5:33Zatem jak widzisz, wykorzystaliśmy tutaj

5:35nieco bardziej zaawansowane wykorzystanie typów, ale w dalszym ciągu opieraliśmy się

5:40praktycznie wyłącznie o wiedzę pochodzącą z poprzednich lekcji.

5:43Może za wyjątkiem obsługi zdarzeń.

5:45Zatem tak jak widzisz, wykorzystanie page

5:46skryptów reakcję nie stanowi jakiegoś większego problemu.

5:50O ile rozumiemy te najbardziej podstawowe

5:52zasady dotyczące typowania procesów oraz komponentów.

5:55Nie oznacza to jednak, że kończymy w tym

5:57miejscu, ponieważ zapraszam Cię do kolejnej lekcji.