Inheritance

Inheritance

www.luv2code.com © luv2code LLC

Inheritance

• TypeScript supports the object-oriented concept of inheritance

www.luv2code.com © luv2code LLC

Inheritance

• TypeScript supports the object-oriented concept of inheritance

• Define common properties and methods in the superclass

www.luv2code.com © luv2code LLC

Inheritance

• TypeScript supports the object-oriented concept of inheritance

• Define common properties and methods in the superclass

• Subclasses can extend superclasses and add properties and methods

www.luv2code.com © luv2code LLC

Inheritance

• TypeScript supports the object-oriented concept of inheritance

• Define common properties and methods in the superclass

• Subclasses can extend superclasses and add properties and methods

• Support for abstract classes and overriding

www.luv2code.com © luv2code LLC

Inheritance

• TypeScript supports the object-oriented concept of inheritance

• Define common properties and methods in the superclass

• Subclasses can extend superclasses and add properties and methods

• Support for abstract classes and overriding

www.luv2code.com © luv2code LLC

Inheritance

• TypeScript supports the object-oriented concept of inheritance

• Define common properties and methods in the superclass

• Subclasses can extend superclasses and add properties and methods

• Support for abstract classes and overriding

• TypeScript only supports single inheritance

www.luv2code.com © luv2code LLC

Inheritance

• TypeScript supports the object-oriented concept of inheritance

• Define common properties and methods in the superclass

• Subclasses can extend superclasses and add properties and methods

• Support for abstract classes and overriding

• TypeScript only supports single inheritance

• However, you can implement multiple interfaces

www.luv2code.com © luv2code LLC

Inheritance Example

www.luv2code.com © luv2code LLC

Inheritance Example

www.luv2code.com © luv2code LLC

Inheritance Example

Can override the

getInfo() method

www.luv2code.com © luv2code LLC

Inheritance Example

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

}

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

}

Parameter
Properties

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

}

// get/set accessors ...

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

}

// get/set accessors ...

getInfo(): string {
return `x=${this._x}, y=${this._y}`;
}
}

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

File: Circle.ts
}
import { Shape } from './Shape';
// get/set accessors ...

getInfo(): string {
return `x=${this._x}, y=${this._y}`;
}
}

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

File: Circle.ts
}
import { Shape } from './Shape';
// get/set accessors ...
export class Circle extends Shape {
getInfo(): string {
return `x=${this._x}, y=${this._y}`;
}
}

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape { Inheritance

constructor(private _x: number, private _y: number) {
File: Circle.ts
}
import { Shape } from './Shape';
// get/set accessors ...
export class Circle extends Shape {
getInfo(): string {
return `x=${this._x}, y=${this._y}`;
}
}

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

File: Circle.ts
}
import { Shape } from './Shape';
// get/set accessors ...
export class Circle extends Shape {
getInfo(): string {
return `x=${this._x}, y=${this._y}`; constructor(theX: number, theY: number,
} private _radius: number) {
} super(theX, theY);
}

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

File: Circle.ts
}
import { Shape } from './Shape'; Regular parameters
// get/set accessors ... theX and theY
export class Circle extends Shape {
getInfo(): string {
return `x=${this._x}, y=${this._y}`; constructor(theX: number, theY: number,
} private _radius: number) {
} super(theX, theY);
}

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

File: Circle.ts
}
import { Shape } from './Shape'; Regular parameters
// get/set accessors ... theX and theY
export class Circle extends Shape {
getInfo(): string {
return `x=${this._x}, y=${this._y}`; constructor(theX: number, theY: number,
} private _radius: number) {
} super(theX, theY);
}

Parameter Property
_radius

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

File: Circle.ts
}
import { Shape } from './Shape'; Regular parameters
// get/set accessors ... theX and theY
export class Circle extends Shape {
getInfo(): string {
return `x=${this._x}, y=${this._y}`; constructor(theX: number, theY: number,
} private _radius: number) {
} super(theX, theY);
}

Call superclass Parameter Property

constructor _radius

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

File: Circle.ts
}
import { Shape } from './Shape';
// get/set accessors ...
export class Circle extends Shape {
getInfo(): string {
return `x=${this._x}, y=${this._y}`; constructor(theX: number, theY: number,
} private _radius: number) {
} super(theX, theY);
}

// get/set accessors ...

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

File: Circle.ts
}
import { Shape } from './Shape';
// get/set accessors ...
export class Circle extends Shape {
getInfo(): string {
return `x=${this._x}, y=${this._y}`; constructor(theX: number, theY: number,
} private _radius: number) {
} super(theX, theY);
}

// get/set accessors ...

getInfo(): string {
return super.getInfo() + `, radius=${this._radius}`;
}
}

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

File: Circle.ts
}
import { Shape } from './Shape';
// get/set accessors ...
export class Circle extends Shape {
getInfo(): string {
return `x=${this._x}, y=${this._y}`; constructor(theX: number, theY: number,
} private _radius: number) {
} super(theX, theY);
}

// get/set accessors ...

Override the
getInfo() method getInfo(): string {
return super.getInfo() + `, radius=${this._radius}`;
}
}

www.luv2code.com © luv2code LLC

 Inheritance Example
File: Shape.ts

export class Shape {

constructor(private _x: number, private _y: number) {

File: Circle.ts
}
import { Shape } from './Shape';
// get/set accessors ...
export class Circle extends Shape {
getInfo(): string {
return `x=${this._x}, y=${this._y}`; constructor(theX: number, theY: number,
} private _radius: number) {
} super(theX, theY);
} Call superclass
method
// get/set accessors ...
Override the
getInfo() method getInfo(): string {
return super.getInfo() + `, radius=${this._radius}`;
}
}

www.luv2code.com © luv2code LLC

Creating a main app

www.luv2code.com © luv2code LLC

 Creating a main app
File: Shape.ts

export class Shape {

…
getInfo() {
return `x=${this._x}, y=${this._y}`;
}
}

www.luv2code.com © luv2code LLC

 Creating a main app
File: Shape.ts

export class Shape {

…
getInfo() {
return `x=${this._x}, y=${this._y}`;
}
}

File: Circle.ts

import { Shape } from './Shape';

export class Circle extends Shape {

…
getInfo() {
return super.getInfo() + `, radius=${this._radius}`;
}
}

www.luv2code.com © luv2code LLC

 Creating a main app
File: Shape.ts

export class Shape {

File: Driver.ts
…
getInfo() { import { Shape } from './Shape';
return `x=${this._x}, y=${this._y}`; import { Circle } from './Circle';
}
}

File: Circle.ts

import { Shape } from './Shape';

export class Circle extends Shape {

…
getInfo() {
return super.getInfo() + `, radius=${this._radius}`;
}
}

www.luv2code.com © luv2code LLC

 Creating a main app
File: Shape.ts

export class Shape {

File: Driver.ts
…
getInfo() { import { Shape } from './Shape';
return `x=${this._x}, y=${this._y}`; import { Circle } from './Circle';
}
} let myShape = new Shape(10, 15);

File: Circle.ts

import { Shape } from './Shape';

export class Circle extends Shape {

…
getInfo() {
return super.getInfo() + `, radius=${this._radius}`;
}
}

www.luv2code.com © luv2code LLC

 Creating a main app
File: Shape.ts

export class Shape {

File: Driver.ts
…
getInfo() { import { Shape } from './Shape';
return `x=${this._x}, y=${this._y}`; import { Circle } from './Circle';
}
} let myShape = new Shape(10, 15);
console.log(myShape.getInfo());

File: Circle.ts

import { Shape } from './Shape';

export class Circle extends Shape {

…
getInfo() {
return super.getInfo() + `, radius=${this._radius}`;
}
}

www.luv2code.com © luv2code LLC

 Creating a main app
File: Shape.ts

export class Shape {

File: Driver.ts
…
getInfo() { import { Shape } from './Shape';
return `x=${this._x}, y=${this._y}`; import { Circle } from './Circle';
}
} let myShape = new Shape(10, 15);
console.log(myShape.getInfo());

File: Circle.ts let myCircle = new Circle(5, 10, 20);

import { Shape } from './Shape';

export class Circle extends Shape {

…
getInfo() {
return super.getInfo() + `, radius=${this._radius}`;
}
}

www.luv2code.com © luv2code LLC

 Creating a main app
File: Shape.ts

export class Shape {

File: Driver.ts
…
getInfo() { import { Shape } from './Shape';
return `x=${this._x}, y=${this._y}`; import { Circle } from './Circle';
}
} let myShape = new Shape(10, 15);
console.log(myShape.getInfo());

File: Circle.ts let myCircle = new Circle(5, 10, 20);

console.log(myCircle.getInfo());
import { Shape } from './Shape';

export class Circle extends Shape {

…
getInfo() {
return super.getInfo() + `, radius=${this._radius}`;
}
}

www.luv2code.com © luv2code LLC

 Creating a main app
