TypeScript: Interfejsy klas
od Podstaw
1 godz. 54 min · Typescript · Full-stack i Programowanie
Adam GospodarczykCzego się nauczysz
- Czym jest TypeScript
- Powtórka najważniejszych elementów JavaScript & ESNext
- Konfiguracja kompilatora TypeScript i ESLint
- Typy w JavaScript vs. Typy w TypeScript
- Aliasy i asercja typów
- Inferencja typów, czyli mądry TypeScript
- Typy funkcji i parametrów
- Typy klas, hermetyzacja danych i abstrakcje
- Wykorzystanie interfejsów, czyli tworzymy kontrakty
Po co nam statyczne typowanie?
Zacznijmy od tego, że JavaScript jest dynamicznie typowany. Oznacza to, że typy zmiennych mogą się zmieniać w czasie wykonywania programu, a my nie mamy nad nimi kontroli. A po co nam ta kontrola? Między innymi po to, aby przypadkowo nie dodać typu number do string lub przekazać do funkcji nieprawidłowe danych. Ogromną zaletą jest to, że o tego typu błędach dowiadujemy się już na etapie pisania kodu a nie dopiero w trakcie jego wykonywania... na produkcji.
Definicje typów. A co to?
Prawdopodobnie znasz mechanizm intellisense, czyli inteligentnego podpowiadania kodu przez edytor. Pisząc kod w TypeScript, tworzysz definicje typów dotyczących Twojej aplikacji. W ten sposób dostęp do definicji klas i właściwości obiektów masz właściwie na wyciągnięcie myszki. Wystarczy "hover" na funkcji aby uzyskać szczegółowe informacje, które pomogą Ci w pisaniu kodu. Oprócz tego otrzymasz również automatyczne podpowiedzi w trakcie dostępu do właściwości i metod. Nic tylko pisać kod!
Przepisywanie całego projektu?
Nie musisz przepisywać całego projektu. TypeScript stanowi nadzbiór JavaScriptu. Zatem cały Twój projekt jest z nim w 100% kompatybilny, a Ty możesz stopniowo dodawać definicje typów. Nawet nie będziesz wiedział kiedy typy pojawią się w całej Twojej aplikacji. To daje Ci również możliwość uczenia się TypeScriptu w trakcie jego wdrażania. W tym kursie opanujesz podstawy a później... sam zobaczysz!
Dla kogo jest ten kurs?
Ten kurs został stworzony z myślą o programistach, którzy podstawy JavaScriptu mają już za sobą i chcą poznać zalety statycznego typowania oferowanego przez TypeScript. Na początku Kursu zaczynamy również od krótkiej powtórki najważniejszych elementów samego JS.
3.8+
No to w tej lekcji sprawdzimy w jaki
sposób interfejsy zachowują się w przypadku klas.
Co ciekawe jeżeli znasz inne języki programowania to najprawdopodobniej
właśnie interfejsy kojarzą Ci się bezpośrednio z klasami.
Zobaczmy więc jak to wygląda w Type Scripcie.
Mam tutaj nieco uproszczony przykład
z poprzedniego odcinka, w którym to zrezygnowałem z interfejsu naszej funkcji
Play oraz dodatkowo metoda Play nie jest już opcjonalna.
Poza tym ustaliliśmy również fakt, że nie podoba mi się tutaj wykorzystanie dosłownego
zapisania obiektu i w zamian powinniśmy utworzyć klasę.
Proponuję więc, abyśmy to zrobili.
Nasza klasa musi, podobnie jak ten obiekt, pasować do interfejsu playable.
I dzięki temu TS od razu informuje nas o tym, że ta klasa musi mieć odpowiedni kształt.
A skoro tak to warto byłoby się teraz tym zająć.
W pierwszej kolejności muszę zająć się tą właściwością name i do jej
zdefiniowania wykorzystał skrócony zapis konstruktora.
Z kolei metoda Play trafi już bezpośrednio do ciała naszej klasy.
Tak przygotowana klasa nie tylko implementuje nasz interfejs, ale również
mamy pewność z tego, że metoda Play również jest zaimplementowana w odpowiedni sposób.
Jeżeli zwrócilibyśmy tutaj jakąś liczbę, otrzymujemy informację o błędzie.
Ostatecznie jednak tak przygotowaną klasę możemy wykorzystać w naszym obiekcie.
Dzięki temu efekt, który osiągnęliśmy jest
dokładnie taki sam, ale znowu mamy tutaj odpowiednią elastyczność.
No i poza tym przypominam jeszcze, że klasa movie może rozszerzać np.
klasę media oraz implementować wiele
różnych interfejsów, bo wystarczy że ich nazwy podamy po prostu po przecinku.
W tym momencie oczywiście nie będzie nam to potrzebne, ale wiesz już jakie są
możliwości wykorzystania interfejsów w kontekście klas.
Kod
Klasa Movie · 1 min
class Movie implements Playable {
constructor(public name: string) {}
play() {
return `Playing ${this.name}`
}
}