Vetur: Type error when Template interpolation service in combination with templateProps is set to true

Created on 23 Sep 2020  路  1Comment  路  Source: vuejs/vetur

  • [x] I have searched through existing issues
  • [x] I have read through docs
  • [x] I have read FAQ

Info

  • Platform: Win
  • Vetur version: 0.28.0
  • VS Code version: 1.49.1

Problem

Vetur cannot find the type when using PropType<User> in the referenced component. TemplateInterpolationService is set to true as well as validate templateProps.

image


Reproducible Case

  1. Use "vetur.experimental.templateInterpolationService": true,
  2. Use "vetur.validation.templateProps": true,
  3. Create file Hello.vue
<template>
  <div>
    Hello, {{ user.name }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import type { PropType } from '@nuxtjs/composition-api'

type User = {
  name: string;
}

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>,
      required: true
    }
  },
  setup () {
    return {}
  }
})
</script>
  1. Create file Greeting.vue
<template>
  <hello :user="{name: 'hello'}" />
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import Hello from './Hello.vue'

export default defineComponent({
  components: {
    Hello
  }
})
</script>

This works fine if I use an anonymous type. Tried to trick the compiler to omit the actual type without any success.

type User = {name: string}

const trick = <T extends unknown>() => () => undefined as unknown as {
  [K in keyof T]: T[K]
}

const TrickedUser = trick<User>()

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<ReturnType<typeof TrickedUser>>,
      required: true
    }
  },
  setup () {
    return {}
  }
})

This gives the following component type props:
image

But vetur is still complaining, in this case it cannot find TrickedUser

bug typescript template-interpolation

Most helpful comment

I ran into something very similar using [email protected]

Repro: https://github.com/cexbrayat/vti-async

npx [email protected] diagnostics

Results in:

====================================
Getting Vetur diagnostics
Loading Vetur in current directory: /Users/ced-pro/Code/vue/vti-async
Loaded bundled [email protected].
Vetur initialized
====================================

Getting diagnostics from:  [ 'src/App.vue', 'src/components/HelloWorld.vue' ]

File : /Users/ced-pro/Code/vue/vti-async/src/App.vue
Error: Cannot find name 'UserModel'.

====================================

Because the component HelloWorld has a prop defined as:

export default defineComponent({
  name: 'HelloWorld',
  props: {
    user: {
      type: Object as PropType<UserModel>
    }
  }
});

>All comments

I ran into something very similar using [email protected]

Repro: https://github.com/cexbrayat/vti-async

npx [email protected] diagnostics

Results in:

====================================
Getting Vetur diagnostics
Loading Vetur in current directory: /Users/ced-pro/Code/vue/vti-async
Loaded bundled [email protected].
Vetur initialized
====================================

Getting diagnostics from:  [ 'src/App.vue', 'src/components/HelloWorld.vue' ]

File : /Users/ced-pro/Code/vue/vti-async/src/App.vue
Error: Cannot find name 'UserModel'.

====================================

Because the component HelloWorld has a prop defined as:

export default defineComponent({
  name: 'HelloWorld',
  props: {
    user: {
      type: Object as PropType<UserModel>
    }
  }
});
Was this page helpful?
0 / 5 - 0 ratings