Angular - klasy abstrakcyjne w TypeScript-cie
Stronę tą wyświetlono już: 1374 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
Listing 2 - 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
Listing 3 - 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

Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman

Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev

Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta

Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri

Tytuł:
Angular w akcji
Autor:
Jeremy Wilken

Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis

Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman

Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev

Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz