Scribd
Upload
8 views35 pages

02 Typescript Abstract Classes Overview

An abstract class serves as a blueprint for other classes and cannot be instantiated directly. It can contain abstract methods that must be implemented by its subclasses, such as 'calculateArea()' in the example of a Shape class. Concrete subclasses like Circle and Rectangle must provide implementations for these abstract methods to define specific behaviors.

Uploaded by

montadhr.social
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views35 pages

02 Typescript Abstract Classes Overview

An abstract class serves as a blueprint for other classes and cannot be instantiated directly. It can contain abstract methods that must be implemented by its subclasses, such as 'calculateArea()' in the example of a Shape class. Concrete subclasses like Circle and Rectangle must provide implementations for these abstract methods to define specific behaviors.

Uploaded by

montadhr.social
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

Abstract Classes

Abstract Class

www.luv2code.com © luv2code LLC


Abstract Class

• An abstract class represents a general concept

www.luv2code.com © luv2code LLC


Abstract Class

• An abstract class represents a general concept

• For example: Shape, Vehicle, Computer, etc …

www.luv2code.com © luv2code LLC


Abstract Class

• An abstract class represents a general concept

• For example: Shape, Vehicle, Computer, etc …

• Can't create an instance of an abstract class

www.luv2code.com © luv2code LLC


Abstract Class

• An abstract class represents a general concept

• For example: Shape, Vehicle, Computer, etc …

• Can't create an instance of an abstract class

• Abstract class can also have abstract method(s)

www.luv2code.com © luv2code LLC


Abstract Class

• An abstract class represents a general concept

• For example: Shape, Vehicle, Computer, etc …

• Can't create an instance of an abstract class

• Abstract class can also have abstract method(s)

• Abstract method must be implemented by concrete subclasses

www.luv2code.com © luv2code LLC


Abstract Class Example

www.luv2code.com © luv2code LLC


Abstract Class Example

www.luv2code.com © luv2code LLC


Abstract Class Example
Abstract class

www.luv2code.com © luv2code LLC


Abstract Class Example
Abstract class

Abstract method

www.luv2code.com © luv2code LLC


Abstract Class Example
Abstract class
Every Shape subclass
must implement
Abstract method calculateArea()

www.luv2code.com © luv2code LLC


Abstract Class Example
Abstract class
Every Shape subclass
must implement
Abstract method calculateArea()

Area of circle
π * r2

www.luv2code.com © luv2code LLC


Abstract Class Example
Abstract class
Every Shape subclass
must implement
Abstract method calculateArea()

Area of circle Area of rectangle


π * r2 width * length

www.luv2code.com © luv2code LLC


Abstract Class Example

www.luv2code.com © luv2code LLC


Abstract Class Example

File: Shape.ts

export abstract class Shape {

// previous code ...

abstract calculateArea(): number;


}

www.luv2code.com © luv2code LLC


Abstract Class Example
Mark the class as
abstract
File: Shape.ts

export abstract class Shape {

// previous code ...

abstract calculateArea(): number;


}

www.luv2code.com © luv2code LLC


Abstract Class Example
Mark the class as
abstract
File: Shape.ts

export abstract class Shape {

// previous code ...

abstract calculateArea(): number;


}

Abstract method

www.luv2code.com © luv2code LLC


Abstract Class Example
Mark the class as
abstract
File: Shape.ts

export abstract class Shape {

// previous code ... File: Rectangle.ts

import { Shape } from './Shape';


abstract calculateArea(): number;
} export class Rectangle extends Shape {

// previous code ...

Abstract method calculateArea(): number {


return this._width * this._length;
}
}

www.luv2code.com © luv2code LLC


Abstract Class Example
Mark the class as
abstract
File: Shape.ts

export abstract class Shape {

// previous code ... File: Rectangle.ts

import { Shape } from './Shape';


abstract calculateArea(): number;
} export class Rectangle extends Shape {

// previous code ...

Abstract method calculateArea(): number {


Override the
return this._width * this._length;
calculateArea() method }
}

www.luv2code.com © luv2code LLC


Circle

www.luv2code.com © luv2code LLC


Circle

File: Shape.ts

export abstract class Shape {

// previous code ...

abstract calculateArea(): number;


}

www.luv2code.com © luv2code LLC


Circle

File: Shape.ts

export abstract class Shape { File: Circle.ts

import { Shape } from './Shape';


// previous code ...

export class Circle extends Shape {


abstract calculateArea(): number;
}
// previous code ...

calculateArea(): number {
return Math.PI * Math.pow(this._radius, 2);
}
}

www.luv2code.com © luv2code LLC


Circle

File: Shape.ts

