Missing type definitions for ol-map and similar kebab-case components?

[vincerubinetti]

Searching in this package's node_modules folder, it seems like some of the kebab-case components are registered as types, e.g.:

declare module "@vue/runtime-core" {
    function inject(key: "ol-options"): Vue3OpenlayersGlobalOptions;
}

(I'm guessing this, or some other kind of injection, is what defines <ol-options> as a valid component).

But I find no similar injections for ol-map and ol-view, for example. Shouldn't there be some type definitions for these? Using these kebab-case-style components, as the getting started docs first suggest, I get no type definitions for them, e.g. VSCode thinks the type of ol-view is unknown, and I get no type checking for any of its props.

I see you can use explicit imports like Map.OlView, which is totally fine by me, and I get proper typing doing it that way. But it seems like either all of the kebab-case components should be defined, or the docs should clearly state that you should use explicit imports for typescript support.

Apologies if I am missing something.

package.json

{
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "6.7.2",
    "@fortawesome/free-brands-svg-icons": "6.7.2",
    "@fortawesome/free-regular-svg-icons": "6.7.2",
    "@fortawesome/free-solid-svg-icons": "6.7.2",
    "@fortawesome/vue-fontawesome": "^3.0.8",
    "@headlessui-float/vue": "0.14.4",
    "@headlessui/vue": "1.7.23",
    "@turf/turf": "7.2.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vueuse/core": "10.11.1",
    "d3": "^7.9.0",
    "dom-to-image": "^2.6.0",
    "echarts": "5.6.0",
    "leaflet": "^1.9.4",
    "leaflet-providers": "^2.0.0",
    "lodash": "^4.17.21",
    "ol": "^10.4.0",
    "ol-contextmenu": "^5.5.0",
    "ol-ext": "^4.0.26",
    "radix-vue": "1.9.14",
    "vue": "3.5.13",
    "vue-echarts": "^7.0.3",
    "vue-gtag": "2.1.0",
    "vue-router": "4.5.0",
    "vue-tippy": "6.6.0",
    "vue3-openlayers": "^11.3.1"
  },
  "devDependencies": {
    "@ianvs/prettier-plugin-sort-imports": "4.4.1",
    "@types/d3": "^7.4.3",
    "@types/dom-to-image": "^2.6.7",
    "@types/echarts": "^4.9.22",
    "@types/geojson": "7946.0.16",
    "@types/leaflet": "1.9.16",
    "@types/lodash": "4.17.15",
    "@vitejs/plugin-vue": "5.2.1",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "8.57.1",
    "eslint-plugin-vue": "9.32.0",
    "eslint-plugin-vuejs-accessibility": "2.4.1",
    "postcss": "8.5.2",
    "prettier": "3.5.1",
    "prettier-plugin-css-order": "^2.1.2",
    "prettier-plugin-jsdoc": "1.3.2",
    "sass": "1.84.0",
    "typescript": "5.7.3",
    "vite": "5.4.14",
    "vue-tsc": "2.2.0"
  }
}

[d-koppenhagen]

I agree. It would be great to have better type support. However, ol-options is a provided Value which can be used with inject(), see: https://vuejs.org/guide/components/provide-inject

[vincerubinetti]

If I understand your reply, you're explaining why ol-options specifically has type definitions in the source but other components may not.

I didn't look at the source code enough to understand fully what's going on, but you already seem to have full type definitions for e.g. <Map.OlView>, so shouldn't it be as simple as assigning those same types to <ol-view>?

Wouldn't it look something as simple as this:

declare module "vue" {
  export interface GlobalComponents {
    "ol-view": DefineComponent<InstanceType<typeof Map.OlView>["$props"]>;
  }
}

And then doing that for all of the tags?

Regardless, it seems like the docs should have a little note/warning that explicit imports will work better for TypeScript users, at least for now.

[d-koppenhagen]

💯
Would you like to contribute?

[vincerubinetti]

I'll try to make time for a PR. The main difficulty would be knowing all the different components that are supported. It seems like there are many, and I'd worry about missing one, but you could fill in the details.