javascript - Yup .when validation with typescript - Stack Overflow

admin管理员组

文章数量:1355684

I'm converting a validation schema from jsx to a tsx filetype. It works perfectly in jsx but in tsx I can't get the type for the yup when condition to pass. Even any fails to pass. Any idea how to type this correctly? The error appearing is

Argument of type '(startTime: Date) => Yup.DateSchema<Date | undefined, Record<string, any>, Date | undefined> | undefined' is not assignable to parameter of type 'ConditionOptions<RequiredDateSchema<Date | undefined, Record<string, any>>>'.

Type '(startTime: Date) => Yup.DateSchema<Date | undefined, Record<string, any>, Date | undefined> | undefined' is not assignable to type 'ConditionBuilder<RequiredDateSchema<Date | undefined, Record<string, any>>>'.

Type 'DateSchema<Date | undefined, Record<string, any>, Date | undefined> | undefined' is not assignable to type 'SchemaLike'. Type 'undefined' is not assignable to type 'SchemaLike'. TS2345

My validation:

Yup.date().required('This field is required')
            .when('startTime', (startTime: Date) => { // <-- this is where error appears
                if (startTime) {
                    return Yup.date()
                        .min(startTime, 'End must be after Start')
                        .typeError('End is required')
                }
            }),

I'm converting a validation schema from jsx to a tsx filetype. It works perfectly in jsx but in tsx I can't get the type for the yup when condition to pass. Even any fails to pass. Any idea how to type this correctly? The error appearing is

Argument of type '(startTime: Date) => Yup.DateSchema<Date | undefined, Record<string, any>, Date | undefined> | undefined' is not assignable to parameter of type 'ConditionOptions<RequiredDateSchema<Date | undefined, Record<string, any>>>'.

Type '(startTime: Date) => Yup.DateSchema<Date | undefined, Record<string, any>, Date | undefined> | undefined' is not assignable to type 'ConditionBuilder<RequiredDateSchema<Date | undefined, Record<string, any>>>'.

Type 'DateSchema<Date | undefined, Record<string, any>, Date | undefined> | undefined' is not assignable to type 'SchemaLike'. Type 'undefined' is not assignable to type 'SchemaLike'. TS2345

My validation:

Yup.date().required('This field is required')
            .when('startTime', (startTime: Date) => { // <-- this is where error appears
                if (startTime) {
                    return Yup.date()
                        .min(startTime, 'End must be after Start')
                        .typeError('End is required')
                }
            }),

• javascript
• reactjs
• typescript
• formik
• yup

Share Improve this question Follow edited Jan 19, 2022 at 0:57 user101289 asked Jan 18, 2022 at 21:23 user101289user101289 10.5k1818 gold badges9393 silver badges163163 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Simplest thing:

Yup.date().required('This field is required')
            .when('startTime', (startTime: Date) => {
                if (startTime) {
                    return Yup.date()
                        .min(startTime, 'End must be after Start')
                        .typeError('End is required')
                } 
                return Yup.date()
            })

Personally I would prefer:

Yup.date()
  .required("This field is required")
  .when("startTime", (startTime) =>
    startTime
      ? Yup.date()
          .min(startTime, "End must be after Start")
          .typeError("End is required")
      : Yup.date()
  );

but that is just clean up.

The reason Typescript show you this error is because you didn't specified the return type.

.when('x_lifetime_type', (values: string[], schema: NumberSchema): NumberSchema => {
  if (values.indexOf('seconds') >= 0) {
     return schema.min(60, 'Minimum value is 1 minute');
  } else { return schema; }
})

In this example, input and output schema are typed with NumberSchema. PD: You have to use schema parameter to sum adicional validations.

本文标签： javascriptYup when validation with typescriptStack Overflow