TypeScript: Ograniczenia generyczne

3.9+

0:00Kontynuując temat typów generycznych musimy porozmawiać o tzw.

0:04ograniczeniach generycznych.

0:06Chodzi o to że w niektórych sytuacjach

0:09chcemy aby typy generyczne nie dopasowywały się automatycznie do każdego typu tylko do

0:15tych przez nas wybranych bądź takich które posiadają konkretne właściwości.

0:21Weźmy na przykład funkcję która będzie

0:23zwracać nam długość tablicy bądź ciągu znaków.

0:26Parametrem jest tutaj wspomniany ciąg znaków bądź tablica a zwracaną wartością

0:31liczba. W tym momencie TypeScript oczekuje od nas tego abyśmy określili typ danych więc

0:38możemy powiedzieć że będzie to string lub tablica.

0:42No i teraz tę funkcję możemy wykonać zarówno na tablicy jak i ciągu znaków.

0:47Wszystko działa poprawnie.

0:48No może z tą różnicą że mamy tutaj typ any.

0:52Moglibyśmy to doprecyzować i wstawić np.

0:55number lub jeszcze lepiej skorzystać z typu

0:57generycznego. W takiej sytuacji zwróć uwagę, że w tym miejscu nawet nie musiałem

1:02podawać tutaj typu number ponieważ TypeScript samodzielnie był w stanie go określić.

1:06No i teoretycznie wszystko tutaj działa

1:09poprawnie, ale jak doskonale wiesz właściwość length mogą posiadać różne inne

1:13obiekty nawet takie zdefiniowane przez nas.

1:16W takiej sytuacji nasza funkcja nie do końca zadziała.

1:19I właśnie rozwiązaniem tego problemu są ograniczenia generyczne.

1:24Możemy tutaj po prostu ustawić typ

1:26przekazanego parametru na typ generyczny ale jednocześnie wyżej stworzymy sobie

1:31tutaj interfejs w którym stworzymy typ zawierający właściwość length.

1:37Dzięki temu możemy wykorzystać go w

1:39ograniczeniu generycznym wykorzystują słowo kluczowe extendeds.

1:44Taki zapis oznacza, że przekazany przez nas typ musi być zgodny z interfejsem length.

1:50A ten interfejs dba tylko o to aby przekazane dane posiadały właściwość length.

1:55Dlatego też w tej sytuacji wszystko działa poprawnie zarówno z tablicami tekstem oraz

2:00dowolnym i innymi obiektami które będą tylko posiadały tę właściwość.

2:05Dodatkowo jeżeli pamiętasz to z lekcji o

2:07interfejsach. Możemy korzystać z wielu różnych interfejsów.

2:11Różnicą jest jednak to że nie podajemy

2:14kolejnego interfejsu po przecinku tylko wykorzystujemy znak &.

2:19W tej sytuacji wystarczy tylko, że zdefiniuję ten dodatkowy interface.

2:23No i wszystko będzie w porządku. No może

2:25poza tym, że nasza funkcja przestała tutaj działać dla przekazanego ciągu znaków

2:30a wynika to z faktu że string w przeciwieństwie do tablicy

2:33nie posiada wbudowanej metody filter. Tak, że wszystko jest w porządku a my

2:39uzyskaliśmy bardzo generyczną funkcję, która przyjmuje dane posiadające wyłącznie

2:43te wartości, które określiliśmy w interfejsach.

2:46Tego typu wykorzystanie ograniczeń

2:49generycznych może być przydatne chociażby w przypadku komponentów w React.js

2:53które przyjmują poszczególne propsy bądź state.

2:56Dzięki temu jesteśmy w stanie sprawdzić czy oczekiwane przez nas procesy

3:00faktycznie zostały przekazane, albo czy mają odpowiedni kształt czyli np.

3:05pod napisem length znajduje się faktycznie liczba. Podkreślę tutaj tylko jeden mały

3:10fakt mianowicie w tym przypadku skorzystaliśmy z ograniczeń generycznych w

3:14przypadku funkcji ale tak jak powiedziałem w poprzedniej lekcji genetyki możemy

3:19stosować również z interfejsami, klasami itd.

3:22Zresztą myślę że mogę pokazać Ci to na jednym przykładzie.

3:26Mamy tutaj klasę song która posiada dwie właściwości tytuł oraz rok wydania.

3:31Możemy też napisać funkcję która będzie przyjmować ten utwór a następnie zwracać

3:36ciąg znaków zawierający informacje o tym utworze.

3:39I teraz wystarczy że otworzymy nowy obiekt

3:42na podstawie tej klasy a następnie wywołany naszą funkcję.

3:46I faktycznie wszystko działa poprawnie.

3:49Ale znowu chcąc uczynić naszą funkcję bardziej generyczną chciałbym również aby

3:54pracowała ona z obiektami posiadającymi właściwości title oraz year.

3:59Ale jeżeli byłeś uważny przy okazji

4:01poprzedniego kursu wspomniałem tam o tym że TypeScript nie będzie miał problemu jeżeli

4:06przekażemy do funkcji getInfo która spodziewa się typu song.

4:10Dowolny inny obiekt który kształtem pasuje do naszego utworu.

4:16Jak widzisz wszystko działa poprawnie.

4:18I tak TypeScript w żaden sposób nie informuje

4:20nas o tym że cokolwiek tutaj nie gra. No bo faktycznie wszystko jest w porządku.

4:25Powodem jest oczywiście sposób porównywania typów w TypeScripcie czyli tzw.

4:30Duck-Typing.

4:31TypeScript zakłada że skoro przekazany obiekt posiada te właściwości no to nie powinno

4:36być problemu z tym aby tę funkcję tutaj wywołać.

4:40Jeżeli jednak chcielibyśmy zastosować

4:42tutaj typ generyczny aby wszystko wyglądało nieco bardziej poprawnie

4:45moglibyśmy tutaj zastosować słowo kluczowe extendeds.

4:50Na klasie song.

4:51Dzięki temu jeżeli tutaj wstawię literki T no to znowu wszystko będzie w porządku

4:57i zarówno w przypadku gdy przekażemy utwór TypeScript będzie wiedział że mówimy

5:01tutaj o klasie song a z kolei gdy przekażemy tutaj dowolny

5:05inny obiekt no to TypeScript również będzie o tym poinformowany.

5:09Bo jeżeli teraz wrócimy do sytuacji którą mieliśmy przed chwilą czyli sytuacji w

5:14której getInfo spodziewało się typu song to nawet pomimo tego że przekazaliśmy

5:19tutaj obiekt który nie jest instancją klasy song no to dalej tutaj TypeScript jest

5:24przekonany że jednak jest to utwór także raz jeszcze musisz zapamiętać tyle, że

5:29wykorzystanie typów generycznych oraz ograniczeń generycznych może być związane

5:34zarówno z interfejsami funkcjami oraz klasami.

5:38Na sam koniec może pojawić Ci się pytanie

5:40kiedy w ogóle korzystać z typów generycznych.

5:43Na to pytanie odpowiadają dwa scenariusze.

5:46Pierwszy z nich mówi o sytuacji, w której

5:48funkcja interfejs lub klasa muszą współpracować z różnego rodzaju typami

5:53danych których z jakiegoś powodu nie jesteś w stanie określić np.

5:57unią bądź po prostu nie chcesz tego robić ze względu na to że tych typów jest tak

6:01dużo. A drugim scenariuszem jest przypadek który widzieliśmy w poprzednim odcinku to

6:07znaczy mamy tutaj klasę która wykorzystuje konkretny typ w wielu różnych miejscach.

6:12Dzięki temu że zastosowaliśmy tutaj typ generyczny możemy wykorzystywać go z

6:17powodzeniem w wielu różnych miejscach i nawet w sytuacji gdy ten typ będzie się

6:21zmieniał na przestrzeni dalszego rozwoju aplikacji to dalej będzie to typ

6:25generyczny, więc modyfikacja takiego kodu będzie zdecydowanie prostsza.

6:31Na ten moment jeżeli chodzi o ograniczenia generyczne to już wszystko.

6:35A ja zapraszam Cię do kolejnej lekcji.