Subscribe on changes!

Invalid Prop type warning when using imported interface with union in defineProps

avatar
Jan 13th 2022

Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Load the reproduction and the warning will appear

What is expected?

I expect the object to be allowed to be passed in.

What is actually happening?

The generated type seems to be of [null, Array]. According to the docs any imported type will just be turned into null to allow any type for it. This also seems to be the case for interfaces defined in the same file also.

The changing to a null type is happening but the null is in the array of types is not allowing for any type? I would assume in that situation the type should just be null since if null matches any type why be more explicit? I suppose might be useful to whoever is using the component and doesn't have volar/typescript.

avatar
Jan 13th 2022

you have a typo:

-     someObject: someObject | someObject[]
+    someObject: SomeObject | SomeObject[]
avatar
Jan 13th 2022

@LinusBorg okay I had a typo and that fixes it if the interface is defined within the component but not if the interface is imported like in here which is my actual real world situation. I just saw it be reproduced with interface defined within the component so thought maybe it didn't matter. I should have looked closer I suppose

avatar
Jan 13th 2022

Yes, but for that we already have #4294

avatar
Jan 13th 2022

I see that issue, but my problem is more so with how the prop type is being inferred by the compiler.

According to your docs on the script setup page that I screenshotted

image

"If the type is referenced to an imported type then the inferred result will be null (equal to any type)" That does seem to happen and I get type: [null, Array] but then I get the warning about passing in my object so it really is not an "any" type then as I expected it to be.

avatar
Jan 13th 2022

Ah, Thanks, that makes it clearer. Agree, this could be fixed.

avatar
Jan 21st 2022

When can you fix this bug?

avatar
May 16th 2022

same issue here: https://stackblitz.com/edit/vite-vq9eyz when i am using this prop type: IItem | number | null interesting is when I use: IItem | null | undefined it works, but when I add any other additional primitive type like number, it shows warning

+1 for fix

avatar
Jun 8th 2023

This issue seems to have been fixed in vue3.3. Can you help confirm this 🧐? @LinusBorg image

avatar
Jun 8th 2023

@baiwusanyu-c I saw a different code. see

avatar
Jun 8th 2023

someObject: SomeObject | SomeObject[] 😂

@baiwusanyu-c I saw a different code. see

avatar
Jun 8th 2023

@baiwusanyu-c I saw a different code. see

There is a typo in his link, you need to fix it

avatar
Jun 8th 2023

Ah, This is awkward. 😄 Thanks @baiwusanyu-c