Reputation: 1
Question Body: What are you trying to accomplish? I'm building a custom input component using Vue 3, Quasar, and Zod, with the goal of achieving both:
Static type checking: Ensuring defineProps uses types inferred from Zod schemas.
Runtime validation: Using Zod to validate props dynamically.
However, when I define defineProps using a Zod-generated type (PropsDto), I encounter the following error:
Error: Unresolvable type reference or unsupported built-in utility type
Code example: inputBase.ts Base schema for shared props:
import { z } from 'zod';
export const PropsBaseSchema = () =>
z.object({
placeholder: z.string().optional(),
rules: z.array(z.any()).optional(),
disable: z.boolean().optional(),
readonly: z.boolean().optional(),
});
export type PropsBase = z.infer<ReturnType<typeof PropsBaseSchema>>;
largeDto.ts Extends the base schema for additional props:
import { z } from 'zod';
import { PropsBaseSchema } from './base/inputBase';
export const PropsSchema = () =>
PropsBaseSchema().extend({
type: z.enum(['text', 'password', 'textarea', 'email', 'search', 'tel', 'url']).optional(),
});
export type PropsDto = z.infer<ReturnType<typeof PropsSchema>>;
LargeComponent.vue The custom Quasar-based input component:
<script setup lang="ts">
import { PropsSchema } from './dto/largeDto';
import type { PropsDto } from './dto/largeDto';
const props = withDefaults(defineProps<PropsDto>(), {
type: 'text',
});
PropsSchema().parse(props); // Runtime validation
</script>
I expect the PropsDto type, inferred from PropsSchema, to work seamlessly with defineProps in Vue 3, enabling both:
Static type checking in TypeScript. Runtime validation using Zod.
Upvotes: 0
Views: 30