ARTICLE AD BOX
How can I properly type react-hook-form with zodResolver when using z.coerce.number() for form inputs? The schema seems to correctly infer the types as numbers, but TypeScript is complaining about unknown types not being assignable to string | number.
Type error: Type 'Resolver<{ latitude: unknown; longitude: unknown; maxDistance: unknown; }, any, { latitude: number; longitude: number; maxDistance: number; }>' is not assignable to type 'Resolver<GPSFormInputValues, any, GPSFormInputValues>'. Types of parameters 'options' and 'options' are incompatible. Type 'ResolverOptions<GPSFormInputValues>' is not assignable to type 'ResolverOptions<{ latitude: unknown; longitude: unknown; maxDistance: unknown; }>'. Type 'unknown' is not assignable to type 'string | number'. lib/types/settings.ts export interface GPSFormValues { latitude: number; longitude: number; maxDistance: number; } export interface Settings { _id: string; officeName: string; officeAddress: string; targetLatitude: number; targetLongitude: number; radiusMeters: number; isActive: boolean; createdAt: string; updatedAt: string; } components/settings/GPSSettings.tsx "use client"; import { useState } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import * as z from "zod"; import { Button } from "@/components/ui/button"; import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { MapPin, Navigation, Loader2 } from "lucide-react"; import type { Settings, GPSFormValues } from "@/lib/types/settings"; const gpsSchema = z.object({ latitude: z.coerce.number().min(-90).max(90), longitude: z.coerce.number().min(-180).max(180), maxDistance: z.coerce.number().min(1), }); interface GPSSettingsProps { settings: Settings; onSubmit: (data: GPSFormValues) => Promise<void>; isLoading: boolean; } export function GPSSettings({ settings, onSubmit, isLoading, }: GPSSettingsProps) { const [gettingLocation, setGettingLocation] = useState(false); // ERROR OCCURS HERE: const form = useForm<GPSFormValues>({ resolver: zodResolver(gpsSchema), // ← TypeScript error defaultValues: { latitude: settings.targetLatitude, longitude: settings.targetLongitude, maxDistance: settings.radiusMeters, }, }); // ... rest of the component }