Po nieco teoretycznym spojrzeniu na klasy i obiekty, pora przyjrzeć im się bliżej w TypeScript.
Definicja klasy w TypeScript
To jak wygląda podstawowa definicja klasy w TypeScript niewiele różni się od tego jak wygląda to w JavaScript ES6+
class House {
owner : string;
constructor(owner : string) {
this.owner = owner;
}
changeOwner(owner : string) : void {
this.owner = owner;
}
getOwner() : string {
return this.owner;
}
}
Zaczynamy od słowa kluczowego class, po którym następuje podanie nazwy dla nowej klasy oraz otwarcie nawiasu klamrowego.
Następnie mamy jedną różnicę. W dodatku taką, która powoduję, że przeklejenie kodu klasy z ES6+ powoduje krzyk i płacz kompilatora. Mianowicie potrzebujemy deklaracji pól, jakie zawiera dana klasa, wraz z typem danych. Jeśli nie podamy będzie niejawnie przypisany typ any. W naszym wypadku jest to stan owner o typie tekstowym string.
Kolejnym elementem w kolejności jest konstruktor, czyli specjalna metoda, która jest wywoływana przy tworzeniu nowych obiektów, na podstawie danej klasy. W TypeScript konstruktory definiujemy za pomocą słówka kluczowego constructor i podania parametrów dla funkcji i logiki biznesowej.
Pamiętajmy, że w konstruktorach, niezależnie od języka programowania, logika powinna być ograniczona do minimum i najlepiej ograniczona do inicjalizacji wartości pól.
Finalnie mamy dwie metody – changeOwner i getOwner. Deklaracja funkcji klasy niczym nie różni się od tej znanej z JavaScript. Podajemy nazwę dla funkcji i listę parametrów.
Finalnie zamykamy nawias klamrowy.
Tworzenie nowych obiektów
Nowe obiekty w TS tworzymy tak samo jak w dziesiątkach innych języków – za pomocą słowa kluczowego new.
const house : House = new House("Pawel");
W kontekście TypeScript ważne jest, że każda klasa definiuje nowy typ. Tak jak wyżej – mamy zmienną o typie wyprowadzonym z klasy – House.
Podsumowanie
Na podstawowym poziomie więc jedyne czego wymaga od nas TypeScript ponad to, co znamy z JavaScript to podanie stanów, jakie posiada owa klasa. Najlepiej wraz z typami, już na początku jej deklaracji.
Dzięki temu od razu wiemy jakie dane przechowywuję klasa, nie musimy analizować całego kodu w poszukiwaniu this.<nazwa stanu>.
Interesuje Cię TypeScript? Wprowadzenie do tego języka jest jednym z darmowych kursów dostępnych na kursy.clockworkjava.pl.
