Created
September 7, 2016 20:49
-
-
Save P4/2023d01e7fd52ef326cb83fcead56422 to your computer and use it in GitHub Desktop.
Testing extending Leaflet components via TypeScript's inheritance model
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// <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 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
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.