Replies: 2 comments 2 replies
-
|
I've found an improvement to JSDoc / defineProps() work-around. <!-- SomeComponent.vue -->
<script setup>
/** @type {{ flag: boolean, mode: 'simple' | 'advanced' }} */
const props = defineProps(['flag', 'mode']);
</script>// vue.d.ts
// Augment vue types to work around Vue TypeScript JSDoc limitation, see https://github.com/vuejs/rfcs/discussions/584
import 'vue';
declare module 'vue' {
// This makes TypeScript check that runtime prop names match JSDoc @type
export function defineProps<PropNames extends string>(props: PropNames[]): { [key in PropNames]: any };
}What works:
What does not work:
Full example: https://stackblitz.com/edit/vitejs-vite-cc31fd?file=src%2Fcomponents%2FSomeComponent.vue (use |
Beta Was this translation helpful? Give feedback.
-
|
This workaround is useful knowledge for sure. Is there any kind of markup/workaround for documenting the Component itself, and not just it's props?, (e.g. |
Beta Was this translation helpful? Give feedback.
-
|
How to provide default value and custom validator? |
Beta Was this translation helpful? Give feedback.
-
|
I think things work as intended here, except having the TS macros based on generic args would be great. In the meantime this is all that's necessary: <script setup>
defineProps({
mode: {
type: /** @type {Vue.PropType<'simple' | 'advanced'>} */ (String)
},
myObject: {
/** @type {Vue.PropType<MyInterface>} */
type: Object
}
})
</script> |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Problem
defineProps()macro is mostly limited to types likeStringandNumberin<script setup>blocks. It is limiting when the project avoids TypeScript syntax, but uses JSDoc for type annotations and type checks:vue-tsc --noEmit --allowJs --checkJsThe above works great, except for more non-basic types in
defineProps()macro.For example, I haven't found a good way to turn
modeinto a prop but keep the type safety. I have to relaxmodetype to astring:Proposal
It would nice if Vue would allow the following:
Work-around
This is a work-around I found:
It even seems to check types at the usage:
<SomeComponent mode="simple">.Related
Beta Was this translation helpful? Give feedback.
All reactions