TypeScript – pierwsze kroki. Podstawy korzystania z funkcji.

Przedstawiłem już typy danych i pokazałem jak tworzyć własne ich rodzaje. Kolejnym krokiem jest tworzenie typów poprzez klasy. Jednak zanim przejdę do tego tematu, muszę poświecić jeden post opisowi funkcji w TS.

Prawda jest taka, że korzystanie z funkcji w TypeScript to żadna filozofią. Średnio zaawansowana znajomość czystego JSa, wystarczy, żeby bez trudu pojąć o co chodzi. Jednak język ten posiada kilka dodatkowych mechanizmów o których warto widzieć.

korzystanie z funkcji w TypeScript

Mamy omówione już wszystkie podstawy, dzięki czemu mogę bez zbędnego pisania przejść prosto do przykładów. Na początek krótki fragment kodu, pokazujący jak tworzyć funkcje w TS:

Prawda, że funkcje w TS wyglądają bardzo podobnie jak te w JS? Przynajmniej na pierwszy rzut oka 🙂 . Najbardziej widoczną różnicą jest to, że teraz argumenty podane w nawiasie, mogą mieć określone typy. Jak w przypadku zmiennych, nie jest to konieczne, jednak naprawdę warto to robić. Oprócz tego, po nawiasie z argumentami, pojawia się kolejne określenie typu. Jest to typ zwracanej zmiennej. Jeżeli zmienna nie zwraca żadnej wartości w tym miejscu można podać typ void.

Tak jak w JS, funkcje mogą tworzone z podaną nazwą lub bez niej. W tym drugim wypadku przypisałem funkcję do zmiennej, TypeScript nie ma z tym żadnego problemu. Należy jednak pamiętać, że tak samo jak w JavaScripcie, wystąpi tu hoisting zmiennych. Dlatego jeżeli przypiszemy funkcję do zmiennej ale wywołamy ją przed tą deklaracją, pojawi się błąd.

W takim wypadku zmienną zadeklarować najlepiej na szczycie aktualnego scope’a, dzięki temu kod będzie bardziej czytelniejszy. Można by w pierwszej linijce napisać:

Taka deklaracja zadziała, jednak TS domyślnie przypisze tej zmiennej typ any. Tego nie chcemy. W takim razie jak stworzyć deklaracje zmiennej typu funkcja? Czy jest to w ogóle możliwe? #SUSPNENS … Jest 🙂 . Oto jak to zrobić:

Jako typ wpisuję parę zwykłych nawiasów, zawierających listę argumentów. W ten sposób TS nie tylko wie, że dana zmienna przechowywać będzie funkcję, ale wie też, jakich argumentów ma oczekiwać. Jeżeli funkcja przypisana do tej zmiennej będzie przyjmować inne argumenty, TS zgłosi błąd. Kolejny element tej deklaracji, ma dość nietypową składnię. Chodzi o tak zwaną ‚strzałkę’ czyli napisane po sobie znaki ‚równa się’ i ‚większe od’. Po strzałce należy wpisać, jaki typ zwraca funkcja. Jeżeli nie jest zwracany żaden typ, po strzałce wpisujemy void.

Co ciekawe, do takiej deklaracji, możemy od razu przypisać wartość:

Może to wyglądać bardzo dziwnie dla kogoś kto jest przyzwyczajony do składni JSa, ale uwierzcie mi, można się przestawić 🙂 .

W tym miejscu pojawia się mały problem. Co jeśli chcę aby moja funkcja przyjmowała różne ilości argumentów? Na szczęście TypeScript posiada mechanizm opcjonalnych parametrów. Wygląda to podobnie jak dodawanie opcjonalnych pól w interfejsie. Po nazwie argumentu, który jest opcjonalny, a przed dwukropkiem i typem, wpisujemy znak zapytania:

Argument name, jest opcjonalny. Nie musi pojawić się w wywołaniu funkcji. Oba poniższe wywołania, będą według TSa poprawne:

Ostatni mechanizm, który chciałbym pokazać w tej podstawowej prezentacji TypeScriptowych funkcji, jest zapożyczony bezpośrednio ze specyfikacji ES6. Mowa tu o domyślnych wartościach argumentów.

Dzięki tej opcji, możemy w definicji funkcji, podczas wypisywania argumentów podać domyślną ich wartość. Jeżeli taka funkcja zostanie wywołana, bez danych argumentów, użyta zostanie podana wartość.

Tak wyglądałaby powyższa funkcja, gdyby argumentowi name przypisać domyślną wartość:

Tak to wygląda jeśli chodzi o podstawowe informacje na temat używania funkcji w TypeScripcie. Jak widać nie są to zagadnienia specjalnie skomplikowane. Wystarczy trochę popracować z nową składnią i można bardzo szybko nabrać wprawy w używaniu jej.

Na koniec, jak zawsze, zachęcam do polubienia mojej strony na facebooku. Zawsze na bieżąco zamieszczam tam informacje o nowościach, więc warto polubić aby nie przegapić żadnego nowego wpisu.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *