Skip to content

Injected prop does not exist on ComponentPublicInstance in TypeScript #5931

@tony19

Description

@tony19

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions