vuejs / vetur

Vue tooling for VS Code.
https://vuejs.github.io/vetur/
MIT License
5.75k stars 594 forks source link

Type error when Template interpolation service in combination with templateProps is set to true #2312

Open dietergoetelen opened 4 years ago

dietergoetelen commented 4 years ago

Info

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>
4. Create file `Greeting.vue`

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 = () => () => undefined as unknown as {

}

const TrickedUser = trick()

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


This gives the following component type props: 
![image](https://user-images.githubusercontent.com/1385245/93986513-ba398c00-fd86-11ea-9159-217cf9196446.png)

But vetur is still complaining, in this case it cannot find `TrickedUser`
cexbrayat commented 4 years ago

I ran into something very similar using VTI@0.0.13

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

yarn
npx vti@0.0.13 diagnostics

Results in:

====================================
Getting Vetur diagnostics
Loading Vetur in current directory: /Users/ced-pro/Code/vue/vti-async
Loaded bundled typescript@4.0.3.
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>
    }
  }
});