Shape Hierarchy in TypeScript - Abstract Classes and Inheritance

TypeScript Classes and OOP : Exercise-13 with Solution

Write a TypeScript program that creates an abstract class called Shape with properties like color and an abstract method getPerimeter(). Implement derived classes for specific shapes (e.g., Circle, Rectangle) that extend Shape and provide concrete implementations for calculating their perimeters.

Sample Solution:

TypeScript Code:

// Define an abstract class 'Shape'
abstract class Shape {
  // Property
  color: string;

  // Constructor for Shape
  constructor(color: string) {
    this.color = color;
  }

  // Abstract method for calculating perimeter
  abstract getPerimeter(): number;
}

// Define a derived class 'Circle' extending 'Shape'
class Circle extends Shape {
  // Property
  radius: number;

  // Constructor for Circle
  constructor(color: string, radius: number) {
    super(color);
    this.radius = radius;
  }

  // Implementation of getPerimeter for Circle
  getPerimeter(): number {
    return 2 * Math.PI * this.radius;
  }
}

// Define a derived class 'Rectangle' extending 'Shape'
class Rectangle extends Shape {
  // Properties
  width: number;
  height: number;

  // Constructor for Rectangle
  constructor(color: string, width: number, height: number) {
    super(color);
    this.width = width;
    this.height = height;
  }

  // Implementation of getPerimeter for Rectangle
  getPerimeter(): number {
    return 2 * (this.width + this.height);
  }
}

// Create Circle and Rectangle objects
const myCircle = new Circle("Red", 5);
const myRectangle = new Rectangle("Blue", 4, 6);

// Calculate and display the perimeters
console.log(`Circle Perimeter: ${myCircle.getPerimeter()}`);       // Output: Circle Perimeter: 31.41592653589793
console.log(`Rectangle Perimeter: ${myRectangle.getPerimeter()}`); // Output: Rectangle Perimeter: 20

Explanations:

In the exercise above -

• First, define an abstract class "Shape" with a property 'color' and an abstract method "getPerimeter()" for calculating the perimeter of a shape.
• Create derived classes 'Circle' and 'Rectangle' that extend Shape. Each derived class has its own properties and implements the "getPerimeter()" method with specific logic for calculating the perimeter of the respective shape.
• Create instances of 'Circle' and 'Rectangle', and then call the "getPerimeter()" method to calculate and display the perimeters of the shapes.

Output:

"Circle Perimeter: 31.41592653589793"
"Rectangle Perimeter: 20"

TypeScript Editor:

See the Pen TypeScript by w3resource (@w3resource) on CodePen.

Previous: TypeScript Multi-Level Inheritance.
Next: TypeScript Animal Sounds - Abstract Classes and Inheritance.