Better suggesting?

[Kcko]

In my skript in one place i have

https://is.gd/sVIGYm (im trying to typed variables for better autocompletition).

At another place im trying autocompletition but VSC absolutely dont know / remember that i typed correctly :(

https://is.gd/mG7esqv

am I doing something wrong?, or how to teach VSC to better suggest typed things (it's a JS/Vue.js script) without TS.

[mjbvz]

Please share minimal example code which demonstrates the issue

[Kcko]

Hi mjbvz, thx for ur interest.

Here is shortened code:

  function createAndUpdateMarkers(branches) {
    if (!infoWindow) {
      infoWindow = new google.maps.InfoWindow({
        disableAutoPan: true,
        content: ''
      })
    }

    console.time('TIME:createAndUpdateMarkers:addNewMarkers')

    let anyNewMarkers = false
    Object.entries(branches.value).forEach(([key, branch]) => {
      if (!markers.has(key)) {
        /** @type {google.maps.Marker */
        const marker = new google.maps.Marker({
          position: { lat: branch.rows[0].lat, lng: branch.rows[0].lng },
          map: mapInstance,
          title: branch.rows[0].name,
          /** @type {Set<number>} */
          _transport_type_ids: new Set(branch.rows.map(row => row.transport_type_id))
        })

        marker.addListener('click', () => {
          if (infoWindow) {
            infoWindow.close()
          }

          infoWindow.setHeaderContent(createInfoWindowHeader(branch))
          infoWindow.setContent(createInfoWindowContent(branch))
          infoWindow.open(mapInstance, marker)
          mapInstance.panTo(marker.getPosition())
        })

        anyNewMarkers = true
        markers.set(key, marker)
      }
    })

    console.timeEnd('TIME:createAndUpdateMarkers:addNewMarkers')

    if (anyNewMarkers) {
      console.log('DEBUG: anyNewMarkers -> TransportTypeGroupped::createAndUpdateMarkers::clusterMarkers')
      console.time('TIME:clusterMarkers')
      // if (markerCluster) {
      //   markerCluster.clearMarkers()
      // }
      clusterMarkers(Array.from(markers.values()))
      console.timeEnd('TIME:clusterMarkers')
    }
  }

And here when i want to use marker. and want to retrive methods from /* @type {Set} / and i dont get it. But in a previous code / fn, I clearly typed it.

    emitter.on('TransportTypeGroupped::onTransportFilterSelected', selectedTransportIds => {
      console.log('DEBUG: TransportTypeGroupped::onTransportFilterSelected s hodnotou ' + selectedTransportIds)

      for (const [_, marker] of markers) {
        console.log({
          selectedTransportIds,
          markerTransportIds: marker._transport_type_ids,
          size: marker._transport_type_ids.intersection(selectedTransportIds).size,
          intersectionResult: marker._transport_type_ids.intersection(selectedTransportIds)
        })

        if (selectedTransportIds.size === 0) {
          marker.setVisible(true)
        } else {
          if (marker._transport_type_ids.intersection(selectedTransportIds).size) {
            marker.setVisible(true)
            //marker.setMap(mapInstance)
          } else {
            marker.setVisible(false)
            //marker.setMap(null)
          }
        }
      }
    })

The entire behavior is captured in the video in the opening post.

Thx for clarification

[Kcko]

Any progress pls?

[mjbvz]

Thanks. Some of the type hints in your code aren't valid, such as /** @type {google.maps.Marker */ (missing closing })

If you're no seeing the correct typings on hover, you likely just need to add a few other type hints too