Type declarations in component library

Hey there.

So I’ve been working on an open source calendar for Vue 3 for a while now. I’m using TypeScript in the project, and Vite library mode for bundling the code into a single importable component. I now have the issue, that when using the calendar in another TypeScript project, the component types are not recognized. Whenever I therefore use a slot, my IDE also rightfully tells me that the type of slot-name
does not exist on the component. In my package.json, I’m setting types to point to the index.ts of this directory: qalendar/src at tomosterlund-test-index-ts · tomosterlund/qalendar · GitHub

Since I’m not so experienced with decalaration files, I tried to follow the example of vueform/multiselect: multiselect/src at main · vueform/multiselect · GitHub

  1. Refer to types in index.ts, in package.json
  2. Import/export component in index.ts
  3. Write declaration file named Multiselect.d.ts in the same directory where the component is being exported.

In vueform/multiselect, this works excellent. I get all the types and auto-completion thereof, whenever I use that multiselect and start typing props or slots. For my own calendar component, it does not work. Does anyone recognize the problem?

First, let me just tell you that I’ve never used TypeScript and have no idea of what the problem could be :smiley: But fun to poke around in things I don’t know ^^’

After you have installed your npm package in another project, can you verify that the package folder actually contains the file ./dist/src/index.d.ts? I’m not sure it’s copied to the dist folder automatically, and in your project it’s named index.ts, but maybe the build renames it to index.d.ts? And in the multi select package the refer to it in the src folder, and not the dist folder.

Sorry, sloppy on my behalf. In my package.json, I point towards types in ./dist/src/index.d.ts because that’s where the content of index.ts ends up after the production build.