TypeScript: Typy funkcji

3.8+

0:00Funkcje, podobnie jak inne rodzaje danych, mogą posiadać swój typ.

0:04Jak to dokładnie wygląda w TypeScripcie dowiemy się w tym odcinku.

0:07Zacznijmy od tego, że zdefiniujemy tutaj funkcję wykorzystując function expression.

0:12Z tą różnicą jednak, że nie przejdziemy

0:14od razu do definiowania samej funkcji, tylko na początku określimy jej typ.

0:19Jak sama nazwa wskazuje funkcja ta będzie zamieniać liczbę na tekst,

0:23w związku z tym musi przyjąć jakiś

0:24parametr. No i tym parametrem w tym przypadku będzie liczba.

0:28Następnie, warto by było żebyśmy określili co taka funkcja może zwracać.

0:32I tutaj również z pomocą arrow function możemy to zdefiniować.

0:36Dzięki temu mamy jasno określone, że ta funkcja będzie przyjmować parametr, który

0:41będzie liczbą a następnie będzie zamieniać go na ciąg znaków.

0:45Zwróć uwagę, że mamy tutaj let, czyli

0:47podkreślam, że jest to po prostu zmienna. Więc teraz nic nie stoi na przeszkodzie,

0:52abym teraz do tej zmiennej przypisał tę funkcję, której typ już określiliśmy.

0:56No i funkcja ta przyjmuje parametr, który

0:59jest liczbą a następnie zwraca tekst. Zwróć uwagę, że w związku z tym, że w tym

1:03miejscu określiłem typ tej funkcji, TS automatycznie wie, że tym parametrem

1:08jest liczba a następnie, że ta funkcja zwraca tekst.

1:11Więc jeżeli tutaj zwrócilibyśmy po prostu liczbę no to mielibyśmy błąd.

1:17A tak TypeScript po prostu dba o to, abyśmy

1:19zachowali poprawny typ. I teraz wywołując tę funkcję otrzymuje właściwy wynik.

1:25Także z tego przykładu musisz wiedzieć,

1:27że możemy określać typy parametrów i zresztą robiliśmy to już niejednokrotnie oraz

1:32również możemy określać jakiego rodzaju dane może zwracać funkcja.

1:36Dzięki temu mamy pełną kontrolę nad danymi,

1:38które wchodzą do funkcji i nad danymi, które z niej wychodzą.

1:42Poza tym zyskujemy tutaj ogromną przewagę w momencie, gdy używamy tych funkcji,

1:47bo możemy łatwo podejrzeć w jaki sposób możemy z niej korzystać.

1:51Mam nadzieję, że na ten moment jest to dla Ciebie jasne.

1:53Zresztą jest to dość intuicyjne.

1:56Przejdźmy jednak do innego, nieco bardziej złożonego przykładu, w którym zdefiniujemy

2:00z pomocą słowa kluczowego type strukturę obiektu Song.

2:04Będzie on miał właściwości takie jak ID oraz podstawowe informacje o utworze.

2:08Następnie będzie nam potrzebna mała

2:10tablica utworów - będzie ona pełnić funkcję małej bazy danych.

2:14Do tego, abyśmy mogli stworzyć funkcję,

2:16która będzie aktualizować te wpisy. W tym celu definiuję nowy typ i znowu odwołuję

2:22się do słowa kluczowego type, dzięki któremu mogę określić sam typ i w tym przypadku

2:27będzie to typ funkcji. Zrobię to analogicznie jak w tym miejscu,

2:31przy czym zdefiniowanie tego typu w ten

2:33sposób umożliwia mi podłączenie go do jakiejkolwiek funkcji chcę.

2:37No ale przejdźmy już do jego definicji.

2:39Funkcja ta będzie przyjmować dwa argumenty.

2:41Będzie to identyfikator utworu oraz dane, które chcemy zaktualizować.

2:45Następnie funkcja ta może zwracać dwa rodzaje danych.

2:49W przypadku gdy utwór zostanie poprawnie

2:51zaktualizowany, zwrócę tutaj zaktualizowany obiekt tego utworu.

2:55W przeciwnym razie będzie to wartość false.

2:58Więc jak widzisz wykorzystałem tutaj

3:00union type, który świetnie się tutaj sprawdził. I tym samym mam już wszystko,

3:04żeby przejść do zdefiniowania naszej funkcji.

3:07Tutaj po prostu zaczynam od zadeklarowania

3:09zmiennej, która będzie przyjmować typ naszej funkcji.

3:12Następnie do tej zmiennej przypisuję

3:14funkcję, przyjmującą dwa argumenty i ponownie zwracam Twoją uwagę, że tutaj już

3:18nie muszę określać typu, ponieważ zrobiłem to przed chwilą.

3:22Wewnątrz tej funkcji musimy dokonać

3:24weryfikacji czy utwór o podanym identyfikatorze w ogóle istnieje.

3:28Dlatego też musimy odnaleźć jego indeks.

3:30Do znajdowania obiektów tablicy świetnie sprawdza się funkcja findIndex. Po prostu

3:35do jej call backu przekazuję odpowiedni warunek i zostanie nam zwrócony indeks

3:40elementu, którego identyfikator będzie pasował do naszego argumentu.

3:44Drugim krokiem tutaj będzie sprawdzenie czy w ogóle ten utwór został odnaleziony.

3:49Jeżeli tak to aktualizujemy ten wpis przekazanymi danymi.

3:52I tutaj oczywiście nie dokonujemy żadnej

3:55walidacji, ale na potrzeby tego przykładu nie ma to akurat znaczenia.

3:59W każdym razie w momencie gdy utwór

4:01nie zostanie znaleziony, zwracamy tak jak wspomniałem wcześniej wartość false.

4:05No i w tym momencie mamy pięknie

4:07zdefiniowaną funkcję, którą w momencie gdy będziemy używać i przekażemy do niej

4:11jakieś dane, które nie pasują do tego układu,

4:14od razu TypeScript będzie nas o tym informował.

4:17Mało tego, jeżeli nawet przekażemy odpowiedni argument, no to w dalszym ciągu

4:22TypeScript informuje nas o tym, że nie możemy tutaj przypisać takiego obiektu.

4:26A gdyby nam było tego mało to od razu mamy

4:28też informację jakiego rodzaju właściwości taki obiekt musi posiadać.

4:32Dlatego też wystarczy, że zmienię wywołanie tej funkcji i wszystko będzie w porządku.

4:38Mamy tutaj nawet potwierdzenie tego, że dane faktycznie zostały zaktualizowane.

4:42Dodatkowo jeżeli chcielibyśmy to możemy

4:45sprawdzić czy utwory faktycznie zostały zaktualizowane. No i już na pierwszy rzut

4:50oka mamy tę informację, że faktycznie tak się stało.

4:53Zatem nasza funkcja zadziałała a my

4:55wykorzystaliśmy podstawowe zalety definiowania typów funkcji.

4:59W tym temacie na ten moment będzie to już wszystko.

5:02Jednak przygotuj się na to, że wielokrotnie będziemy do tego wracać i przyglądać się

5:07temu jak wyglądają typy funkcji w różnego rodzaju przypadkach.

5:11Na ten moment to wszystko i mam nadzieję, że słyszymy się za chwilę.