I have a JS library called leaflet which has an existing TypeScript definition file.
I wish to use a plugin which extends some of the objects in leaflet with an extra function.
In the existing TypeScript definition file the objects are defined as classes rather than interfaces.
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 as it's a class and not an interface, but that being the case is there a way to extend this class definition without changing the original definition file?
The base definition file is pulled in from DefinitelyTyped via nuget so I have a very strong desire not to make any changes to it as it'll make updating much more awkward/prone to failure.
CircleMarker
class isn't an interface
, so I don't see how it's relevant. The challenge is that interfaces are just compile time checks in TypeScript, so it's possible to "extend" them. However, classes are an actual JavaScript construct, and far more complex to extend cleanly and consistently.
If you don't control the original definition file, and can't make adjustments to it, then unfortunately, what you're trying to do isn't supported currently in TypeScript. An interface
in TypeScript is the only construct that allows reasonable extensions as it is only a compile-time/syntax check and not a run-time operation.
You cannot extend a class
in TypeScript with new functionality using only TypeScript (and expecting code-completion/Intellisense to work as expected). You could of course add the functions to the prototype
for the CircleMarker
class, but they would be unavailable to Intellisense and would fail to compile unless you use 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", {});
Thankfully, it doesn't add any run-time overhead, just a bit of extra typing (pun intended!).
There have been suggestions for things like "mix-ins" on CodePlex, but they have not been implemented. Even the mix-in suggestions would not be entirely straightforward to use, and wouldn't work well for libraries that weren't entirely written 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).
You can't do that with the class
keyword. There is a feature request you can vote on here : https://typescript.codeplex.com/workitem/917
You can however mimic classes using interfaces
as shown in the workaround (https://typescript.codeplex.com/workitem/917) for the issue. In your case
declare module L {
function circleMarker(latlng: LatLng, options?: PathOptions): CircleMarker;
declare var CircleMarker: CircleMarkerStatic;
export interface CircleMarkerStatic{
new (latlng: LatLng, options?: PathOptions): CircleMarker;
}
export interface CircleMarker {
setLatLng(latlng: LatLng): CircleMarker;
setRadius(radius: number): CircleMarker;
toGeoJSON(): any;
}
}
and extend it
declare module L {
export interface CircleMarker {
bindLabel(name: string, options: any): CircleMarker;
}
}
This is what I tried and it feels relatively comfortable for me
declare module L {
export class CircleMarkerEx {
constructor(source: CircleMarker);
public bindLabel(name: string, options: any): CircleMarker;
}
export function ex(cm: CircleMarker): CircleMarkerEx;
}
where CircleMarkerEx
and ex
can be defined as
class CircleMarkerExtender extends CircleMarker {
public b() {
return `${this.a()} extended`;
}
}
CircleMarker.prototype = Object.create(CircleMarkerExtender.prototype);
CircleMarker.prototype.constructor = CircleMarker;
export function ex(cm: CircleMarker) {
return cm as CircleMarkerExtender;
}
then
let cm = ex(circle).bindLabel("name", {});
but it is still a little strange
Is this possible?
declare module L {
export class MyCircleMarker extends CircleMarker{
bindLabel(name: string, options: any): CircleMarker;
}
}
And then define your CircleMarker instances as MyCircleMarker
Edit: this answer is off topic. It talks about interfaces and not classes like asked
I didn't have any problem extending a TypeScript (v3.6) external type definition.
Example with google.maps.Marker type definition:
// File types/googlemaps-marker-hello.d.ts or
// whatever file name you like, it doesn't matter
declare namespace google.maps {
interface Marker {
hello: string;
}
}
// Later on inside src/MyCode.ts
const marker = new google.maps.Marker();
marker.hello = 'Hello, World!';
You don't have to modify your tsconfig.json: it just works.
It's the way DefinitelyTyped works
declare module 'webpack' {
interface Configuration {
devServer?: WebpackDevServer.Configuration;
}
}
webpack-dev-server type definition extends webpack type definition. If you use @types/webpack and not @types/webpack-dev-server you won't have the devServer
property.
Another example:
declare namespace NodeJS {
interface Global {
hello: string;
}
}
global.hello = 'Hello, World!';
For those looking for the new/currently documented solution is found in:
https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
I have used this to extend the prototype for google-protobuf generated classes to add additional predicates.
import { CgMessage, CgType } from "./CgProto";
declare module './CgProto' {
interface CgMessage {
expectsAck(): boolean
}
}
CgMessage.prototype.expectsAck = function() {
return [CgType.send, CgType.join, CgType.leave].includes(this.type)
}
Success story sharing
class
, and it'd be nice to fix it by augmenting the definition.