Limit the object's values to only singular, non-array data points

Question

Limit the object's values to only singular, non-array data points

I'm currently working with Formik, which includes this particular type:

type FormikErrors<Values> = {
 [K in keyof Values]?: Values[K] extends object
  ? FormikErrors<Values[K]>
  : string
};

In addition to this type, there is a validation function that resembles

validate<Values>(v: Values) => FormikErrors<Values>

. The main concept here is that the keys of FormikErrors align with the keys of Values and correspond to either a string error message or a recursive FormikErrors object if the field is represented by a nested object.

My objective is to create a generic function for validating required fields. This function specifically targets flat Values.

export function validateRequired<T, K extends keyof T>(values : T, names: K[]) : FormikErrors<T> {
 let errors : FormikErrors<T> = {};
 names.forEach((name) => {
  if (!values[name]) {
   errors[name] = 'This field is required';
  }
 });
 return errors;
}

An issue arises with this setup:

Type error: Type '"This field is required"' is not assignable to type '(T[K] extends object ? FormikErrors<T[K]> : string) | undefined'. TS2322

This error occurs because the values returned by validateRequired are always strings and never nested FormikValues. Is there a method to indicate that the values will consistently be scalars so that this can pass the type checking?

typescript typescript-generics

Answer 1

Answer №1

To avoid using the FormikErrors type, consider utilizing a custom type that is limited to string values:

type RequiredErrors<Values> = {
    [K in keyof Values]?: string
};

export function validateRequired<T, K extends keyof T>(values: T, names: K[]): RequiredErrors<T> {
    let errors: RequiredErrors<T> = {};
    names.forEach((name) => {
        if (!values[name]) {
            errors[name] = 'This field is required';
        }
    });
    return errors;
}

If using a custom type is not feasible, resorting to a type assertion may be necessary. Since TypeScript struggles with conditional types containing unresolved generic parameters, it needs guidance on whether 'string' is an acceptable value for the 'errors' object. A type assertion can resolve this issue:

export function validateRequired<T, K extends keyof T>(values: T, names: K[]): FormikErrors<T> {
    let errors: FormikErrors<T> = {};
    names.forEach((name) => {
        if (!values[name]) {
            errors[name] = 'This field is required' as any;;
        }
    });
    return errors;
}

Answer 2

To avoid using the FormikErrors type, consider utilizing a custom type that is limited to string values:

type RequiredErrors<Values> = {
    [K in keyof Values]?: string
};

export function validateRequired<T, K extends keyof T>(values: T, names: K[]): RequiredErrors<T> {
    let errors: RequiredErrors<T> = {};
    names.forEach((name) => {
        if (!values[name]) {
            errors[name] = 'This field is required';
        }
    });
    return errors;
}

If using a custom type is not feasible, resorting to a type assertion may be necessary. Since TypeScript struggles with conditional types containing unresolved generic parameters, it needs guidance on whether 'string' is an acceptable value for the 'errors' object. A type assertion can resolve this issue:

export function validateRequired<T, K extends keyof T>(values: T, names: K[]): FormikErrors<T> {
    let errors: FormikErrors<T> = {};
    names.forEach((name) => {
        if (!values[name]) {
            errors[name] = 'This field is required' as any;;
        }
    });
    return errors;
}

Limit the object's values to only singular, non-array data points

Answer №1

Similar questions

JSONPath encounters an issue when square brackets are embedded within a string

unable to send a response back with nextApiResponse

Metronome in TypeScript

Unexpected actions in the while loop within the workplace script

Tips for adjusting the search bar's position on a mobile device when it is activated by the user

The limitations of Typescript types influence the program's behavior

Issue with Bazel and Angular Production Server: "Encountering Uncaught SyntaxError: Unexpected token '<'"

Validate a string to determine if it is a legitimate numerical value using Javascript

Guide to setting data types for [key, value] pairs within a forEach iteration

Unable to initiate ngModelChange event during deep cloning of value

How can users create on-click buttons to activate zoom in and zoom out features in a Plotly chart?

Is there a way to mark a template-driven form as invalid when a custom field validator fails in my Angular 15 application?

Typescript error: The value "X" cannot be assigned to this type, as the properties of "Y" are not compatible

What is the best way to retrieve the name of a static method within a class?

Struggling to display data from Firebase Database in dropdown menu using Angular

Submitting a File to a Server using Ionic

Tips for setting or patching multiple values in an ngselect within a reactive form

How is it possible for Typescript to let me create an object without explicitly defining all mandatory fields?

After compiling typescript, ES6 Map.forEach is unexpectedly not a function

What is the procedure for transferring the inputted data from an HTML file to its corresponding TS file and subsequently to a different component file?