How to use yup's object.shape with typescript?

Question

I'm currently converting a piece of code to TypeScript and running into a few type issues with yup types. I've tried multiple ways and referenced yup's documentation on TypeScript support to tackle this issue to no avail.

https://github.com/jquense/yup/blob/master/docs/typescript.md

Here is a sample of my code:

import { object, Asserts, string } from 'yup';

interface BaseBootstrapSchema {  
  APPLICATION_NAME: string;
  LOG_PATH: string;
}

const bootstrapValidationSchema = object<BaseBootstrapSchema>().shape({ // error 1 here
  LOG_PATH: string().required("The 'LOG_PATH' ENV variable is required"),
  APPLICATION_NAME: string().required("The 'APPLICATION_NAME' ENV variable is required"),
});

interface BootstrapSchema extends Asserts<typeof bootstrapValidationSchema> {}

module.exports = (schema: BootstrapSchema) =>
  new Promise((resolve, reject) =>
    schema
      .validate(process.env, { abortEarly: false }) // error 2 here
      .then(() => resolve(true))
      .catch((error: any) => {
        if (error.errors.length > 1) {
          reject(new Error(`${error.message},\n${error.errors.join(',\n')}`));
        } else {
          reject(new Error(error.message));
        }
      })
  );

I get the following errors:

Error 1:

Type 'BaseBootstrapSchema' does not satisfy the constraint 'Record<string, AnySchema<any, any, any> | Reference | Lazy<any, any>>'. Index signature is missing in type 'BaseBootstrapSchema'.

Error 2:

Property 'validate' does not exist on type 'BootstrapSchema'.

I'm tried a few ways to rectify this issue but none really work.

Assistance appreciated.

did you found solution to this problem? I am having same issue. — activebiz, Apr 06 '21 at 19:09

catruzz · Answer 1 · 2022-12-15T16:52:49.813

following the yup guide here you should change your code as follows:

import { object, SchemaOf, string } from 'yup';

interface BaseBootstrapSchema {  
  APPLICATION_NAME: string;
  LOG_PATH: string;
}

const bootstrapValidationSchema: SchemaOf<BaseBootstrapSchema> = object({
  LOG_PATH: string().required("The 'LOG_PATH' ENV variable is required"),
  APPLICATION_NAME: string().required("The 'APPLICATION_NAME' ENV variable is required"),
});

module.exports = (schema: SchemaOf<BaseBootstrapSchema>) =>
  new Promise((resolve, reject) =>
    schema
      .validate(process.env, { abortEarly: false })
      .then(() => resolve(true))
      .catch((error: any) => {
        if (error.errors.length > 1) {
          reject(new Error(`${error.message},\n${error.errors.join(',\n')}`));
        } else {
          reject(new Error(error.message));
        }
      })
  );

Actually you don't need the const bootstrapValidationSchema at all, since you will pass it to the node module you are exporting, but I could've misunderstood what you are trying to achieve here. Try it.

What happens if a property on the interface is optional? I can't to get it to play nicely with yup — svict4, Oct 07 '21 at 15:36

score 2 · Answer 2 · answered Dec 14 '22 at 01:01

If a property of the schema is optional, use OptionalObjectSchema and AnySchema types.

import { object, string, AnySchema } from 'yup';
import { OptionalObjectSchema } from 'yup/lib/object'

interface BaseBootstrapSchema {  
  APPLICATION_NAME: string;
  LOG_PATH: string;
}

const bootstrapValidationSchema: OptionalObjectSchema<Record<keyof BaseBootstrapSchema, AnySchema>> = object({
  LOG_PATH: string(),
  APPLICATION_NAME: string(),
});

How to use yup's object.shape with typescript?

2 Answers2