Tag: typescript

W poprzednim poście pokazałem, jak wygląda prosta klasa w TypeScript. Teraz czas by wprowadzić kilka dodatkowych elementów. Jedną z rzeczy, która mocno wyróżnia klasy TypeScript, od tych znanych z klasycznego JavaScript, jest możliwość zastosowania modyfikatorów dostępu.

Czytaj dalej Modyfikatory dostępu – po co mi one?

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.