How do I extend a TypeScript class definition in a separate definition file

Question

Leaflet is a JS library that contains an existing TypeScript definition file.

I'd want to utilise a plugin that adds an extra function to some of the leaflet objects.

The objects are declared as classes rather than interfaces in the existing TypeScript definition file.

e.g.

declare module L {
    function circleMarker(latlng: LatLng, options?: PathOptions): CircleMarker;

    export class CircleMarker extends Circle {
        constructor(latlng: LatLng, options?: PathOptions);
        setLatLng(latlng: LatLng): CircleMarker;
        setRadius(radius: number): CircleMarker;
        toGeoJSON(): any;
    }
}

If I try and define it a second time in a separate file then I get an error about "Duplicate Identifier 'CircleMarker'.".

declare module L {
    export class CircleMarker {
        bindLabel(name: string, options: any): CircleMarker;
    }
}

This makes sense because it's a class rather than an interface, but is there a method to modify the class definition without affecting the original definition file?

I don't want to modify the basic definition file because it's pulled in from DefinitelyTyped via nuget, and it'll make upgrading much more difficult/prone to failure.

Answer 1

If you don't have control over the original definition file and can't make changes to it, TypeScript presently doesn't support what you're trying to achieve. Because it is merely a compile-time/syntax check and not a run-time activity, an interface in TypeScript is the only construct that supports sensible modifications.

You can't add additional functionality to a TypeScript class using solely TypeScript (and expect code completion/Intellisense to behave as planned). Of course, you could add the functions to the CircleMarker class prototype, but they would be inaccessible to Intellisense and would cause the code to fail to build unless you used a type assertion.

Instead of using any, you should be able to use an interface with the type assertion:

declare module L {
    export interface CircleMarkerEx {
        bindLabel(name: string, options: any): CircleMarker;
    }
}

Then:

var cm = <L.CircleMakerEx> circle.bindLabel("name", {});

There have been suggestions for things like "mix-ins" on CodePlex, but they have not been implemented.Even the mix-in suggestions would be difficult to utilise and wouldn't work effectively for libraries that weren't developed entirely in TypeScript (as it would be too easy to have JavaScript code that simply could not be safely constructed for example with a mix-in).