Skip to content

Instantly share code, notes, and snippets.

@P4
Created September 7, 2016 20:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save P4/2023d01e7fd52ef326cb83fcead56422 to your computer and use it in GitHub Desktop.
Save P4/2023d01e7fd52ef326cb83fcead56422 to your computer and use it in GitHub Desktop.
Testing extending Leaflet components via TypeScript's inheritance model
/// <reference path='../leaflet/leaflet.d.ts' />
namespace L {
type LatLngExpression = L.LatLng | number[] | ({ lat: number; lng: number });
export var JSMarker = L.Marker.extend({
options: { title: 'MyMarker' },
initialize: function(latLng: LatLngExpression, options?: L.MarkerOptions) {
L.Util.setOptions(this, options)
L.Marker.prototype.initialize.call(this, latLng, this.options);
},
greet: function() {
this.bindPopup("Hello! JS here!")
return this;
}
})
export class TSMarker extends L.Marker {
options: L.MarkerOptions
constructor(latLng: LatLngExpression, options?: L.MarkerOptions) {
super(latLng, options)
}
greet(): this {
this.bindPopup("Hello! TSX here!")
return this
}
}
// Default options
TSMarker.prototype.options = {
title: 'MyMarker',
clickable: true,
icon: L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76],
})
}
}
@s-nt-s
Copy link

s-nt-s commented Dec 19, 2022

Did it works?
I am rewriting a javascript code where L.Map was extend using .extend({...}) to a typescript using class declaration and I am having stranges sides effetes.
I don't sure if .extend and typescript class declaration are equivalents or not.

@P4
Copy link
Author

P4 commented Dec 19, 2022

@s-nt-s IIRC they're not 100% equivalent, extend does some extra things that the above code does not do, and would require additional code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment