javascript - yup addMethod nu funcționează în typescript versiunea yup

pachet yup

Problemă

Când un metodă personalizată este adăugată la instanța yup folosind funcția addMethod, apare eroarea de mai jos

TS2339: Proprietatea 'title' nu există în tipul 'typeof import("node_modules/yup/lib/index")'

Pentru a reproduce

fișier yupInstance.ts

import * as yup from 'yup';

function defaultTitleValidation(this: any, local: 'en' | 'bn') {
  return this.string().trim().required();
}

yup.addMethod(yup.string, 'title', defaultTitleValidation);

export default yup;

fișier common.d.ts

declare module 'yup' {
  interface StringSchema<TIn, TContext, TOut> {
    title(local: 'en' | 'bn'): any;
  }
}

componentaMeaDeImplementare.tsx

import yup from '../../../../common/yup';

const validationSchema = yup.object().shape({
  title_en: yup.title(), // TS2339: Property 'title' does not exist on type 'typeof import("node_modules/yup/lib/index")'
});

Răspuns #1

Rezolvat prin extinderea interfeței yup.BaseSchema.

declare module 'yup' {
  interface StringSchema<
    TType extends Maybe<string> = string | undefined,
    TContext extends AnyObject = AnyObject,
    TOut extends TType = TType,
  > extends yup.BaseSchema<TType, TContext, TOut> {
    title(local: 'en' | 'bn'): StringSchema<TType, TContext>;
  }
}

Metodă personalizată

function defaultTitleValidation(this: any, local: 'en' | 'bn') {
  return this.trim().required(); //before this.string().trim().required();
}

Implementare

const validationSchema = yup.object().shape({
  title_en: yup.string().title('en'),  //before yup.title(),
});

Răspunsul #2

Am vrut să împărtășesc acest răspuns recent despre modul de a adăuga metode personalizate la yub folosind nextjs 13 și typescript, aici scriu funcția arabicOrEnglish() pentru a mă asigura că textul este într-un șir de caractere în arabă sau engleză:

1- Creează fișierul src/validations/schema/yupSchema.ts cu acest conținut:

import {StringSchema} from 'yup';

declare module 'yup' {
    interface StringSchema {
        arabicOrEnglish(): StringSchema;
    }
}

StringSchema.prototype.arabicOrEnglish = function () {
    return this.test('arabicOrEnglish', 'Must be in Arabic or English', function (value) {
        if (!value) {
            return true; // Skip validation for undefined values
        }
        const arabicRegex = /^[\u0600-\u06FF\s]+$/;
        const englishRegex = /^[A-Za-z\s]+$/;
        return arabicRegex.test(value) || englishRegex.test(value);
    });
};

2- Creați fișierul src/validations/schema/yupConfig.ts cu acest conținut:

import * as yup from 'yup';
import "@/validations/schema/yupSchema";

export default yup;

3- Acum poți folosi acest schema în orice loc, cum ar fi această clasă src/validations/signUpFormValidation.ts:

import yup from "@/validations/schema/yupConfig";

export const validationSchema = yup.object().shape({
    firstName: yup
        .string()
        .arabicOrEnglish()
});

4- Și iată cum poți folosi clasa în pasul 3 pentru a valida formularele:

import { yupResolver } from '@hookform/resolvers/yup';
import { useForm } from "react-hook-form";
import { validationSchema } from "@/validations/signUpFormValidation";

export const useSignUpForm = () => {
    const { register, handleSubmit, formState: { errors }, trigger } = useForm({
        resolver: yupResolver(validationSchema),
    });

    const onSubmit = handleSubmit(async (data) => {
        try {
            const response = await fetch("/api/user/signUp", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(data),
            });

            if (response.ok) {
                const responseData = await response.json();
                console.log(responseData); // Response from the API
                // Handle success or show success message to the user
            } else {
                throw new Error("Error creating user");
            }
        } catch (error) {
            console.error("Error creating user:", error);
            // Handle error or show error message to the user
        }
    });

    return { register, errors, onSubmit, trigger };
};