-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
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
<script setup>: Prop Member "Args.Post" is conflicting with "Post" import from PostDef.ts #4758
Comments
I think I found the reason why: https://v3.vuejs.org/api/sfc-script-setup.html#typescript-only-features
Is there some other way that I can use to specify complex types for my prop members? |
Duplicate of #4294 |
You could try to use like this: <script lang="ts">
export interface Post {
Message: string;
}
</script>
<script setup lang="ts">
interface Props {
Args: {Post: Post};
}
const props = withDefaults(defineProps<Props>(), {});
</script>
<template>
{{Args.Post}}
</template> |
That works. Interesting, I also found that you can create the same warning using this: <script lang="ts">
import {
Post,
} from "./PostDef";
</script>
<script setup lang="ts">
interface Props {
Args: {Post: any};
}
const props = withDefaults(defineProps<Props>(), {});
</script>
<template>
{{Args.Post}}
</template> Either way, I prefer putting my interfaces into a separate file; I'll try working around the problem in the meantime. |
|
Version
3.2.19
Reproduction link
sfc.vuejs.org/
Steps to reproduce
Select these options when prompted:
Content of PostDef.ts:
Content of PostFc.vue:
Within the auto-generated HelloWorld.vue, add a PostFc instance anywhere on the page
Then run the app:
What is expected?
No warnings should be reported when
yarn serve
finishes compiling the app.What is actually happening?
When
yarn serve
finishes compiling the app, it will report a warning that PostDef.ts does not have a reference to Post:Note that the warning is not visible in the reproduction link; you have to reproduce it on your local machine.
I was able to reproduce the same problem by creating a Vite project instead of Vue-CLI project.
The problem is particularly serious in Vite as the warning gets reported on the browser console, and cause the whole HelloWorld page to not load at all.
You can quickly make the warning go away by modifying the template in PostFc.vue such that {{Args.Post}} does not reference
Post
at all --- for example: {{Args}}The text was updated successfully, but these errors were encountered: