Annoying TS error when using Map

[sjmcdowall]

So I finally have a simple map going (yay!) -- but I am using SvelteKit -- and it has TypeScript on by default (or at least this project does) -- and besides VS Code complainign about a bunch of things in Map itself it does like:

• Property 'mapboxgl' does not exist on type 'Window & typeof globalThis'.[76,12]
• Property 'mapboxgl' does not exist on type 'Window & typeof globalThis'.[77,21]
• Type 'boolean' is not assignable to type 'string'. [134,39]
• Property 'mapboxgl' does not exist on type 'Window & typeof globalThis'. [139, 22]

It is also complaining in my Svelte component about the usage of the {center} arg. I have, as per the example:
let center = { lat: 36.0999, lng: -80.2442 };

And use it thusly:

<div class="map-wrap">
	<Map
		bind:this={mapComponent}
		bind:zoom
		accessToken={mapboxAPI}
		on:recentre={(e) => console.log(e.detail)}
		{center}
	>
		<Marker lat={center.lat} lng={center.lng} />
	</Map>
</div>

The error / warnring message I am getting is:

Type '{ lat: number; lng: number; }' is not assignable to type 'number[]'.

Just wondering if anyone has an idea about this -- the app actually works and renders a map -- so -- it's obviously not fatal but .. just trying to learn TS (I think)..

TIA!

/Steve

[antony]

Hey there. So I'm not a TypeScript user, so I have no idea about what does and doesn't work regarding the way TypeScript works.

I think that I've probably gone full JS when creating this library and not really paid too much attention to keeping variables strictly of one type. What that means is that you'd have to declare your own types perhaps, or perhaps somebody could clean up the project / export typings for it. I just don't know!

Sorry I can't be of more help :)

[sjmcdowall]

I am not a TS guru either -- but it does seem like having a type definition file would be a good idea. i did a few of them a few years ago -- but rusty as heck now :)

[antony]

Lets find a TS guru to do the grunt work for us 🗡️ !

[antony]

I think if we republish this library within SvelteKit, it'll generate type definitions for us 🥳

[ContrerasHDaniel]

I think it's because center accepts a number array type as described on the error log. Therefore you should make center an array, like
let center = [ -80.2442, 36.0999];

Mapbox for some reason needs longitude as first element of the array too,
I hope this helps.