Subscribe on changes!

Injected prop does not exist on `ComponentPublicInstance` in TypeScript

avatar
May 16th 2022

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ycsdst?file=src%2Fcomponents%2FMyComponent.vue,src%2FApp.vue

Steps to reproduce

  1. Inject a prop into a component via the inject option
  2. 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.