protomaps / PMTiles

Cloud-optimized + compressed single-file tile archives for vector and raster maps

Home Page:https://protomaps.com/docs/pmtiles/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to use TypeScript types for "ol-pmtiles" ?

jsolly opened this issue · comments

Context

I am attempting to use PMTiles in a TypeScript OpenLayers project with strict typing.

import { PMTilesVectorSource } from 'ol-pmtiles'

I have run into this error before and it is usually resolved by running something like, npm i --save-dev @types/ol-pmtiles. Unfortunately, that npm package does not exist.

What are my option for resolving this error? My editor is suggesting I could declare them in a .d.ts file and I could always ignore the error with an inline override.

Steps to reproduce

1 - npm install ol-pmtiles
2 - Observe linting error:

Could not find a declaration file for module 'ol-pmtiles'. '/Users/johnsolly/code/ces-collab/node_modules/ol-pmtiles/src/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/ol-pmtiles if it exists or add a new declaration (.d.ts) file containing declare module 'ol-pmtiles';ts(7016)

There isn't any TypeScript types on this module yet: https://github.com/protomaps/PMTiles/blob/main/openlayers/src/index.js because we don't have a want to transpile it into the scrip-includes (no-build-step) module. I would use ts-ignore for now.

Understood! Thank you for getting back to me. I will carry on! I added the following lines to appease my IDE if anyone else is running into this issue.

// @ts-expect-error
import { PMTilesVectorSource } from 'ol-pmtiles'

  const layers = layersToFetch.map(({ filePath, title }) => {
    const layer = new VectorTile({
      declutter: true,
      // eslint-disable-next-line ts/no-unsafe-assignment, ts/no-unsafe-call
      source: new PMTilesVectorSource({
        url: `${bucketUrl}${filePath}`,
        attributions: ['© Your Data Source Attribution'],
      }),
    })
    layer.set('title', title)
    return layer
  })

I am using https://github.com/antfu/eslint-config, which abbreviates inline rule overrides.