Languages
[Edit]
EN

TypeScript - constructor overloads / multiple constructors / many constructors

7 points
Created by:
AnnLen
1771

In this article, we're going to have a look at how to overload constructor in TypeScript.

1. Problem

Needed two or more contructors.

class MyClassName {

    public constructor(a : number);
    public constructor(a : number, b : number);
}

2. Solution

In TypeScript constructor overloading looks different way than in C++, Java or C#. Main idea to overload constructor is to create common constructor that checks what kind of parameters were passed to create object and later do some logic for proper case. Useful is to add constructors definitions to help other programmers to know how to use class in proper way.

2.1. Optional argument example

In this section  ? operator were used to create common contructor.

class MyClassName {

    //public constructor(a: number);
    //public constructor(a: number, b: number);

    public constructor(a: number, b?: number) {

        if (b === undefined) {
            console.log('Used constructor 1');
        } else {
            console.log('Used constructor 2');
        }
    }
}

2.2. Common constructor example

In this section we used array to describe common constructor.

class MyClassName {

    public constructor(a : number);
    public constructor(a : number, b : number);

    public constructor(...args: any[]) {

        if (args.length === 1) {
            console.log('Used constructor 1');
            return;
        }
        if (args.length === 2) {
            console.log('Used constructor 2');
            return;
        }
        throw new Error('Undefined constructor.');
    }
}

2.3. Argument with multiple type example

In this section we used argument with two types.

class MyClassName {

    //public constructor(a: number, b: number);
    //public constructor(a: number, b: string);

    public constructor(a: number, b: number | string) {

        if (typeof b === 'number') {
            console.log('Used constructor 1');
        } else {
            console.log('Used constructor 2');
        }
    }
}

3. More complicated example

Constructor overloading requires to write some logic to detect which constructor has been used. public constructor(...args : Array<any>) contains common logic where depending of used arguments special case of object creating should be used. Using array in common contructor we are able to use totally different constructors with different types on same place. 

class Point {
    private coordinates : Array<number>;

    public constructor(x: number, y: number);
    public constructor(x: number, y: number, z: number);
    public constructor(x: number, y: number, z: number, ...coordinates: Array<number>);
    public constructor(coordinates: Array<number>);

    public constructor(...args: Array<any>) { // common logic constructor

        if (args.length === 0) {
            throw new Error('Arguments are not defined.');
        }
        let arg = args[0];
        if (Array.isArray(arg)) {
            if(arg.length < 2) {
                throw new Error('Minimum number of dimmensions is 2.');
            }
            this.coordinates = arg;
        } else {
            this.coordinates = args;
        }
    }

    public getCoordinate(dimmension: number): number {
        return this.coordinates[dimmension];
    }

    public toString(): string {
        let result = '{';
        if (this.coordinates.length > 0) {
            result += ' ' + this.coordinates[0];
            for (let i = 1; i < this.coordinates.length; ++i) {
                result += ', ' + this.coordinates[i];
            }
        }
        return result + ' }';
    }
}

let a = new Point(1, 2);
let b = new Point(1, 2, 3);
let c = new Point(1, 2, 3, 4);
let d = new Point([1, 2]);
let e = new Point([1, 2, 3]);
let f = new Point([1, 2, 3, 4]);

console.log(a.toString());
console.log(b.toString());
console.log(c.toString());
console.log(d.toString());
console.log(e.toString());
console.log(f.toString());

Output:

{ 1, 2 }
{ 1, 2, 3 }
{ 1, 2, 3, 4 }
{ 1, 2 }
{ 1, 2, 3 }
{ 1, 2, 3, 4 }

Note: big number of overloading can lead to big amount of mistakes so it is better to avoid this technic.

4. References

  1. Methods Overloading - Microsoft Docs
Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.