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

0 votes

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.

Jun 10 in TypeSript by Logan
• 2,140 points
153 views

1 answer to this question.

0 votes

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).

answered Jun 10 by Nina
• 3,020 points

Related Questions In TypeSript

0 votes
1 answer
0 votes
1 answer

How to declare and initialize a Dictionary in Typescript

Apparently this doesn't work when passing the ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
206 views
0 votes
1 answer

TypeScript: How do you loop through a dictionary?

To loop over the key/values, use a for ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
45 views
0 votes
1 answer
0 votes
1 answer

Cannot access web3 object with typescript and ethereum

You still need to instantiate it first. ...READ MORE

answered Sep 25, 2018 in Blockchain by slayer
• 29,310 points
1,857 views
0 votes
1 answer

How to apply zoom animation for each element of a list in angular?

Hey @Sid, do check if this link ...READ MORE

answered Jul 30, 2019 in Others by Vardhan
• 13,200 points
511 views
0 votes
1 answer

Can't bind to 'formGroup' since it isn't a known property of 'form'

In order to rectify this error, you ...READ MORE

answered Feb 10 in Others by Rahul
• 9,000 points
1,187 views
0 votes
1 answer

How can I define a type for a CSS color in TypeScript?

There was a proposal for a type of ...READ MORE

answered Jun 15 in TypeSript by Nina
• 3,020 points
11 views
0 votes
1 answer

What do square brackets mean in a type definition in Typescript?

I've missed a basic type of TypeScript: Tuples. So ...READ MORE

answered Jun 22 in TypeSript by Nina
• 3,020 points
73 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP