Angular - klasy

Stronę tą wyświetlono już: 29 razy

Podstawy deklaracji klas w TypeScript-cie

Tworzenie klas w czystym JavaScript-cie było dość zabawnym doświadczeniem. Dziedziczenie zaś jeszcze zabawniejszym. A wszystko to dlatego, że w JavaScript-cie obiekty to funkcje. Cóż, w TypeScript-cie jest tak samo tylko, że inaczej. To znaczy w kodzie pisanym przez programistę do utworzenia obiektu klasy używa się słowa kluczowego class, jednakże podczas kompilacji wszystko to jest zamieniane na postać czysto JavaScript-ową. Oto prosty przykład deklaracji klasy w TypeScript-cie:

Listing 1
  1. export class Author {
  2. // inicjalizacja danych pustym ciągiem znaków
  3. name: string = '';
  4. surname: string = '';
  5. // getter jest to funkcja, która zwraca daną wartość a wywołuje się ją tak, jakby to było pole klasy
  6. // getter równocześnie może zabezpieczać przed nadpisywaniem jakiejś zmiennej
  7. // może również wyliczać jakąś wartość w locie i ją zwracać
  8. get nameAndSurname(): string {
  9. return this.name + ' ' + this.surname;
  10. }
  11. }
  12. // klasa kiążki, która zawiera tablicę obiektów klasy Author
  13. export class Book {
  14. title: string;
  15. authors: Author[];
  16. nrOfPages: number;
  17. price: number;
  18. // konstruktor umożliwiający ustawienie danych obiektu przy jego tworzeniu
  19. constructor(title: string, authors: Author[], nrOfPages: number, price: number) {
  20. this.title = title;
  21. this.authors = authors;
  22. this.nrOfPages = nrOfPages;
  23. this.price = price;
  24. }
  25. }

Tworzenie obiektu klasy Book będzie wyglądało następująco:

Listing 2
  1. let book = new Book('Rio Anaconda', [
  2. Author.CreateAuthor('Wojciech', 'Cejrowski')
  3. ],
  4. 100,
  5. 45);

Pola i metody klasy domyślnie w TypeScript-cie są dostępne publicznie. Można tworzyć pola i metody, które są typu prywatnego private (dostępne jedynie w obrębie klasy) lub chronione protected (dostępne jedynie w obrębie danej klasy i z poziomu klasy dziedziczącej).

Tak jak w JavaScript-cie tak i w TypeScript-cie konstruktora i metod klasy nie da się przeciążyć jak w innych językach programowania. Można jednakże przekazać do metody klasy argument, będący tablicą różnych typów i w ten sposób rozszerzyć funkcjonalność klasy. Możliwe jest też stosowanie standardowego zastosowania np. zmiennych inicjowanych wartościami domyślnymi np. tak:

Listing 3
  1. constructor(title: string = '', authors: Author[] = [], nrOfPages: number = 100, price: number = 100) {
  2. this.title = title;
  3. this.authors = authors;
  4. this.nrOfPages = nrOfPages;
  5. this.price = price;
  6. }

Gettery i settery

Warto zapoznać się z możliwością kontroli dostępu do danych z wykorzystaniem getterów i setterów, będących specjalnymi metodami, które mogą być wywoływane tak, jakby były polami klasy. Gettery umożliwiają zwracanie wartości czy to prywatnej, czy to chronionej czy też wyliczanej w locie na podstawie dostępnych w klasie wartości. Settery umożliwiają ustawianie prywatnych i publicznych zmiennych jak również pozwalają na wykonywanie równoczesne szeregu innych operacji, które powinny się wykonać w trakcie ustawiania zmiennych.

Przykład gettera został utworzony już w powyższym przykładzie. Tworzy się go przy użyciu słowa kluczowego get. Getter jest metodą, która nie przyjmuje żadnych wartości a jedynie zwraca wartość. W TypeScript-cie można również podać typ zwracanych danych. Przykładowy getter ma więc postać np. taką:

Listing 4
  1. export class Author {
  2. // inicjalizacja danych pustym ciągiem znaków
  3. name: string = '';
  4. surname: string = '';
  5. // getter jest to funkccja, która zwraca daną wartość a wywołuje się ją tak, jakby tobyło pole klasy
  6. // getter równocześnie może zabezpieczać przed nadpisywaniem jakiejś zmiennej
  7. // może rónież wyliczać jakąś wartość w locie i ją zwracać
  8. get nameAndSurname(): string {
  9. return this.name + ' ' + this.surname;
  10. }
  11. }

Wywołanie gettera wyglądać będzie następująco:

Listing 5
  1. let author = new Author();
  2. author.name = 'Wojciech';
  3. author.surname = 'Cejrowski';
  4. // wywołanie gettera obiektu klasy Author
  5. console.log(author.nameAndSurname);

