Injected prop does not exist on `ComponentPublicInstance` in TypeScript
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-ycsdst?file=src%2Fcomponents%2FMyComponent.vue,src%2FApp.vue
Steps to reproduce
- Inject a prop into a component via the
inject
option - Try to reference the injected prop from a method/computed/data.
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
inject: ['msg'],
computed: {
computedMsg() {
// FIXME: TypeScript doesn't see the prop from inject option
return this.msg + '!'
^^^
}
}
})
</script>
What is expected?
The injected prop is available in other options, including methods
and computed
.
What is actually happening?
TypeScript shows this error:
Property 'msg' does not exist on type 'ComponentPublicInstance<{}, {}, {}, { computedMsg(): string; }, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, { computedMsg(): string; }, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>'
System Info
System:
OS: macOS 11.2.3
CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Memory: 353.50 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 17.4.0 - ~/n/bin/node
Yarn: 1.22.17 - ~/n/bin/yarn
npm: 8.3.1 - ~/n/bin/npm
Browsers:
Chrome: 101.0.4951.64
Chrome Canary: 104.0.5065.0
Edge: 101.0.1210.47
Firefox: 97.0.1
Safari: 14.0.3
npmPackages:
vue: ^3.2.33 => 3.2.33
Any additional comments?
Also happens with Vue CLI scaffolded project.