fbpx

TypeScript w praktyce. Na niepraktycznym przykładzie.

W ostatniej części cyklu wprowadzającego do Typescript weźmiemy trochę rzeczy, o których traktowały poprzednie wpisy i zaimplementujemy prostą aplikację internetową.

I to właśnie sformułowanie „prostą aplikację internetową” czyni ten przykład… niepraktycznym. Mianowicie im projekt większy, tym więcej daje nam TypeScript z jego silnym typowaniem, generykami, interfejsami. Większość z tych rzeczy jest nadmiarowa przy prostych aplikacjach webowych, które spokojnie można tworzyć w JavaScript bez obawy jakiś drastycznych pomyłek czy zamotaną architekturę.

Czytaj dalej TypeScript w praktyce. Na niepraktycznym przykładzie.

Modyfikatory dostępu TypeScript

W porzednim wpisie ogólnie dowiedzieliśmy się do czego przydadzą się nam modyfikatory dostępu. W tym przejdzemy do konkretów czyli omówienia poziomów dostępu oferowanych prez TypeScript – public, private i protected.


Zapraszam do dołączenia za darmo do kilkugodzinnego kursu wprowadzającego do TypeScript.


Czytaj dalej Modyfikatory dostępu TypeScript

Modyfikatory dostępu – po co mi one?

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?

Klasy w TypeScript

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.

Czym są klasy i obiekty w programowaniu? Podstawy programowania obiektowego.

W tym wpisie oderwiemy się od konkretnego języka programowania. Wzniesiemy się na nieco wyższy poziom abstrakcji (choć przykłady będą dość przyziemne). Dowiemy się czym są w programowaniu klasy i obiekty.

Czytaj dalej Czym są klasy i obiekty w programowaniu? Podstawy programowania obiektowego.

Alias typu w TypeScript

W poprzednim wpisie pokazałem trzy podstawowe typy wbudowane w TypeScript. W tym natomiast pokaże jak tworzyć własne. W TypeScript możemy je definiować za pomocą aliasów, interfejsów oraz klas. W tym wpisie zajmiemy się pierwszym sposobem i stworzymy alias typu – czyli zestawy mniej bądź bardziej konkretnych wartości, jakie może zmienna danego typu przyjmować.

Czytaj dalej Alias typu w TypeScript

Podstawowe typy wbudowane w TypeScript

W poprzednim wpisie postawilismy środowisko do pracy. Teraz przyjrzyjmy się jakie podstawowe typy wbudowane oferuje nam TypeScript. Zanim przejdziemy do konkretów pochylmy się na chwilę nad samą koncepcją typów.


Zapraszam do dołączenia za darmo do kilkugodzinnego kursu wprowadzającego do TypeScript.


Czytaj dalej Podstawowe typy wbudowane w TypeScript

Instalacja TypeScript i minimalistyczny set-up projektu

W poprzednim wpisie wprowadziłem nas w świat TypeScript, a dziś zajmiemy się pokazaniem jak przebiega instalacja TypeScript oraz zestawienie (set-up) minimalistycznego projektu, bez nadmiarowych narzędzi jak Webpack czy Babel. Na to przyjdzie czas później.

Czytaj dalej Instalacja TypeScript i minimalistyczny set-up projektu

Co to TypeScript

TypeScript jest to język programowania tworzony w modelu open-source będący semantycznie nadzbiorem JavaScriptu. Główny zespół odpowiadający za jego utrzymanie pracuje w Microsoft.

O co chodzi z semantycznym nadzbiorem? Składnia języka jest niemal identyczna z JavaScript. TypeScript dodaje trochę dodatkowych rzeczy jak na przykład statyczne typowanie czy interfejsy.

Można powiedzieć też, że każdy kod napisany w JavaScript możemy skopiować do pliku .ts (rozszerzenie dla plików TypeScript) i wszystko będzie działać poprawnie.
Nie jest to jednak do końca prawda, przynajmniej nie przy domyślnych ustawieniach kompilatora TypeScript. Jeśli zluzujemy nieco różne obostrzenia to dopiero wówczas KAŻDY kod JavaScript uruchomi się jako kod TypeScript.

Czytaj dalej Co to TypeScript