Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Injected prop does not exist on ComponentPublicInstance in TypeScript #5931

Closed
tony19 opened this issue May 16, 2022 · 0 comments · Fixed by #6804
Closed

Injected prop does not exist on ComponentPublicInstance in TypeScript #5931

tony19 opened this issue May 16, 2022 · 0 comments · Fixed by #6804

Comments

@tony19
Copy link
Contributor

tony19 commented May 16, 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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
2 participants