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;
//...
};