TypeScript의 강력한 형식의 Yup 스키마

이번 주말에 나는 Firestore와 함께 사용하기 위해 conditional types in TypeScript 탐색했습니다. 이들은 T extends U ? X : Y의 기본 형식을 취하고 T의 유형을 기반으로 새 유형을 만드는 데 사용됩니다. 이것을 사용하여 강력한 형식의 Yup 스키마를 만들 수 있는지 궁금했습니다.

기본 아이디어는 Yup 스키마와 유형을 사용하는 일반 함수를 만드는 것입니다. 이 함수는 유형에 강력하게 유형이 지정된 Yup 스키마를 반환합니다. 이 함수는 조건부 유형을 사용하여 스키마 유형을 결정하고 적절한 스키마를 반환합니다.

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]>;
};

이 두 가지 일반 유형을 사용하여 강력한 유형의 Yup 스키마를 생성할 수 있습니다. 이들은 더 많은 유형을 포함하고 배열과 객체를 더 잘 처리하도록 분명히 확장될 수 있습니다.

TypeScript 컴파일러를 행복하게 유지하는 몇 가지 사용 예:

interface Foo {
  stringField: string;
  booleanField: boolean;
}

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

그리고 그것은 작동합니다! 🎉