BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Baza wiedzy











Wprowadzenie do programowania w TypeScript: klasy

03-06-2014 09:40 | Krzysztof Pruszyński
W tym artykule nauczysz się tworzyć klasy w TypeScript.

Autor: Krzysztof Pruszyński

Klasa stanowi pojęcie niezbędne,  jeżeli mamy do czynienia z obiektowym językiem programowania. Pozwala ona nam, programistom tworzyć oprogramowanie, które odzwierciedla jakiś kawałek rzeczywistości. Dzięki temu tworzenie aplikacji  w obiektowy sposób staje się dla nas bardziej intuicyjne i zrozumiałe. W dzisiejszym artykule dowiemy się, w jaki sposób TypeScript radzi sobie z klasami.

 

Przed rozpoczęciem lektury artykułu powinniśmy zapoznać się z poprzednim wpisem z serii - Wprowadzenie do programowania w TypeScript: funkcje i interfejsy.

 

Po tym artykule nauczymy się tworzyć klasy w TypeScript. Dowiemy się o ich składowych i napiszemy kilka przykładów w Visual Studio.

Klasy

JavaScript samo w sobie nie posiada klas. Język ten zawiera słówko „class”, jednak obecnie nic ono nie robi. Ecmascript w wersji 6.0 wprowadza implementację klasy do JavaScriptu. Musi minąć jeszcze wiele lat zanim stanie się to standardem i wszystkie przeglądarki będą jednakowo to obsługiwać. Jeżeli chodzi o TypeScript, pojęcie klasy występowało w nim od samego początku. Microsoft tworząc pojęcie klasy oparł jej składnie o to, co definiuje Ecmascript.

Informacja

Oczywiście występują pewne różnice pomiędzy tym, co definiuje Ecmascript, a posiada zaimplementowany TypeScript, chociażby ze względu na statyczne typowanie. Nie wypływa to jednak na generowany kod JavaScriptu, a sprawia, że w przyszłości TypeScript będzie cały czas w pełni kompatybilny ze standardami.

 

Klasa w JavaScript

1.    Otwórz solucję TypeScriptProject, a następnie stwórz nowy projekt o nazwie TS_4.

2.    Utwórz nowy plik JavaScript o nazwie javaS.js.

3.    Napisz w nim kod:

function Pies(nazwa, rasa){

    this.nazwa = nazwa;

    this.rasa = rasa;

}

Pies.prototype.pokazInformacje = function() {

    return 'Nazwa tego psa to:' + this.nazwa + ' ' + 'a jego rasa to:' + this.rasa;

} //zapis taki jest uważany za antywzór "klasy" w javascript

 

W ten oto sposób stworzyliśmy konstruktor funkcyjny (constructor function), którym możemy tworzyć wiele obiektów tego samego typu. Do naszego konstruktora dopisaliśmy coś na wzór metody pokazInformacje.

4.    Stwórz dwa obiekty typu Pies:

var pies1 = new Pies("Ciapek", "Buldog");

var pies2 = new Pies("Reksio", "Kundel");

 

Koncepcyjnie jest to bardziej poprawne niż użycie interfejsów w poprzednim artykule. Możemy w ten sposób tworzyć obiekty o tym samym typie klasowym, jednak nadal nie jest to klasa jaką znamy chociażby z języka C#.

Klasa w TypeScript

Tak wygląda nasz kod w JavaScript, ale przejdźmy teraz do tematu artykułu.

1.     Stwórz plik animal.ts i zapisz w nim:

class Pies {

     nazwa:string;

     rasa: string;

     pokazInformacje() {

         return "Nazwa tego psa to: " + this.nazwa + " " + "a jego rasa to: " + this.rasa;

     }

 }

To, co pierwsze rzuca nam się w oczy to użycie słówka kluczowego class. W oparciu o ten fakt, możemy intuicyjnie tworzyć klasy i ich instancje.  Jej ciało zawiera elementy takie, jak pola oraz metody. W tym przypadku posiadamy jedną metodę, która jest nię jednak tylko z definicji. W JavaScript możemy także nazwać to w ten sposób, lecz tak naprawdę jest to właściwość zawierająca funkcję, tj. w JavaScript funkcje są obiektami, które możemy przypisać do właściwości. Można to zobaczyć po wejściu w wygenerowany kod JS.

var Pies = (function () {

    function Pies() {

    }

    Pies.prototype.pokazInformacje = function () {

        return "Nazwa tego psa to: " + this.nazwa + " " + "a jego rasa to: " + this.rasa;

    };

    return Pies;

})();

 

Naszą uwagę powinien również przykuć brak pól nazwa i rasa. W wygenerowanym pliku występuje pusta funkcja Pies(). Jest to spowodowane brakiem konstruktora w kodzie TypeScript.

2.    W związku z tym dopisz na początku klasy taki fragment kodu:

constructor(nazwa: string, rasa: string) {

         this.nazwa = nazwa;

         this.rasa = rasa;

     }

Składniowo nie różni się on praktycznie niczym od metody, ale zawiera słówko kluczowe constructor,co czyni go takim samym konstruktorem, jak na przykład w języku C#.

Jeżeli jednak chcielibyśmy jeszcze bardziej skrócić kod, możemy zapisać konstruktor w innej postaci.

3.    Zamień kod z kroku drugiego na następujący:

constructor( public nazwa: string, public  rasa: string) {}

Informacja

Taki zapis spowoduje, iż właściwości tworzą się automatycznie i możemy tym samym usunąć zdefiniowane pola w klasie na rzecz tych w konstruktorze. Dzieje się to dzięki temu, że przed właściwościami daliśmy słówko public.

 

W ten oto sposób utworzyliśmy podstawową klasę bazową, dzięki której możemy inicjalizować wiele obiektów konkretnego typu. Jednak czasem potrzebujemy nieco więcej niż tylko prostej metody i właściwości. Takimi elementami są accessors i przeciążanie metod. TypeScript na szczęście zostało w nie wyposażone.

Akcesory i przeciążanie metod

Aby stworzyć wartość tylko do odczytu, nie potrzebujemy skomplikowanego kodu.

1.     W ciele klasy Piespod konstruktorem napisz:

 get czystaNazwa() { return this.nazwa + "/" + this.rasa; }

 

Moglibyśmy ustawić także seter dla naszej właściwości, ale wymagałoby to przesłania do niego parametru, a w tym przykładzie jest to zbędne. Również nasza właściwość będzie tylko do odczytu. W TypeScript  są one domyślnie publiczne (odwrotnie niż w innych językach, np. C#) więc jeżeli chcemy, aby nasze pola lub metody nie były dostępne na zewnątrz funkcji wystarczy, że przed danym elementem dodamy słówko kluczowe private.

Informacja

Jednak to do końca nie będzie wartość prywatna, ponieważ JavaScript nie obsługuje prywatności. Jeżeli generujemy plik .st na plik JavaScript to ta prywatność „znika”. lDaczego? Prostym przykładem będzie napisanie czegoś takiego:

alert(pies1["tylkoNazwa"]);

Dzięki takiemu trickowi obchodzimy zabezpieczenie, jakim stoi nasza prywatna właściwość. Jednak podczas tworzenia programu w TypeScript, deweloper raczej nie będzie odchodzić od konwencji dostępności elementów, jakie ten język oferuje.

 

Na tym etapie dotychczasowy kod powinien wyglądać tak:

class Pies {

    constructor(public nazwa: string, public rasa: string) { }

 

    get czystaNazwa() { return this.nazwa + "/" + this.rasa; }

 

    pokazInformacje() {

        return "Nazwa tego psa to: " + this.nazwa + " " + "a jego rasa to: " + this.rasa;

    }

}

2.    Na końcu pliku napisz:

var pies = new Pies("Ciapek", "Buldog");

 

alert(pies.czystaNazwa);

alert(pies.pokazInformacje());

 

3.    Otwórz plik index.html i w nagłówku dokumentu wpisz:

<script src="animal.js"></script>

 

4.    Uruchom program wciskając F5.

 

Ostatnim zagadnieniem jaki poruszymy w tym artykule jest przeciążanie metod.

5.    Na końcu ciała metody Pies napisz:

DajGlos(): string;

DajGlos(warcz: string):string;

DajGlos(pies: Pies):string;

 

DajGlos(obj?: any) //musi być parametr any

{

if(typeof obj === 'string'){

return 'Pies ' + this.nazwa + " robi " + obj;

}else if(obj instanceof Pies){

return 'Obcy pies o imieniu ' + (<Pies> obj).nazwa + ' szczeka na ' + this.nazwa;

}

return 'brak głosu';

}

Na początku mamy opisane różne przeciążenia metody -pierwsze z nich jest bezparametrowe, drugie zawiera parametr typu string,trzecie natomiast, typ złożony, jakim jest klasa Pies. Następnie mamy implementację naszej metody, gdzie opcjonalny parametr jest typu any, abyśmy mogli przesłać odpowiednie argumenty.  Następnie, w warunku sprawdzamy typ i zwracamy odpowiednią wartość. Sprawdźmy czy ten kod zadziała.

6.    Napisz:

var pies1 = new Pies("Reksio", "Jamnik");

var pies2 = new Pies("Remont", "Kundel");

alert(pies1.DajGlos("grr"));

alert(pies2.DajGlos(pies1));

 

Podczas inicjalizacji metody pojawiają się nam dostępne przeciążone opcje (Rys. 1 Dostępna lista przeciążonych metod).

 

 

image
Rys. 1 Dostępna lista przeciążonych metod

7.    Uruchom program wciskając F5

Alerty, jakie powinny pojawić się po uruchomieniu to odpowiednio (Rys. 2 Komunikat, który pojawia gdy parametrem metody „DajGlos” jest łańcuch znaków "grr", Rys. 3 Komunikat, który pojawia się gdy parametrem metody "DajGlos" jest obiekt „pies1”):

 

image
Rys. 2 Komunikat, który pojawia gdy parametrem metody „DajGlos” jest łańcuch znaków "grr"

 

image
Rys. 3 Komunikat, który pojawia się gdy parametrem metody "DajGlos" jest obiekt „pies1”

 

Podsumowanie

W tym artykule nauczyliśmy się, jak posługiwać się klasami w TypeScript. Zobaczyliśmy jakie możliwości drzemią w zwykłej klasie, która na pozór jest niedostępna w implementacji JavaScript. Wiemy jak tworzyć konstruktor, przeciążać metody oraz implementować właściwości.  W kolejnym artykule znajdzie się rozszerzenie tego tematu oraz szersze pokazanie współpracy interfejsów z klasami.

Komentarze 1

Asum
Asum
0 pkt.
Nowicjusz
09-11-2015
oceń pozytywnie 0
Witam. Po co ten pytajnik? DajGlos(obj?: any)
pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.