Assigning function types to functions that accept generics: A guide

Question

Assigning function types to functions that accept generics: A guide

type FormValidationHandler<FormValues> = (params: {
  formValues: FormValues,
  debugName?: string,
}) => {
  isValid: boolean,
  fieldErrors: Record<string, unknown>,
  formError: string,
}

const validateForm: FormValidationHandler = params => {

  // Perform form validation based on params and return result
  return {
    isValid: true,
    fieldErrors: {},
    formError: ''
  }
}

FormValidationHandler expects 1 generic argument, and in defining functions the type assignment precedes the generic setup. How can we make use of generics in the validateForm function and pass it to FormValidationHandler.

Note: While Parameters and ReturnType can be used, I am exploring the possibility of directly assigning the function type itself.

typescript

Answer 1

Answer №1

When it comes to <code>TFormHookPerformValidation

, it's important to note that it is not a generic function, but rather a generic type that resolves to a non-generic function. This means that the type of formValuesT must be known when using the type in order to determine the function's type.

If you're looking for a generic function instead, you will need to transfer the generic type parameter to the function itself.

type A<T> = (arg: T) => T
const a: A<number> = (arg) => arg // works fine, 'a' is typed as (arg: number) => number
const aValueNumber = a(1) // returns number
const aValueString = a('str') // Type error

type B = <T>(arg: T) => T
const b: B = (arg) => arg // works fine, 'b' is typed as <T>(arg: T) => T
const bValueNumber = b(1) // returns number
const bValueString = b('str') // returns string

Alternatively, in your specific case:

type TFormHookPerformValidation = <formValuesT>(params: {
  formValues: formValuesT,
  debugName?: string,
}) => {
  isPassing: boolean,
  fieldErrors: Record<string, unknown>,
  formError: string,
}

Check out playground

Are you looking to define the generic type when you declare the function? Or when you call the function?

Answer 2

When it comes to <code>TFormHookPerformValidation

, it's important to note that it is not a generic function, but rather a generic type that resolves to a non-generic function. This means that the type of formValuesT must be known when using the type in order to determine the function's type.

If you're looking for a generic function instead, you will need to transfer the generic type parameter to the function itself.

type A<T> = (arg: T) => T
const a: A<number> = (arg) => arg // works fine, 'a' is typed as (arg: number) => number
const aValueNumber = a(1) // returns number
const aValueString = a('str') // Type error

type B = <T>(arg: T) => T
const b: B = (arg) => arg // works fine, 'b' is typed as <T>(arg: T) => T
const bValueNumber = b(1) // returns number
const bValueString = b('str') // returns string

Alternatively, in your specific case:

type TFormHookPerformValidation = <formValuesT>(params: {
  formValues: formValuesT,
  debugName?: string,
}) => {
  isPassing: boolean,
  fieldErrors: Record<string, unknown>,
  formError: string,
}

Check out playground

Are you looking to define the generic type when you declare the function? Or when you call the function?

Assigning function types to functions that accept generics: A guide

Answer №1

Similar questions

Can child components forward specific events to their parent component?

Strange behavior when working with Typescript decorators and Object.defineProperty

Is it possible to generate a property for an interface by casting a key within a for-in loop?

Problem with Typescript compilation in lerna package

The process of subscribing to a service in Angular

Angular validation for password and confirmation password fields

Creating a model for a different user involves several steps that can be easily

Guide to monitoring updates to a universal server-side variable in Angular 2

Recursively map elements of a TypeScript array to keys of an object

Converting input dates in nest.js using TypeScript formatting

What is the method for obtaining the union type of interface values (including string enums)?

What is the best way to generate a random item when a button is clicked?

Utilize mapGetter and mapMutations in Vuex with TypeScript without the need for class-style components syntax

Exploring the DynamoDB List Data Type

Exported data in Vue3 components cannot be accessed inside the component itself

Sequelize's bulk synchronization process is ineffective

Create a list of items with checkboxes next to each that can be repeated using PdfMake

To switch to desktop mode, double click; for mobile view, just tap once

Guide on how to display matching options in an input box using HTML datalist based on user input at the beginning

Tips on how to retrieve a stubbed Observable<void> in RxJS