Typescript - extend external Javascript library

Question

I am building a Typescript application, and I'm using an external js library (pixi.js for rendering). I have the .d.ts file and it's all working fine.

The file declares a class Point:

export class Point {

    x: number;
    y: number;

    constructor(x?: number, y?: number);

    clone(): Point;
    copy(p: Point): void;
    equals(p: Point): boolean;
    set(x?: number, y?: number): void;

}

I was wondering if there was any decent way to add functionality to this, or other, classes that are declared in a .d.ts file. For example, in this case, I could really use an add(), subtract(), negate() method and so on.

EDIT: To clarify, I do not want to extend this class by way of creating a subclass. I want to add functionality to the class itself. I don't want to have to deal with two classes (e.g. Point and PointEx) in my code - pixi uses Point internally and often returns it from functions, so I don't want the added overhead of casting Point to the extended object.

Nitzan Tomer · Accepted Answer · 2016-05-18 11:22:07Z

9

You can extend that class like with any other class:

class MyPoint extends Point {
    private name: string;

    constructor(name: string, x?: number, y?: number) {
        super(x, y);

        this.name = name;
    }

    public getName() {
        return this.name;
    }

    public add(other: Point): Point {
        return new Point(this.x + other.x, this.y + other.y);
    }
}

Edit

You can extend it using the prototype, like this:

interface Point {
    add(other: Point): Point;
}

Point.prototype.add = function(other: Point): Point {
    return new Point(this.x + other.x, this.y + other.y);
}

The first part (with the interface) is called Declaration Merging and it's when you add more definitions to exiting types.
The other part is the implementation of the function and adding it to the Point.prototype.

While this works, I would not recommend it:
The base Point is out of your control, what happens if tomorrow they change it and add their own add method which has a different signature than yours? You'll be forced to change your entire code base because of that.

What you can do with your own point class (which extends the base one) is to have a ctor from the base:

class MyPoint extends Point {
    constructor(base: Point) {
        super(base.x, base.y);

        // ...
    }
}

Or, add a factory method to the Point.prototype:

interface Point {
    toMyPoint(): MyPoint;
}

Point.prototype.toMyPoint = function(): MyPoint {
    return new MyPoint(this);
}

Both of these ways give you a convenient way of getting MyPoint out of a Point which you get as a result of some execution.

edited May 18, 2016 at 11:22

answered May 18, 2016 at 10:47

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Over a year ago

Thanks for the answer! It's not what I am looking for however. I've clarified my position on the OP.

Nitzan Tomer Over a year ago

gotcha! check my revised answer

Tobia Over a year ago

This is a great answer. If you don't mind me asking, how can I extend a class that is not exported? I would like to extend this Itiriri class to add a couple methods, but the library does not export it.

Nitzan Tomer Over a year ago

@Tobia you can't, you don't have direct access to it, looks like it was intentional, they only export the function, and want to keep the class as implementation detail. you can make a copy of that file in your source and use it

Collectives™ on Stack Overflow

Typescript - extend external Javascript library

1 Answer 1

Edit

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related