Strongly Typed Yup Schema in TypeScript

This weekend I have been exploring conditional types in TypeScript to use with Firestore. These take the basic form of T extends U ? X : Y and are used to create a new type based on the type of T. I was curious if I could use this to create a strongly typed Yup schema.

The basic idea is to create a generic function that takes a Yup schema and a type. The function will return a Yup schema that is strongly typed to the type. The function will use a conditional type to determine the type of the schema and return the appropriate schema.

import * as yup from "yup"; export type ConditionalSchema<T> = T extends string ? yup.StringSchema : T extends number ? yup.NumberSchema : T extends boolean ? yup.BooleanSchema : T extends Record<any, any> ? yup.AnyObjectSchema : T extends Array<any> ? yup.ArraySchema<any, any> : yup.AnySchema; export type Shape<Fields> = { [Key in keyof Fields]: ConditionalSchema<Fields[Key]>; }; 

With those two generic types, we can create a strongly typed Yup schema. These can obviously be extended to include more types and better handle arrays and objects.

Some example usage that keeps the TypeScript compiler happy:

interface Foo { stringField: string; booleanField: boolean; } yup.object<Shape<Foo>>({ stringField: yup.string().default(""), booleanField: yup.boolean().default(false), }); 

And it works! 🎉