"This" used as return type in TypeScript?

Question

I was testing out method chaining and found that it can be accomplished using "this" as a return type?

Here's an example:

class Shape {
    color: String;

    setColor(value: string): this { //Shape won't chain
        this.color = value;
        return this;
    }
}

class Square extends Shape {
    width: number;

    setWidth(value: number): Square {
        this.width = value;
        return this;
    }
}

function drawSquare(square: Square) {
    alert("width: " + square.width + "\ncolor: " + square.color);
}

let rect = new Square().setWidth(20).setColor("blue");
drawSquare(rect);

Example in playground

Is this the correct way of achieving method chaining when mixing base and inherited classes?

Answer 1

Surely, using polymorphic this makes fluent api's very easy to express as any subtypes 'flow' with the this type. Check the Advanced Types section, and F-bounded polymorphism.