Why doesn't TypeScript recognize module augmentation for a Vue plugin?
When you augment Vue typings for use with a plugin - as in test-plugin.d.ts
- you need to import Vue first:
import Vue from 'vue'
declare module 'vue/types/vue' {
interface Vue {
$myPlugin: object
}
}
Its explained here in the docs.
update
I don't see mention of it your post, but if you haven't done so you also need a shim for single file components:
// sfc.d.ts
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
You can see this in the TypeScript-Vue-Starter repository.
update
Disregard the above, I didn't notice the sample repo. I managed to resolve the type error, see the changes here.
answer
As noted by @kccricket, the plugin's implementation and declaration files were named the same, thus causing the module in resolve incorrectly.
// original file names
test-plugin.ts
test-plugin.d.ts
what worked for me was to have the below declaration inside the .ts plugin file:
declare module 'vue/types/vue' {
interface Vue {
$myPlugin: object;
}
}
i tried having the same thing in the .d.ts file as recommended in that article, but intellisense still couldn't see it properly in the component code.