Using generic types in an interface to define a function's type

Question

Using generic types in an interface to define a function's type

While developing an interface for an options object, I am aiming to allow the user to specify a function with an explicit return type and a generic argument type. This can be achieved if a type has not been defined for the function beforehand. However, I am facing difficulty in implementing this for a function type that has already been defined.

For example, the following code snippet works without any issues:

interface Options {
  // Other options...
  converterFunction: <T>(rawData: T) => [];
}

But the following syntax, which seems logical, does not work as expected:

type ConverterFunction<T> = (rawData: T) => [];

interface Options {
  // Other options...
  converterFunction: <T>ConverterFunction<T>; // TypeScript is unhappy
}

Simply making the interface generic does not solve my problem, and I would prefer to use my pre-defined types instead of defining them again arbitrarily.

typescript generics types interface

Answer 1

Answer №1

When using a type that relies on another generic type, it must either specify a concrete type or be generic itself.

The syntax <T>Type<T> is not considered valid.

type ConverterFunction<T> = (rawData: T) => [];

interface Options<T> {
  converterFunction: ConverterFunction<T>; // Type specification in TypeScript
}

const options: Options<string> = {
  converterFunction(aString) {
    return []
  }
}

Interactive Example

If the type is not named, you can define a function with a generic parameter, but if it is named, it seems this is not possible. I’m asking if this is indeed the case

The approach to specifying where the generic is passed depends on your requirements.

If the type is known at the point of use, then it should be placed on the type itself.

type ConverterFunction<T> = (rawData: T) => T[];
const fn: ConverterFunction<string> = a => [a]
fn('a') // ['a']

Alternatively, if you want the function to infer the generic type on its own, then associate it directly with the function.

type ConverterFunction = <T>(rawData: T) => T[];
const fn: ConverterFunction = (a: string) => [a]
fn('a') // ['a']

Based on your feedback, the second method may be more suitable for your scenario.

Answer 2

When using a type that relies on another generic type, it must either specify a concrete type or be generic itself.

The syntax <T>Type<T> is not considered valid.

type ConverterFunction<T> = (rawData: T) => [];

interface Options<T> {
  converterFunction: ConverterFunction<T>; // Type specification in TypeScript
}

const options: Options<string> = {
  converterFunction(aString) {
    return []
  }
}

Interactive Example

If the type is not named, you can define a function with a generic parameter, but if it is named, it seems this is not possible. I’m asking if this is indeed the case

The approach to specifying where the generic is passed depends on your requirements.

If the type is known at the point of use, then it should be placed on the type itself.

type ConverterFunction<T> = (rawData: T) => T[];
const fn: ConverterFunction<string> = a => [a]
fn('a') // ['a']

Alternatively, if you want the function to infer the generic type on its own, then associate it directly with the function.

type ConverterFunction = <T>(rawData: T) => T[];
const fn: ConverterFunction = (a: string) => [a]
fn('a') // ['a']

Based on your feedback, the second method may be more suitable for your scenario.

Using generic types in an interface to define a function's type

Answer №1

Similar questions

Updating the Nuxt3 editing page with useFetch and $fetch for fetching data, along with a typed storage object that prevents loading issues

Unable to retrieve headers from extended Express.Request type

What is the best time to initialize .env variables in a NodeJS application?

Tips on navigating to the next or previous variable reference in VS Code

Is there a way to obtain the dimensions of an image link in Angular?

State array is being updated

Merge rxjs streams, identify modifications, and yield a single result

The HTML button triggers a function to execute on a different webpage when clicked

Having issues with an Angular reactive form that includes a custom form-level validator and the 'blur' updateOn option?

Guide on Linking a Variable to $scope in Angular 2

Creating subclass mappings and defining subclasses dynamically using Typescript at runtime

What steps should be followed to effectively incorporate Google Fonts into a Material UI custom theme for typography in a React/TypeScript project

Error with Array type encountered in Typescript's find method

Dynamic Object properties are not included in type inference for Object.fromEntries()

@vx/enhanced responsiveness with TypeScript

Populate a chart in real-time with data pulled directly from the Component

Swift "Exclusive" Collision

Error TS2322: Type 'Partial<T>' is not assignable to type 'T'

React: Issue with Intersection Observer not triggering state updates

Unable to call a function on a type that does not have a callable signature