I have developed a collection of VueJs components in TypeScript and I want to be able to use them globally in my Vue instance using Vue.use(library), or individually through named imports in Vue components.
While everything functions correctly, I am facing some challenges with TypeScript when it comes to declaring all the components in the index.d.ts file dynamically (due to the large number of components and the desire to avoid manual declaration).
This approach works:
import { Component1, Component2 } from 'my-library';
declare module 'my-library' {
declare const lib: PluginFunction<any>;
export default lib;
export { Component1, Component2 } from 'my-library';
}
However, I am seeking a method to achieve this for all components without importing and exporting them individually.
I attempted something similar to:
...
export * from 'my-library'
...
or
import * as components from 'my-library';
declare module 'my-library' {
declare const lib: PluginFunction<any>;
export default lib;
Object.entries(components).forEach(([componentName, component]) => {
export { component as componentName };
// or
// export { component };
})
}
Unfortunately, these methods did not work, as I encountered TS errors when attempting to import a specific component like Component1:
"Cannot resolve symbol 'Component1' TS2614: Module '"my-library"' has no exported member 'Component1'. Did you mean to use 'import Component1 from "my-library"' instead?"
ps: everything works fine if I use a //@ts-ignore before the import.
Any thoughts or suggestions?