Angular - interfejsy
Stronę tą wyświetlono już: 3093 razy
Interfejsy w Angularze umożliwiają wprowadzenie kontroli typów oraz ułatwiają pracę z danymi zapisanymi w formacie
Słowo kluczowe export oznacza, że taki interfejs będzie można eksportować w innym pliku projektu.
Jeżeli zachodzi konieczność uniemożliwienia raz ustawionej wartości pola interfejsu można do tego celu wykorzystać słowo kluczowe readonly w następujący sposób:
Po utworzeniu instancji tak zmodyfikowanego interfejsu:
Nadpisanie pól typu readonly nie będzie możliwe.
Istnieje też możliwość utworzenia interfejsu, który będzie przyjmował dowolną liczbę pól np. dowolnego typu. Oto przykład takiego interfejsu:
W powyższym przykładzie interfejs ma jedno obowiązkowe pole name oraz może przyjmować dowolną liczbę pól typu any. Oto przykład:
Powyższy kod wyświetli w konsoli następujące dane:
{ name: 'b', color: 'white' }
Jeżeli dany interfejs posiada sporą liczbę pól do wypełnienia, ale niektóre z nich są opcjonalne, to można je takimi uczynić przy wykorzystaniu znaku ? w następujący sposób:
Można też utworzyć obiekt typu Partial, dzięki czemu wszystkie argumenty będą opcjonalne. Oto przykład:
Problem może się pojawić, gdy jakaś metoda czy funkcja będzie wymagała pełnego obiektu a będąc w posiadaniu okrojonego obiektu nie jest możliwe w bezpośredni sposób przekazanie takiego niepełnego obiektu. W takim przypadku można pokusić się o wykorzystanie słowa kluczowego as w następujący sposób:
Wynik wyświetlony w konsoli:
Object { brand: "Ford Mustang", maxSpeed: 250, acceleriation: 5.7, weight: 1000 }
Interfejsy można w łatwy sposób rozszerzać poprzez wykorzystanie słowa kluczowego extends w następujący sposób:
Teraz interfejs CarInterface został rozszerzony o pola, które posiada interfejs Engine. Zmiana danych zapisanych w formacie JSON na zmienną typu Engine sprowadza się jedynie do sparsowania tegoż JSON-a:
Oczywiście dane zawarte w JSON-ie powinny odpowiadać tym z interfejsu. Jeżeli tak nie będzie to niestety ale TypeScript doda pola, które według interfejsu nie powinny istnieć w obiekcie.
W tym przypadku zmienna engine jest zmienną typu Engine, dzięki czemu sam Visual Studio Code będzie podpowiadał pola, jakie ten obiekt posiada.
Interfejsy mogą również zawierać deklaracje funkcji np. w taki oto sposób:
Interfejsy jednak nie umożliwiają tworzenie pełnych deklaracji funkcji ani też nie pozwalają na inicjalizację pól interfejsu danymi. Z kolei inicjalizacja zmiennych za pomocą JSON-a ogranicza się tylko do wartości liczbowych, tekstowych, tablicowych lub obiektów, których pola składają się z takich właśnie elementów. Dzieje się tak, ponieważ JSON jest przystosowany jedynie do przechowywania danych nie zaś deklaracji funkcji. W celu ustawienia zmiennej typu funkcyjnego konieczne jest ręczne przypisanie tejże funkcji. Oto przykład:
Interfejsy można wykorzystywać do wymuszania obsługi określonych metod przez klasy. Taki mechanizm wykorzystują Angular-owe haki. Oto prosty przykład użycia takiego mechanizmu:
W momencie, gdy klasa implementuje interfejs, wszystkie pola oraz deklaracje metod muszą być utworzone również i w klasie. Wymusza to również obsługę wszystkich funkcji w deklaracji klasy.
Co ciekawe można również rozszerzać interfejs za pomocą klasy. W takim przypadku interfejs automatycznie zyskuje wszystkie pola i metody klasy bazowej. Oto przykład:
Interfejs SquareInterface został rozszerzony o pola klasy Square przez co automatycznie dysponuje on wszystkimi polami, jakie klasa rozszeżająca dysponowała.
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman
Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta
Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri
Tytuł:
Angular w akcji
Autor:
Jeremy Wilken
Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman
Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz