Skip to content

Instantly share code, notes, and snippets.

@P4
Created September 7, 2016 20:49
Show Gist options
  • Select an option

  • Save P4/2023d01e7fd52ef326cb83fcead56422 to your computer and use it in GitHub Desktop.

Select an option

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

s-nt-s commented Dec 19, 2022

Copy link
Copy Markdown

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

P4 commented Dec 19, 2022

Copy link
Copy Markdown
Author

@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