reactjs - TypeScript härleder valfria fält för Yup-schema när .required() används


Jag validerar mitt skapa kampanj-formulär genom att bygga ett yup-schema. Detta formulär har ett fält som kallas sellers och fältet kommer att vara en array av objekt med typen {id: number; label: string}. Typescript härleder typen av sellers-objektet med valfria medlemmar. Detta orsakar typerrors i mitt formulär.

Här är ett minimalt exempel på mitt Yup-schema:

const validationSchema = yup.object().shape({
    sellers: yup
        .array()
        .of(
            yup.object().shape({
                id: yup.number().required().defined(),
                label: yup.string().defined().required(),
            }),
        )
        .required(),
});

Förväntad TypeScript-typ av validationSchema:

{
    sellers: {
        id: number;
        label: string;
    }[];
}

Faktisk TypeScript-typ av validationSchema härledd:

{
    sellers: {
        id?: number | undefined;
        label?: string | undefined;
    }[];
}

Jag använder TypeScript version 5.2.2 och Yup version 1.3.2. Jag förväntade mig att TypeScript skulle känna igen id och label som obligatoriska på grund av .required() och .defined() metoderna, men det händer inte. Finns det ett sätt att tvinga TypeScript att respektera Yup-begränsningarna i sin typinferens?

Svar #1

Du behöver lägga till i tsconfig-värdet: "strict": true