Replies: 1 comment
-
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.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Problem
defineProps()
macro is mostly limited to types likeString
andNumber
in<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 --checkJs
The above works great, except for more non-basic types in
defineProps()
macro.For example, I haven't found a good way to turn
mode
into a prop but keep the type safety. I have to relaxmode
type 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