CODEWITHSUNDEEP
javascripttypescriptvue.jsvuejs2semantic-ui
Douglas Gaskell
Douglas Gaskell

Reputation: 10050

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

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?

Upvotes: 5

Views: 5600

Answers (1)

Jacob Goh
Jacob Goh

Reputation: 20845

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

Upvotes: 4

Related Questions