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

Utilizing TypeScript with Svelte Components

Find keys in an array based on a specified value

"Implementing a Filter for Selecting Multiple Options in Ionic Framework

Resolve cyclic dependency caused by utilizing the useFactory parameter

What is the best way to send my Array containing Objects to the reducer using dispatch in redux?

A TypeScript object with user-defined keys

Attempting to create a login feature using phpMyAdmin in Ionic framework

Tips for receiving a linter/compiler warning when comparing a function without its call being made?

How can I simulate a callback function that was not tested?

Achieving the functionality of making only one list item in the navbar bolded upon being clicked using React and Typescript logic

Applying specific data types to object properties for precise value identification in Typescript

Angular 8 delivers an observable as a result following a series of asynchronous requests

Commit to calculating the total sum of each element using AngularJS

I am searching for answers to solve issues related to a JSON file

Is it possible to enter NaN in Vue3?

Capture a screenshot with Puppeteer at a random URL stop

Secure method of utilizing key remapped combined type of functions

Manipulate MySQL data in Node.js by storing it in a variable

Is there a way to extract the HTMLElement[] type from the DOM?

How to refresh a page manually in Angular 2