0

The following type is auto-generated from the OpenAPI specs of the Rest API, therefore I can't simply change it:

export type InventoryItemCreate = {
  name: string;
  status_id: number;
  barcode?: string;
  //...
};

Based on this, I'm trying to define a react-hook-form with Yup for validation as follows:

const schema = Yup.object().shape({
  name: Yup.string().required('Name ist ein Pflichtfeld'),
  barcode: Yup.string()
    .min(5, 'Der Barcode muss 5-stellig sein')
    .max(5, 'Der Barcode muss 5-stellig sein')
    .matches(/^[A-Z][0-9]{4}$/, 'Muss das Format X0000 haben')
    .optional()
    .nullable(),
  rfid_id: Yup.string().optional().nullable(),
  description: Yup.string().nullable(),
  wiki_url: Yup.string().optional().nullable(),
  other_owner: Yup.string().optional().nullable(),
  model: Yup.string().optional().nullable(),
  vendor: Yup.string().optional().nullable()
});

This is then used as follows:

import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';

export const InventoryItemForm = ({ existingItem }: { existingItem?: InventoryItem }) => {
  
  // omitted

  const formContext = useForm<InventoryItemFormSchema>({
    resolver: yupResolver(schema),
    values: existingItem
  });

This however results in the following error message:

./components/inventory/InventoryItemForm.tsx:67:5
Type error: Type 'Resolver<{ name?: string; barcode?: string; description?: string; rfid_id?: string; wiki_url?: string; other_owner?: string; model?: string; vendor?: string; }>' is not assignable to type 'Resolver<InventoryItemFormSchema, any>'.
  Types of parameters 'options' and 'options' are incompatible.
    Type 'ResolverOptions<InventoryItemFormSchema>' is not assignable to type 'ResolverOptions<{ name?: string; barcode?: string; description?: string; rfid_id?: string; wiki_url?: string; other_owner?: string; model?: string; vendor?: string; }>'.
      Types of property 'names' are incompatible.
        Type 'string[]' is not assignable to type 'OptionalKeys<{ name: string; barcode: string; rfid_id: string; description: string; wiki_url: string; other_owner: string; model: string; vendor: string; }>[]'.
          Type 'string' is not assignable to type 'OptionalKeys<{ name: string; barcode: string; rfid_id: string; description: string; wiki_url: string; other_owner: string; model: string; vendor: string; }>'.

  65 | 
  66 |   const formContext = useForm<InventoryItemFormSchema>({
> 67 |     resolver: yupResolver(schema),
     |     ^
  68 |     values: existingItem
  69 |   });
  70 | 
error Command failed with exit code 1.

If I manually change the Type definition and make name optional, then the error goes away. That being said, the name attribute is required in the Yup schema, is there any way to make sure the returned value has this as non-optional type?

export type InventoryItemCreate = {
  name?: string;  // <= This change makes it work
  status_id: number;
  barcode?: string;
  //...
};

1 Answer 1

1

You don't need to explicitly pass the generic type if you have a validation schema. The type is derived from the schema.

Sign up to request clarification or add additional context in comments.

1 Comment

nice one @moshyfawn, removing the type from the useForm call fixed the problem. R

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.