TypeScript – pierwsze kroki. Tworzenie własnych typów danych. Interfejsy i enumeratory.

W ostatnim poście pokazałem jak korzystać z podstawowych typów danych w TypeScript. Omówiłem takie typy jak string, number i boolean. Wspomniałem też o rzadziej używanych any oraz void.

Dziś pokażę jak tworzyć własne typy, w końcu większość programów w JS składa się przede wszystkim z obiektów, które tworzymy sami.

TypeScript własne typy danych

Wśród typów danych, które wymieniałem w ostatnim poście nie pojawił się typ obiektu. Może to się wydawać dziwne, w końcu to najpopularniejszy rodzaj danych jaki można spotkać w JavaScripcie. Spokojnie, jeżeli zwróciliście na to uwagę, to bardzo dobrze.

Obiekty są typami tworzonymi przez programistów. Możemy dla każdego rodzaju obiektu stworzyć osobny typ. Są trzy sposoby na utworzenie nowego typu: interfejsy, enumeratory oraz klasy. Dziś przedstawię dwa pierwsze podejścia. Na zagadnienie klas poświęcę osobny wpis.

Interfejsy

Interfejsy powinny być znajome każdemu kto programował w takich językach jak Java lub C#. W dużym uproszczeniu, są to szablony, do których przypasowywane są później obiekty. Opisują one dane oraz zachowania obiektów, które są na nich wzorowane. To może brzmieć tak jakbym mówił o klasie, ale to nie do końca to samo. Interfejs jest tylko szablonem, sam w sobie nie posiada żadnej logiki. Myślę, że najlepiej będzie pokazać to na przykładzie. Oto jak wygląda prosty interfejs w TypeScripcie:

W taki sposób sposób stworzyłem interfejs Dog, teraz mogę tworzyć dane o takim typie:

Aby zmienna maja była poprawnie przypisana do typu Dog, musi posiadać dwa pola name o typie string oraz age o typie number. Jeżeli pól będzie za mało, lub za dużo, lub nie będą zgadzać się ich typy, edytor zgłosi błąd.

I to właściwie tyle jeśli chodzi o tworzenie typów przy pomocy interfejsu 🙂 . Nie ma w tym nic trudnego :). Oczywiście można stosować tu wszystkie te zasady, o których pisałem we wcześniejszym wpisie. Nic nie stoi na przeszkodzie, aby któreś z pól interfejsu było typu any, lub typem łączonym. Nie polecam tego, ale jest to możliwe 🙂 .

Jedna rzecz, która może być przydatna to wstawianie do interfejsów pól niewymaganych. Aby to zrobić, na końcu nazwy takiego pola należy dodać znak zapytania:

Teraz obiekty typu Dog muszą mieć pola name oraz age i ewentualnie mogą posiadać też pole rabid. Należy pamiętać, że jeśli pole takie faktycznie pojawi się w obiekcie, może w tym wypadku jako wartość przyjmować jedynie typy boolowskie: true lub false

Enumeratory

Enumeratory to kolejna klasyczna konstrukcja danych. W TypeScript możemy wykorzystywać ją do tworzenia nowych typów.

Z zasady enumeratory to kolekcje danych służących do przechowywania wartości o wymownych nazwach, którymi możesz zastąpić dane o nazwy nie mają jasnego znaczenia. Najczęstszym przykładem jest definiowane stanów różnych elementów programu. Powiedzmy, że mój typ Dog posiada pole o nazwie state:

Pole state jako typ danych przyjmuje liczbę. Wiem, że liczba 1 oznacza stan wesołego psa, liczba 2 śpiącego psa a liczba 3 głodnego psa. Mogę na tej podstawie tworzyć logikę dla tego obiektu, która sprawdza w jakim stanie jest pies, i zależnie od tego uruchamia odpowiednie mechanizmy:

Wszystko wydaje się być w porządku, ale jeśli na kod spojrzy ktoś inny, może nie wiedzieć czym jest liczba 3 i dlaczego właśnie tam się znajduje. Z pomocą przychodzą tu enumeratory. Wystarczy że stworzę taką konstrukcję:

Oto enumerator o nazwie dogStates. Taki zapis jak wyżej powoduje, że pole happy odpowiada liczbie jeden, sleeping liczbie dwa i tak dalej. Mogę teraz zmienić mój warunek w logice obsługi typu Dog:

Od razu wygląda to dużo lepiej. I wiadomo już co się dzieje w tej części kodu, bez konieczności szukania bo całej jego bazie.

Ale to tylko połowa udogodnienia. Można jeszcze lepiej wykorzystać dogStates, jako typ:

Teraz interfejs Dog posiada pole state, typu dogStates. A oto obiekt typu z polem którego typ powstał na podstawie enumeratora:

Dodatkowym bonusem jest to, że gdy po wpisaniu nazwy enumeratora, postawię kropkę, edytor pokaże mi menu kontekstowe z możliwymi wyborami.

dog states

Prawda, że fajne 🙂 .

To wszystko na dziś jeśli chodzi o tworzenie własnych typów danych. Pozostał mi do omówienia jeszcze jeden mechanizm pozwalający na dodawanie do programu własnych typów – klasy. Jemu poświęcę jednak osobny wpis. Jednak zanim to zrobię, w następnym poście muszę przedstawić jak w TypeScript działają funkcje.

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

3 thoughts on “TypeScript – pierwsze kroki. Tworzenie własnych typów danych. Interfejsy i enumeratory.”

Dodaj komentarz

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