How to Vue.use() a javascript plugin in a TypeScript project that does have typings

Question

I am trying to use Semantic-UI-Vue in my vue project. However, I am getting the following error when I try and do Vue.use(SuiVue) :

Argument of type 'typeof import("semantic-ui-vue")' is not assignable to parameter of type 'PluginObject<{}> | PluginFunction<{}>'.\\n Type 'typeof import("semantic-ui-vue")' is not assignable to type 'PluginFunction<{}>'.\\n Type 'typeof import("semantic-ui-vue")' provides no match for the signature '(Vue: VueConstructor, options?: {} | undefined): void'."

I have created a .d.ts file that lets me import SuiVue:

declare module 'semantic-ui-vue'{}

And I import it in my app.ts as:

import * as SuiVue from 'semantic-ui-vue';

What do I need to do to get this plugin to be usable in a typescript project without disabling global TypeScript settings like noImplicitAny ?

Answer 1

Replace declare module 'semantic-ui-vue'{} with declare module 'semantic-ui-vue';

---

declare module 'semantic-ui-vue'{} means the module have the type of an empty object {} .

declare module 'semantic-ui-vue'; means the module have the type any

see Shorthand ambient modules in https://www.typescriptlang.org/docs/handbook/modules.html

---

As the OP has figured out, you need to change the import statement to import SuiVue from 'semantic-ui-vue'; for it to work