export abstract class Shape { File: Circle.ts

import { Shape } from './Shape';


// previous code ...

export class Circle extends Shape {


abstract calculateArea(): number;
}
// previous code ...

calculateArea(): number {
Override the return Math.PI * Math.pow(this._radius, 2);
calculateArea() method }
}

www.luv2code.com © luv2code LLC


Circle

File: Shape.ts

export abstract class Shape { File: Circle.ts

import { Shape } from './Shape';


// previous code ...

export class Circle extends Shape {


abstract calculateArea(): number;
}
// previous code ...

calculateArea(): number {
Override the return Math.PI * Math.pow(this._radius, 2);
calculateArea() method }
}

Area of circle
π * r2

www.luv2code.com © luv2code LLC


Circle
Math is a built-in object that has properties and methods for
mathematical constants and functions

File: Shape.ts

export abstract class Shape { File: Circle.ts

import { Shape } from './Shape';


// previous code ...

export class Circle extends Shape {


abstract calculateArea(): number;
}
// previous code ...

calculateArea(): number {
Override the return Math.PI * Math.pow(this._radius, 2);
calculateArea() method }
}

Area of circle
π * r2

www.luv2code.com © luv2code LLC


Creating an Instance

www.luv2code.com © luv2code LLC


Creating an Instance

let myShape = new Shape(10, 15);


console.log(myShape.getInfo());

www.luv2code.com © luv2code LLC


Creating an Instance

let myShape = new Shape(10, 15);


console.log(myShape.getInfo());
This will NOT compile since
Shape is an abstract class

Can't create instance of


abstract class directly

Only concrete subclasses:


Circle, Rectangle, …

www.luv2code.com © luv2code LLC


Creating an Array of Shapes

www.luv2code.com © luv2code LLC


Creating an Array of Shapes
File: ArrayDriver.ts

… …

let myCircle = new Circle(5, 10, 20);


let myRectangle = new Rectangle(0, 0, 3, 7);

// declare an array for shapes … initially empty


let theShapes: Shape[] = [];

// add the shapes to the array


theShapes.push(myCircle);
theShapes.push(myRectangle);

for (let tempShape of theShapes) {


console.log(tempShape.getInfo());
console.log("Area=" + tempShape.calculateArea());
console.log();
}

www.luv2code.com © luv2code LLC


Creating an Array of Shapes
File: ArrayDriver.ts

… …

let myCircle = new Circle(5, 10, 20);


let myRectangle = new Rectangle(0, 0, 3, 7);

// declare an array for shapes … initially empty


let theShapes: Shape[] = [];

// add the shapes to the array


theShapes.push(myCircle);
theShapes.push(myRectangle);

for (let tempShape of theShapes) {


console.log(tempShape.getInfo());
console.log("Area=" + tempShape.calculateArea());
console.log();
}

www.luv2code.com © luv2code LLC


Creating an Array of Shapes
File: ArrayDriver.ts

… …

let myCircle = new Circle(5, 10, 20);


let myRectangle = new Rectangle(0, 0, 3, 7);

// declare an array for shapes … initially empty


let theShapes: Shape[] = [];

// add the shapes to the array


theShapes.push(myCircle);
theShapes.push(myRectangle);
x=5, y=10, radius=20
for (let tempShape of theShapes) { Area=1256.6370614359173
console.log(tempShape.getInfo());
console.log("Area=" + tempShape.calculateArea()); x=0, y=0, width=3, length=7
console.log(); Area=21
}

www.luv2code.com © luv2code LLC


Creating an Array of Shapes
File: ArrayDriver.ts

… …

let myCircle = new Circle(5, 10, 20);


let myRectangle = new Rectangle(0, 0, 3, 7);

// declare an array for shapes … initially empty


let theShapes: Shape[] = [];

// add the shapes to the array


Area of circle
theShapes.push(myCircle);
theShapes.push(myRectangle);
π * r2
x=5, y=10, radius=20
for (let tempShape of theShapes) { Area=1256.6370614359173
console.log(tempShape.getInfo());
console.log("Area=" + tempShape.calculateArea()); x=0, y=0, width=3, length=7
console.log(); Area=21
}

www.luv2code.com © luv2code LLC


Creating an Array of Shapes
File: ArrayDriver.ts

… …

let myCircle = new Circle(5, 10, 20);


let myRectangle = new Rectangle(0, 0, 3, 7);

// declare an array for shapes … initially empty


let theShapes: Shape[] = [];

// add the shapes to the array


Area of circle
theShapes.push(myCircle);
theShapes.push(myRectangle);
π * r2
x=5, y=10, radius=20
for (let tempShape of theShapes) { Area=1256.6370614359173
console.log(tempShape.getInfo());
console.log("Area=" + tempShape.calculateArea()); x=0, y=0, width=3, length=7
console.log(); Area=21
}

Area of rectangle
width * length

www.luv2code.com © luv2code LLC

You might also like