Jak widać, choć getter jest funkcją, to wywołuje się go tak, jakby był polem klasy. Takie sztuczne pola klasy nazywane są właściwościami.

Settery w odróżnieniu od getterów nie zwracają żadnej wartości, ale przyjmują jeden argument wykorzystywany do ustawienia innych zmiennych. Załóżmy więc, że mam do stworzenia klasę opisującą prosty twór, jakim jest prostokąt. Prostokąt jak to prostokąt ma pewne właściwości, do których należą: długość boku a; długość przekątnej p no i jeszcze dajmy na to pole powierzchni area. Wszystkie te trzy zmienne są z sobą skorelowane, oznacza to, że zmieniając długość boku a prostokąta zmienia się równocześnie długość przekątnej p oraz pole powierzchni area prostokąta. Do opisu prostokąta użyję tylko jednego pola opisującego długość boku a pozostałe zmienne będą getterami i setterami umożliwiającymi przeliczanie, pobieranie lub ustawianie wartości. Oto przykład:

Listing 6
  1. export class Square {
  2. a: number;
  3. constructor(a: number) {
  4. this.a = a;
  5. }
  6. get p(): number {
  7. return this.a * Math.sqrt(2);
  8. }
  9. set p(pValue: number) {
  10. this.a = pValue / Math.sqrt(2);
  11. }
  12. get area(): number {
  13. return this.a * this.a;
  14. }
  15. set area(areaValue: number) {
  16. this.a = Math.sqrt(areaValue);
  17. }
  18. print() {
  19. console.log('Cechy obiektu prostokąta:');
  20. console.log('Długość boku a: ' + this.a);
  21. console.log('Długość przekątnej b: ' + this.p);
  22. console.log('Pole powierzchni Ppow: ' + this.area);
  23. }
  24. }

Przykład utworzenia instancji klasy Square oraz wykorzystanie setterów można zobaczyć poniżej:

Listing 7
  1. const square: Square = new Square(10);
  2. square.print();
  3. square.p = 10;
  4. square.print();
  5. square.area = 10;
  6. square.print();

Wynikiem działania tego kodu będzie wyświetlenie w konsoli przeglądarki np. Firefoxa lub Chrome następującej treści:

Cechy obiektu prostokąta:
Długość boku a: 10
Długość przekątnej b: 14.142135623730951
Pole powierzchni Ppow: 100
Cechy obiektu prostokąta:
Długość boku a: 7.071067811865475
Długość przekątnej b: 10
Pole powierzchni Ppow: 49.99999999999999
Cechy obiektu prostokąta:
Długość boku a: 3.1622776601683795
Długość przekątnej b: 4.47213595499958
Pole powierzchni Ppow: 10.000000000000002

Implementacja interfejsów w deklaracji klasy

Klasy mogą implementować interfejs, który będzie wymuszał zadeklarowanie w klasie wszystkich wymaganych przez dany interfejs pól i metod. Taką implementację wykorzystują Angular-owe haki do wymuszenia na programiście obsługi z góry określonej metody w celu zapewnienia obsługi określonej funkcjonalności. Taką funkcjonalnością jest np. uruchomienie metody ngOnInit, która przez Angulara będzie wywoływana, gdy dane klasy zostaną zainicjalizowane.

Oto prosty przykład wykorzystania własnego interfejsu do wymuszenia obsługi określonej funkcjonalności:

Listing 8
  1. export interface TitleI {
  2. title: string;
  3. printTitle();
  4. }
  5. class MusicAlbum implements TitleI {
  6. title: string;
  7. printTitle() {
  8. console.log('Tytuł albumu muzycznego: ' + this.title);
  9. }
  10. }
  11. class Movie implements TitleI {
  12. title: string;
  13. printTitle() {
  14. console.log('Tytuł filmu' + this.title);
  15. }
  16. }
  17. class Book implements TitleI {
  18. title: string;
  19. printTitle() {
  20. console.log('Tytuł książki: ' + this.title);
  21. }
  22. }

Dziedziczenie w TypeScript-cie

W TypeScript-cie do dziedziczenia używa się słowa kluczowego extends, które pozwala rozszerzyć daną klasę o funkcjonalności innej klasy lub klas. Oto przykład zastosowania tego mechanizmu:

Listing 9
  1. export class Title {
  2. title: string;
  3. printTitle() {
  4. console.log('Tytuł: ' + this.title);
  5. }
  6. }
  7. export class MusicAlbum extends Title {
  8. author: Author;
  9. nrOfTracks: number;
  10. constructor(author: Author, nrOfTracks: number = 0, title: string = '') {
  11. super(); // wywołanie konstruktora klasy bazowej
  12. }
  13. }
  14. export class Movie extends Title {
  15. author: Author;
  16. constructor(author: Author, title: string) {
  17. super(); // wywołanie konstruktora klasy bazowej
  18. }
  19. }