File: Shape.ts

export class Shape {

File: Driver.ts
…
getInfo() { import { Shape } from './Shape';
return `x=${this._x}, y=${this._y}`; import { Circle } from './Circle';
}
} let myShape = new Shape(10, 15);
console.log(myShape.getInfo());

File: Circle.ts let myCircle = new Circle(5, 10, 20);

console.log(myCircle.getInfo());
import { Shape } from './Shape';

export class Circle extends Shape {

…
x=10, y=15
getInfo() {
x=5, y=10, radius=20
return super.getInfo() + `, radius=${this._radius}`;
}
}

www.luv2code.com © luv2code LLC

 Creating a main app
File: Shape.ts

export class Shape {

File: Driver.ts
…
getInfo() { import { Shape } from './Shape';
return `x=${this._x}, y=${this._y}`; import { Circle } from './Circle';
}
} let myShape = new Shape(10, 15);
console.log(myShape.getInfo());

File: Circle.ts let myCircle = new Circle(5, 10, 20);

console.log(myCircle.getInfo());
import { Shape } from './Shape';

export class Circle extends Shape {

…
x=10, y=15
getInfo() {
x=5, y=10, radius=20
return super.getInfo() + `, radius=${this._radius}`;
}
}

www.luv2code.com © luv2code LLC

 Creating a main app
File: Shape.ts

export class Shape {

File: Driver.ts
…
getInfo() { import { Shape } from './Shape';
return `x=${this._x}, y=${this._y}`; import { Circle } from './Circle';
}
} let myShape = new Shape(10, 15);
console.log(myShape.getInfo());

File: Circle.ts let myCircle = new Circle(5, 10, 20);

console.log(myCircle.getInfo());
import { Shape } from './Shape';

export class Circle extends Shape {

…
x=10, y=15
getInfo() {
x=5, y=10, radius=20
return super.getInfo() + `, radius=${this._radius}`;
}
}

www.luv2code.com © luv2code LLC

Rectangle
File: Rectangle.ts

www.luv2code.com © luv2code LLC

Rectangle
File: Rectangle.ts

import { Shape } from './Shape';

