TypeScript - constructor overloads / multiple constructors / many constructors

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

Quick solutions:

1. with optional arguments (argName?: TypeHere):

class MyClassName {

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

        // conditions here ...
    }
}

2. using declared overloads and common constructor

class MyClassName {

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

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

        // conditions here ...
    }
}

3. using multiple types for arguments

class MyClassName {

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

        // conditions here ...
    }
}

Practical examples

1. Problem

Needed two or more constructors.

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#. The main idea to overload the constructor is to create a common constructor that checks what kind of parameters were passed to create an object and later do some logic for the proper case. Useful is to add constructors' definitions to help other programmers to know how to use class in a proper way.

2.1. Optional argument example

In this section ? operator was used to create a common constructor.

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. Declared overloads and common constructor example

In this section, we declared overloads with 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. Multiple types for arguments example

In this section, we used second 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 writing some logic to detect, which constructor has been used. public constructor(...args : Array<any>) contains common logic, where depending on used arguments special case of the object creating should be used. Using array in common constructor we are able to use totally different constructors with different types in the 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