Przy dziedziczeniu możliwe konieczne jest wywołanie konstruktora klasy bazowej za pomocą funkcji super, która jako argumenty przyjmuje takie same argumenty co sam konstruktor klasy bazowej (czyli w tym przypadku żadne).

Zaletą dziedziczenia jest to, że część kodu zostaje wydzielona do oddzielnej klasy i nadaje się ona do wielokrotnego użytku w wielu innych klasach. Wadą zaś jest to, że klasa bazowa nie może spersonalizować danych w niej związanych w sposób łatwy. To może zrobić jedynie klasa dziedzicząca. Chodzi mi tutaj np o opis jaki może zwracać metoda printTitle: Film pod tytułem: "Tajemnica Andromedy", który w przypadku dziedziczenia jest nie możliwy do zrealizowania w rozsądny sposób. Można jedynie stworzyć tutaj opis typu: Tytuł: "Tajemnica Andromedy" ale czego to jest tytuł to może wiedzieć tylko klasa dziedzicząca.

Klasy abstrakcyjne

W TypeScript klasy abstrakcyjne jak sama nazwa już podpowiada to takie klasy, których obiektów nie da się utworzyć. Potrzebne one są np. do wydzielenia części kodu lub/oraz przechowywania różnych obiektów dziedziczących po tej klasie w jednej tablicy, której typ odpowiada typowi klasy abstrakcyjnej. Sam obiekt klasy tego typu nie może zostać utworzony, ponieważ jego istnienie jest pozbawione sensu. Dla przykładu wszystkie figury płaskie mają takie cechy jak:

  • długość obwodu;
  • pole powierzchni;
  • środek ciężkości;

Lecz każda figura płaska ma inne wzory do obliczania tychże wartości. Utworzenie obiektu figura jest więc mało sensowne, ale utworzenie obiektu klasy np. prostokąt już będzie taki sens miało. Oto przykład deklaracji klasy Shape będąca klasą abstrakcyjną i klasy Square i Circle, które dziedziczą po klasie Shape:

Listing 10
  1. export abstract class Shape {
  2. abstract get area(): number;
  3. abstract set area(areaValue: number);
  4. abstract drawShape(): void;
  5. }
  6. export class Square extends Shape {
  7. a: number;
  8. constructor(a: number) {
  9. super();
  10. this.a = a;
  11. }
  12. get p(): number {
  13. return this.a * Math.sqrt(2);
  14. }
  15. set p(pValue: number) {
  16. this.a = pValue / Math.sqrt(2);
  17. }
  18. get area(): number {
  19. return this.a * this.a;
  20. }
  21. set area(areaValue: number) {
  22. this.a = Math.sqrt(areaValue);
  23. }
  24. drawShape() {
  25. console.log('Cechy obiektu prostokąta:');
  26. console.log('Długość boku a: ' + this.a);
  27. console.log('Długość przekątnej b: ' + this.p);
  28. console.log('Pole powierzchni Ppow: ' + this.area);
  29. }
  30. }
  31. export class Circle extends Shape {
  32. r: number;
  33. constructor(r: number) {
  34. super();
  35. this.r = r;
  36. }
  37. get area(): number {
  38. return this.r * this.r * Math.PI;
  39. }
  40. set area(areaValue: number) {
  41. this.r = Math.sqrt(this.r / Math.PI);
  42. }
  43. drawShape(): void {
  44. console.log('Cechy obiektu koła:');
  45. console.log('Promień: ' + this.r);
  46. console.log('Pole powierzchni Ppow: ', this.area);
  47. }
  48. }

Teraz trochę magii:

Listing 11
  1. const square: Square = new Square(10);
  2. square.drawShape();
  3. console.log('=============================');
  4. const circle: Circle = new Circle(20);
  5. circle.drawShape();
  6. console.log('=============================');
  7. // tutaj przechowuję w zmiennej tablicowej dwa obiekty różnych typów jako tablicę klasy abstrakcyjnej Shape
  8. const shapes: Shape[] = [square, circle];
  9. shapes.forEach((shape: Shape) => {
  10. shape.drawShape();
  11. console.log('=============================');
  12. });

Wynik działania powyższego kodu:

Cechy obiektu prostokąta:
Długość boku a: 10
Długość przekątnej b: 14.142135623730951
Pole powierzchni Ppow: 100
=============================
Cechy obiektu koła:
Promień: 20
Pole powierzchni Ppow:  1256.6370614359173
=============================
Cechy obiektu prostokąta:
Długość boku a: 10
Długość przekątnej b: 14.142135623730951
Pole powierzchni Ppow: 100
=============================
Cechy obiektu koła:
Promień: 20
Pole powierzchni Ppow:  1256.6370614359173
=============================

Komentarze