export class Rectangle extends Shape {

www.luv2code.com © luv2code LLC

Rectangle
File: Rectangle.ts

import { Shape } from './Shape';

export class Rectangle extends Shape {

constructor(theX: number, theY: number,

private _width: number, private _length: number) {

super(theX, theY);
}

www.luv2code.com © luv2code LLC

Rectangle
File: Rectangle.ts

import { Shape } from './Shape';

Regular parameters
theX and theY
export class Rectangle extends Shape {

constructor(theX: number, theY: number,

private _width: number, private _length: number) {

super(theX, theY);
}

www.luv2code.com © luv2code LLC

Rectangle
File: Rectangle.ts

import { Shape } from './Shape';

Regular parameters
theX and theY
export class Rectangle extends Shape {

constructor(theX: number, theY: number,

private _width: number, private _length: number) {

super(theX, theY);
}
Parameter Properties
_width and _length

www.luv2code.com © luv2code LLC

Rectangle
File: Rectangle.ts

import { Shape } from './Shape';

Regular parameters
theX and theY
export class Rectangle extends Shape {

constructor(theX: number, theY: number,

private _width: number, private _length: number) {

super(theX, theY);
}
Parameter Properties
_width and _length
Call superclass
constructor

www.luv2code.com © luv2code LLC

Rectangle
File: Rectangle.ts

import { Shape } from './Shape';

export class Rectangle extends Shape {

constructor(theX: number, theY: number,

private _width: number, private _length: number) {

super(theX, theY);
}

// get/set accessors ...

www.luv2code.com © luv2code LLC

Rectangle
File: Rectangle.ts

import { Shape } from './Shape';

export class Rectangle extends Shape {

constructor(theX: number, theY: number,

private _width: number, private _length: number) {

super(theX, theY);
}

// get/set accessors ...

www.luv2code.com © luv2code LLC

Rectangle
File: Rectangle.ts

import { Shape } from './Shape';

export class Rectangle extends Shape {

constructor(theX: number, theY: number,

private _width: number, private _length: number) {

super(theX, theY);
}

// get/set accessors ...

getInfo(): string {

www.luv2code.com © luv2code LLC

Rectangle
File: Rectangle.ts

import { Shape } from './Shape';

export class Rectangle extends Shape {

constructor(theX: number, theY: number,

private _width: number, private _length: number) {

super(theX, theY);
}

// get/set accessors ...

getInfo(): string {
return super.getInfo() + `, width=${this._width}, length=${this._length}`;

www.luv2code.com © luv2code LLC

Rectangle
File: Rectangle.ts

import { Shape } from './Shape';

export class Rectangle extends Shape {

constructor(theX: number, theY: number,

private _width: number, private _length: number) {

super(theX, theY);
}

// get/set accessors ...

getInfo(): string {
return super.getInfo() + `, width=${this._width}, length=${this._length}`;
}

www.luv2code.com © luv2code LLC

Rectangle
File: Rectangle.ts

import { Shape } from './Shape';

export class Rectangle extends Shape {

constructor(theX: number, theY: number,

private _width: number, private _length: number) {

super(theX, theY);
}

// get/set accessors ...

getInfo(): string {
return super.getInfo() + `, width=${this._width}, length=${this._length}`;
}
}

www.luv2code.com © luv2code LLC

Creating a main app

www.luv2code.com © luv2code LLC

Creating a main app
File: Driver.ts

import { Shape } from './Shape';

import { Circle } from './Circle';
import { Rectangle } from './Rectangle';

let myShape = new Shape(10, 15);

console.log(myShape.getInfo());

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

console.log(myCircle.getInfo());

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

console.log(myRectangle.getInfo());

www.luv2code.com © luv2code LLC

Creating a main app
File: Driver.ts

import { Shape } from './Shape';

import { Circle } from './Circle';
import { Rectangle } from './Rectangle';

let myShape = new Shape(10, 15);

console.log(myShape.getInfo());

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

console.log(myCircle.getInfo());

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

console.log(myRectangle.getInfo());

www.luv2code.com © luv2code LLC

Creating a main app
File: Driver.ts

import { Shape } from './Shape';

import { Circle } from './Circle';
import { Rectangle } from './Rectangle';

let myShape = new Shape(10, 15);

console.log(myShape.getInfo());

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

console.log(myCircle.getInfo());
x=10, y=15
x=5, y=10, radius=20
let myRectangle = new Rectangle(0, 0, 3, 7);
x=0, y=0, width=3, length=7
console.log(myRectangle.getInfo());

www.luv2code.com © luv2code LLC

Creating an Array of Shapes
File: ArrayDriver.ts

www.luv2code.com © luv2code LLC

Creating an Array of Shapes
File: ArrayDriver.ts

… …

let myShape = new Shape(10, 15);

let myCircle = new Circle(5, 10, 20);
let myRectangle = new Rectangle(0, 0, 3, 7);

www.luv2code.com © luv2code LLC

Creating an Array of Shapes
File: ArrayDriver.ts

… …

let myShape = new Shape(10, 15);

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[] = [];

www.luv2code.com © luv2code LLC

Creating an Array of Shapes
File: ArrayDriver.ts

… …

let myShape = new Shape(10, 15);

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(myShape);
theShapes.push(myCircle);
theShapes.push(myRectangle);

www.luv2code.com © luv2code LLC

Creating an Array of Shapes
File: ArrayDriver.ts

… …

let myShape = new Shape(10, 15);

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(myShape);
theShapes.push(myCircle);
theShapes.push(myRectangle);

for (let tempShape of theShapes) {

console.log(tempShape.getInfo());
}

www.luv2code.com © luv2code LLC

Creating an Array of Shapes
File: ArrayDriver.ts

… …

let myShape = new Shape(10, 15);

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(myShape);
theShapes.push(myCircle);
x=10, y=15
theShapes.push(myRectangle);
x=5, y=10, radius=20
x=0, y=0, width=3, length=7
for (let tempShape of theShapes) {
console.log(tempShape.getInfo());
}

www.luv2code.com © luv2code LLC

Creating an Array of Shapes
File: ArrayDriver.ts

… …

let myShape = new Shape(10, 15);

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(myShape);
theShapes.push(myCircle);
x=10, y=15
theShapes.push(myRectangle);
x=5, y=10, radius=20
x=0, y=0, width=3, length=7
for (let tempShape of theShapes) {
console.log(tempShape.getInfo());
}

www.luv2code.com © luv2code LLC

Creating an Array of Shapes
File: ArrayDriver.ts

… …

let myShape = new Shape(10, 15);

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(myShape);
theShapes.push(myCircle);
x=10, y=15
theShapes.push(myRectangle);
x=5, y=10, radius=20
x=0, y=0, width=3, length=7
for (let tempShape of theShapes) {
console.log(tempShape.getInfo());
}

www.luv2code.com © luv2code LLC