Benson
Benson

Reputation: 1

Zod + Quasar: Error - Unresolvable type reference or unsupported built-in utility type

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

Answers (0)

Related Questions