What is the reason behind Typescript executing the abstract class before anything else?

Question

What is the reason behind Typescript executing the abstract class before anything else?

I'm currently facing a challenge solving an abstract class problem with Typescript. Let me explain what I am trying to accomplish.

There is a class named Sword that extends Weapon. Each Weapon must have certain properties like the damage, but since each weapon type inflicts different levels of damage (for example, a sword may deal 1 damage while a bow deals 2 damage), I need to define specific properties in the Sword class. Here's how my script looks:

abstract class Weapon
{
    protected abstract damage: number;
    constructor() {
        alert(this.damage);
    }

    showDamage() {
        alert(this.damage);
    }
}

class Sword extends Weapon implements WeaponInterface {
    protected damage: number = 999;

    constructor() {
        super();
    }
}

const sword = new Sword;
sword.showDamage();

When running this script on

http://www.typescriptlang.org/play/

, I receive two messages:

undefined
999

I'm unsure why the Weapon.constructor gets executed first. This seems to defeat the purpose of declaring an abstract value. If I have to use super(this.damage) to pass it into the Weapon class, there doesn't seem to be a need for protected abstract damage.

If I can't even establish basic inheritance in Typescript, why does it offer support for abstract classes? It forces me to do new Weapon(new Sword), making it impossible to typehint a SwordInterface on other classes like Inventory.

class Inventory
{
    // Assuming we are equipped with a "Shield," we can only equip items of type "Sword"
    addSword(sword: SwordInterface): void {

    }
}

As someone new to compiled languages and Typescript, I'm seeking guidance on the proper way to achieve this without resorting to passing class properties into the super() call.

I want to maintain inheritance and interfaces without any disruptions.

inheritance typescript

Answer 1

Answer №1

When it comes to Typescript, property initialization in the class body is not treated in a special way; it is done as part of the class constructor. However, one could envision a language where this assignment happens very early, before any constructor is executed. Typescript does not follow this approach, likely because it may not be the most straightforward and coherent method.

class Sword extends Weapon implements WeaponInterface {
    protected damage: number = 999;

Therefore, you need to take matters into your own hands. One approach to accomplish your desired outcome is by splitting your code in constructors into two parts: one for initializing variables and the other for executing the remaining logic. This strategy is sometimes referred to as two-phase initialization:

abstract class Weapon
{
    protected abstract damage: number;

    // NOTE: abstract properties must be initialized by subclasses
    //     in initialize() because they are used here in Weapon class constructor
    protected initialize(): void { }

    constructor() {
        this.initialize();
        alert(this.damage);
    }

    showDamage() {
        alert(this.damage);
    }
}

class Sword extends Weapon  {
    protected damage: number;

    protected initialize(): void {
        super.initialize();
        this.damage = 999;
    }

    constructor() {
        super();
    }
}

const sword = new Sword;
sword.showDamage(); // shows 999 twice

Answer 2

When it comes to Typescript, property initialization in the class body is not treated in a special way; it is done as part of the class constructor. However, one could envision a language where this assignment happens very early, before any constructor is executed. Typescript does not follow this approach, likely because it may not be the most straightforward and coherent method.

class Sword extends Weapon implements WeaponInterface {
    protected damage: number = 999;

Therefore, you need to take matters into your own hands. One approach to accomplish your desired outcome is by splitting your code in constructors into two parts: one for initializing variables and the other for executing the remaining logic. This strategy is sometimes referred to as two-phase initialization:

abstract class Weapon
{
    protected abstract damage: number;

    // NOTE: abstract properties must be initialized by subclasses
    //     in initialize() because they are used here in Weapon class constructor
    protected initialize(): void { }

    constructor() {
        this.initialize();
        alert(this.damage);
    }

    showDamage() {
        alert(this.damage);
    }
}

class Sword extends Weapon  {
    protected damage: number;

    protected initialize(): void {
        super.initialize();
        this.damage = 999;
    }

    constructor() {
        super();
    }
}

const sword = new Sword;
sword.showDamage(); // shows 999 twice

Answer 3

Answer №2

It's a given that base class constructors will always run before derived class constructors. Can you imagine any other scenario?

class Base {
  damage = 12;
}

class Derived extends Base {
  constructor() {
    // Do you expect this to output 'undefined'?
    console.log(this.damage);
  }
}

Answer 4

It's a given that base class constructors will always run before derived class constructors. Can you imagine any other scenario?

class Base {
  damage = 12;
}

class Derived extends Base {
  constructor() {
    // Do you expect this to output 'undefined'?
    console.log(this.damage);
  }
}

Answer 5

Answer №3

Prior to setting the damage property, the base constructor is executed first in this scenario. Here is the constructor for the Sword class:

function Sword() {
    var _this = _super.call(this) || this;
    _this.damage = 999;
    return _this;
}

An alternative approach would be to pass the damage as a parameter to the base constructor:

abstract class Weapon {

    protected damage: number;

    constructor(damage: number) {
        this.damage = damage;
        alert(this.damage);
    }

    showDamage() { /*...*/ }
}

class Sword extends Weapon  {

    constructor() {
        super(999);
    }
}

A more concise version could look like this:

abstract class Weapon {
    constructor(protected damage: number) {
        alert(this.damage);
    }

    showDamage() { /* ... */ }
}

Answer 6

Prior to setting the damage property, the base constructor is executed first in this scenario. Here is the constructor for the Sword class:

function Sword() {
    var _this = _super.call(this) || this;
    _this.damage = 999;
    return _this;
}

An alternative approach would be to pass the damage as a parameter to the base constructor:

abstract class Weapon {

    protected damage: number;

    constructor(damage: number) {
        this.damage = damage;
        alert(this.damage);
    }

    showDamage() { /*...*/ }
}

class Sword extends Weapon  {

    constructor() {
        super(999);
    }
}

A more concise version could look like this:

abstract class Weapon {
    constructor(protected damage: number) {
        alert(this.damage);
    }

    showDamage() { /* ... */ }
}

What is the reason behind Typescript executing the abstract class before anything else?

Answer №1

Answer №2

Answer №3

Similar questions

Converting the following ngRx selector to a boolean return – a guide

Tips for customizing the font color in Material UI Typography

Triggering an event in Angular 2 after ngFor loop completes

No declaration file was found for the module named 'vue2-timepicker'

The field '_id' is not present in the type Pick

Resolving the error "Property not found on type 'any[]' after retrieving an object from the database in Typescript"

Tips for incorporating Material UI Icon v1.0.0-beta.36 into a .tsx component

What is the best way to assign table rows to various interfaces in typescript?

NextJS Typescript Layout is throwing errors due to the absence of required props

Using TypeScript, pass an image as a prop in a Styled Component

Angular 5 - Creating a dynamic function that generates a different dynamic function

Issue with Formik compatibility in Next JS 14 Application Structure

Customizing MUI DataGrid: Implementing unique event listeners like `rowDragStart` or `rowDragOver`

Creating an npm library using TypeScript model classes: A step-by-step guide

Error with React Query Mutation and TypeScript: The argument '{ surgeryID: any; stageTitle: any; }' cannot be assigned to a parameter of type 'void'

Typescript implementation for a website featuring a single overarching file alongside separate files for each individual webpage

The functionality of allowEmpty : true in gulp 4.0 does not seem to be effective when dealing with

Determine the class of an object within the "keyof" parameter by utilizing both property and generic types

Creating HTML elements dynamically based on the value of a prop within a React component

The received data object appears to be currently undefined