CODEWITHSUNDEEP
htmlangulartypescriptleafletleaflet.markercluster
OmarLittle
OmarLittle

Reputation: 503

Property '_popup' does not exist on type 'Marker<any>'

So, I am building a map using angular and leaflet. One of the things that I use is leaflet.markercluster. When i click on the cluster I want the popup content of a random marker of a cluster to be written somewhere. To access the popup content of some random cluster I did this:

 cluster.getAllChildMarkers()[0]._popup._content

and got an error: Property '_popup' does not exist on type 'Marker'.

But the thing is, if I do ng serve first time it failes to compile, but if I change anything and save all it compiles sucessfully with the errors and I can see the content of the popup.

Also, if I do console.log(cluster.getAllChildMarkers()[0]) and I inspect element on webpage I get the regular console log of a marker with latlng andall other atributtes, including _popup.

Does anybody know why does typescript/vscode log an error, but html console sees it normally?

Upvotes: 1

Views: 1378

Answers (1)

ghybs
ghybs

Reputation: 53280

Because TypeScript is more strict than JavaScript, it warns you of potential issues that may actually work just fine once transpiled in JS.

In this specific case, this is simply due to the pseudo private properties ("_popup" follows the usual JS libraries convention of using an underscore _ prefix to denote pseudo private members) not being declared on the TS types of Leaflet, since you are not expected to use them.

But of course this is still technically valid in JS, so you can tell the TS compiler "I know what I am doing" by using the //@ts-ignore comment directive just above that line.

Or longer but much better, since you can remain under TS watch: use actual Leaflet API to achieve what you are doing:

cluster.getAllChildMarkers()[0].getPopup()?.getContent()

Upvotes: 2

Related Questions