search

vue-leaflet / Vue2Leaflet

Vue 2 components for Leaflet maps
https://vue2-leaflet.netlify.app
MIT License
1.95k stars 379 forks source link

Workaround for Missing Icon not Work at Typescript 4 #627

Closed berviantoleo closed 3 years ago

berviantoleo commented 4 years ago

Description

I use typescript in my application, but after some update the typescript into version 4, it will not work the workaround that provided in docs:

https://vue2-leaflet.netlify.app/quickstart/#marker-icons-are-missing

type D = Icon.Default & {
  _getIconUrl: string;
};

delete (Icon.Default.prototype as D)._getIconUrl;

Here my CI: https://travis-ci.com/github/bervProject/Pulau-Sebuku-GIS/builds/184047806

I suggest to have another customization:

type D = Icon.Default & {
  _getIconUrl?: string;
};

delete (Icon.Default.prototype as D)._getIconUrl;

The result after add ? : https://travis-ci.com/github/bervProject/Pulau-Sebuku-GIS/builds/184069620

Also the icon still showing as my expection: https://bervproject.berviantoleo.my.id/Pulau-Sebuku-GIS/#/

Is it better to use ? and update the docs?

Live Demo

Steps to Reproduce

Update typescript from 3 to 4.

Expected Results

The workaround should be supported for Typescript 4 and have build success

Actual Results

The workaround not supported for Typescript 4, only Typescript 3 that have build success.

Versions

mikeu commented 3 years ago

Hi @berviantoleo , thank you for this report!

It indeed seems that this is a change introduced in Typescript 4, which now requires operands for delete to be optional (when strictNullChecks is enabled).

As far as I can tell, there is no issue with making the _getIconUrl property optional in earlier versions of Typescript (I checked it with 3.3), and it is required to do so as of v4, so I agree that the docs should be updated. Can you confirm too, as far as you know there is no problem adding the ? if you are using Typescript 3, right?

berviantoleo commented 3 years ago

Hi, @mikeu .

I try use 3.9.7. Seems not have problem when add the ?

Here my example:

Youtube Link - Typescript 3, Vue2 Leaflet

mikeu commented 3 years ago

Thank you for that confirmation, @berviantoleo ! Definitely seems as if the ? is not a problem in either version then, so we have updated the quickstart docs with your suggestion. Thanks again!