Angular - klasy abstrakcyjne w TypeScript-cie

Autor podstrony: Krzysztof Zajączkowski

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

TypeScript umożliwia deklarowanie klas abstrakcyjnych, czyli takich, których obiektu nie da się utworzyć. A na cóż taka klasa komu. Otóż na to, aby klasy dziedziczące po takiej klasie, które współdzielą pewne cechy własne i metody również mogły być traktowane tak, jakby były obiektem tego samego typu. Innymi słowy chodzi tutaj o polimorfizm (wielopostaciowość), gdzie dwa różne typy obiektów na tą samą akcję wykonują różne działania. Takim klasycznym przykładem polimorfizmu (przytaczanym wszędzie gdzie się da jako przykład) jest stary znany przykład z klasą opisującą figury geometryczne. Nawiązując więc do tego pokażę taki klasyczny przykładzik abstrakcyjnej klasy w TypeScript-cie:

abstract class Figure { protected pFigureName: string; // to pole będzie współdzielone przez wszystkie klasy dziedziczące po klasie Figure abstract get surfaceArea(): number; // ten abstrakcyjny getter zwraca pole powierzchni abstract get circuit(): number; // ten abstrakcyjny getter zwraca obwód get figureName(): string { return this.pFigureName; } // ten getter zwraca nazwę figury geometrycznej }

Próba utworzenia instancji klasy abstrakcyjnej powinna się zakończyć wyświetleniem komunikatu błędu:

Cannot create an instance of an abstract class.

Co jakby nie patrzeć jest poprawnym zachowaniem.

Utwórzmy więc dwie klasy:

Circle - koło
class Circle extends Figure { ray: number; constructor(ray: number) { super(); this.ray = ray; this.pFigureName = 'circle'; } get surfaceArea(): number { return this.ray * this.ray * Math.PI; } get circuit(): number { return this.ray * 2 * Math.PI; } }
Rectangle - prostokąt
class Rectangle extends Figure { width: number; height: number; constructor(width: number, height: number) { super(); this.width = width; this.height = height; this.pFigureName = 'rectangle'; } get surfaceArea(): number { return this.width * this.height; } get circuit(): number { return this.width * 2 + this.height * 2; } }

A teraz czas na małą polimorficzną sztuczkę. Otóż teraz mogę różne obiekty będące figurami i dziedziczące po klasie abstrakcyjnej Figure przechowywać w jednej tablicy obiektów typu Figure. Co by nie być gołosłownym oto i przykład takiej tablicy:

figuresTable: Figure[] = []; figuresTable.push(new Circle(100)); figuresTable.push(new Rectangle(100, 200)); figuresTable.forEach((figure) => console.log('Nazwa figury: ', figure.figureName, ' Obwód: ', figure.circuit, ' Pole powierzchni: ', figure.surfaceArea));

Powyższy kod powinien wyświetlić w konsoli:

Nazwa figury:  circle  Obwód:  628.3185307179587  Pole powierzchni:  31415.926535897932 chess.component.ts:122:54
Nazwa figury:  rectangle  Obwód:  600  Pole powierzchni:  20000