The Generic Function's Return Type in Typescript

Question

The Generic Function's Return Type in Typescript

The latest addition of ReturnType in TypeScript 2.8 is a highly valuable feature that enables you to capture the return type of a specific function.

function foo(e: number): number {
    return e;
}

type fooReturn = ReturnType<typeof foo>; // number

Nevertheless, I am encountering difficulties when trying to utilize it within the scope of generic functions.

function foo<T>(e: T): T {
    return e;
}

type fooReturn = ReturnType<typeof foo>; // type fooReturn = {}

type fooReturn = ReturnType<typeof foo<number>>; // syntax error

type fooReturn = ReturnType<(typeof foo)<number>>; // syntax error

Is there a method to extract the return type of a generic function given certain type parameters?

typescript generics

Answer 1

Answer №1

In the past, achieving this in a completely generic manner was not possible, but it will become available in Typescript version 4.7. This concept is known as an "Instantiation Expression". You can find more information in the related PR here. Here is an excerpt from the description:

function createContainer<T>(value: T) {
  return { value };
};

const createStringContainer = createContainer<string>;  // (value: string) => { value: string }
const stringContainer = createStringContainer('abc');  // { value: string }

const ErrorObjectMap = Map<string, Error>;  // new () => Map<string, Error>
const errorObjectMap = new ErrorObjectMap();  // Map<string, Error>

...

A particularly valuable technique is to generate universal type definitions for instances of typeof that use type parameters in type instantiation expressions:

type ContainerFunction<T> = typeof createContainer<T>;  // (value: T) => { value: T }
type Container<T> = ReturnType<typeof createContainer<T>>;  // { value: T }
type StringContainer = Box<string>;  // { value: string }

Answer 2

In the past, achieving this in a completely generic manner was not possible, but it will become available in Typescript version 4.7. This concept is known as an "Instantiation Expression". You can find more information in the related PR here. Here is an excerpt from the description:

function createContainer<T>(value: T) {
  return { value };
};

const createStringContainer = createContainer<string>;  // (value: string) => { value: string }
const stringContainer = createStringContainer('abc');  // { value: string }

const ErrorObjectMap = Map<string, Error>;  // new () => Map<string, Error>
const errorObjectMap = new ErrorObjectMap();  // Map<string, Error>

...

A particularly valuable technique is to generate universal type definitions for instances of typeof that use type parameters in type instantiation expressions:

type ContainerFunction<T> = typeof createContainer<T>;  // (value: T) => { value: T }
type Container<T> = ReturnType<typeof createContainer<T>>;  // { value: T }
type StringContainer = Box<string>;  // { value: string }

Answer 3

Answer №2

Here is a method I developed to extract un-exported internal types from imported libraries, such as knex:

// The foo function is an imported function that cannot be controlled
function foo<T>(e: T): InternalType<T> {
    return e;
}

class Wrapper<T> {
  // The wrapped function has no explicit return type, allowing for inference
  wrapped(e: T) {
    return foo<T>(e)
  }
}

type FooInternalType<T> = ReturnType<Wrapper<T>['wrapped']>
type Y = FooInternalType<number>
// Y === InternalType<number>

Answer 4

Here is a method I developed to extract un-exported internal types from imported libraries, such as knex:

// The foo function is an imported function that cannot be controlled
function foo<T>(e: T): InternalType<T> {
    return e;
}

class Wrapper<T> {
  // The wrapped function has no explicit return type, allowing for inference
  wrapped(e: T) {
    return foo<T>(e)
  }
}

type FooInternalType<T> = ReturnType<Wrapper<T>['wrapped']>
type Y = FooInternalType<number>
// Y === InternalType<number>

Answer 5

Answer №3

One way to obtain a specialized generic type is by utilizing a dummy function for encapsulation.

const wrapFunction = () => functionName<dataType>()
type ResultType = ReturnType<typeof wrapFunction>

Here is a more intricate example:

function generateList<T>(): {
  items: T[],
  add: (item: T) => void,
  remove: (item: T) => void,
  // ...and so on
}
const wrappedListGenerator = () => generateList<number>()
type CustomList = ReturnType<typeof wrappedListGenerator>
// CustomList = {items: number[], add: (item: number) => void, remove: (item: number) => void, ...and so on}

Answer 6

One way to obtain a specialized generic type is by utilizing a dummy function for encapsulation.

const wrapFunction = () => functionName<dataType>()
type ResultType = ReturnType<typeof wrapFunction>

Here is a more intricate example:

function generateList<T>(): {
  items: T[],
  add: (item: T) => void,
  remove: (item: T) => void,
  // ...and so on
}
const wrappedListGenerator = () => generateList<number>()
type CustomList = ReturnType<typeof wrappedListGenerator>
// CustomList = {items: number[], add: (item: number) => void, remove: (item: number) => void, ...and so on}

Answer 7

Answer №4

In my quest to find a solution, I stumbled upon a clever and straightforward method for achieving this task if you are able to modify the function definition. In my scenario, the challenge was utilizing the typescript type Parameters with a generic function. Specifically, I attempted

Parameters<typeof foo<T>>

, only to discover that it did not yield the desired outcome. The most effective approach, in this case, is to alter the function definition to an interface function definition. This adjustment also seamlessly integrates with the typescript type ReturnType.

Allow me to illustrate this concept using an example based on the issue raised by the original poster:

function foo<T>(e: T): T {
   return e;
}

type fooReturn = ReturnType<typeof foo<number>>; // Unfortunately, an error is thrown

// However, by redefining your function as an interface:

interface foo<T>{
   (e: T): T
}

type fooReturn = ReturnType<foo<number>> // Success! It outputs 'number'
type fooParams = Parameters<foo<string>> // Works perfectly! Result is [string]

// Additionally, you can utilize the interface like so:
const myfoo: foo<number> = (asd: number) => {
    return asd;
};

myfoo(7);

Answer 8

In my quest to find a solution, I stumbled upon a clever and straightforward method for achieving this task if you are able to modify the function definition. In my scenario, the challenge was utilizing the typescript type Parameters with a generic function. Specifically, I attempted

Parameters<typeof foo<T>>

, only to discover that it did not yield the desired outcome. The most effective approach, in this case, is to alter the function definition to an interface function definition. This adjustment also seamlessly integrates with the typescript type ReturnType.

Allow me to illustrate this concept using an example based on the issue raised by the original poster:

function foo<T>(e: T): T {
   return e;
}

type fooReturn = ReturnType<typeof foo<number>>; // Unfortunately, an error is thrown

// However, by redefining your function as an interface:

interface foo<T>{
   (e: T): T
}

type fooReturn = ReturnType<foo<number>> // Success! It outputs 'number'
type fooParams = Parameters<foo<string>> // Works perfectly! Result is [string]

// Additionally, you can utilize the interface like so:
const myfoo: foo<number> = (asd: number) => {
    return asd;
};

myfoo(7);

Answer 9

Answer №5

I have discovered a solution that may meet your requirements :)

To define function arguments and return type, utilize an interface

interface Bar<X, Y> {
  (x: X, y: Y): [X, Y]
}

Implement the function in this manner using Parameters and ReturnType

function bar<X, Y>(...[x, y]: Parameters<Bar<X, Y>>): ReturnType<Bar<X, Y>> {
  return [x, y]; // [X, Y]
}

Invoke the function normally, or retrieve the return type using ReturnType

bar(2, 'b') // [number, string]
type Example = ReturnType<Bar<number, number>> // [number, number]

Answer 10

I have discovered a solution that may meet your requirements :)

To define function arguments and return type, utilize an interface

interface Bar<X, Y> {
  (x: X, y: Y): [X, Y]
}

Implement the function in this manner using Parameters and ReturnType

function bar<X, Y>(...[x, y]: Parameters<Bar<X, Y>>): ReturnType<Bar<X, Y>> {
  return [x, y]; // [X, Y]
}

Invoke the function normally, or retrieve the return type using ReturnType

bar(2, 'b') // [number, string]
type Example = ReturnType<Bar<number, number>> // [number, number]

Answer 11

Answer №6

const wrapperFoo = (process.env.NODE_ENV === 'typescript_helper' ? foo<number>(1) : undefined)!
type Return = typeof wrapperFoo

TypeScript Playground

Here's a scenario where a default type is used but not exported.

// Default type not accessible
interface Unaccessible1 {
    z: number
    x: string
}

function foo1<T extends Unaccessible1>(e: T): T {
    return e;
}

const wrapperFoo1 = (process.env.NODE_ENV === 'typescript_helper' ? foo1.apply(0, 0 as any) : undefined)!
type ReturnFoo1 = typeof wrapperFoo1 // Unaccessible1

interface Unaccessible2 {
    y: number
    c: string
}

function foo2<T extends Unaccessible2>(e: T, arg2: number, arg3: string, arg4: Function): T {
    return e;
}

const wrapperFoo2 = (process.env.NODE_ENV === 'typescript_helper' ? foo2.apply(0, 0 as any) : undefined)!
type ReturnFoo2 = typeof wrapperFoo2 // Unaccessible2

TypeScript Playground

Answer 12

const wrapperFoo = (process.env.NODE_ENV === 'typescript_helper' ? foo<number>(1) : undefined)!
type Return = typeof wrapperFoo

TypeScript Playground

Here's a scenario where a default type is used but not exported.

// Default type not accessible
interface Unaccessible1 {
    z: number
    x: string
}

function foo1<T extends Unaccessible1>(e: T): T {
    return e;
}

const wrapperFoo1 = (process.env.NODE_ENV === 'typescript_helper' ? foo1.apply(0, 0 as any) : undefined)!
type ReturnFoo1 = typeof wrapperFoo1 // Unaccessible1

interface Unaccessible2 {
    y: number
    c: string
}

function foo2<T extends Unaccessible2>(e: T, arg2: number, arg3: string, arg4: Function): T {
    return e;
}

const wrapperFoo2 = (process.env.NODE_ENV === 'typescript_helper' ? foo2.apply(0, 0 as any) : undefined)!
type ReturnFoo2 = typeof wrapperFoo2 // Unaccessible2

TypeScript Playground

Answer 13

Answer №7

The TypeScript compiler does not interpret typeof foo as a generic type, potentially indicating a bug in the compiler.

Nevertheless, TypeScript offers callable interfaces that can be utilized in a generic manner without any difficulties. By creating a callable interface that mirrors the function's signature, you can create your own version of ReturnType as demonstrated below:

function foo<T>(x: T): T {
  return x;
}


interface Callable<R> {
  (...args: any[]): R;
}

type GenericReturnType<R, X> = X extends Callable<R> ? R : never;

type N = GenericReturnType<number, typeof foo>; // number

Answer 14

The TypeScript compiler does not interpret typeof foo as a generic type, potentially indicating a bug in the compiler.

Nevertheless, TypeScript offers callable interfaces that can be utilized in a generic manner without any difficulties. By creating a callable interface that mirrors the function's signature, you can create your own version of ReturnType as demonstrated below:

function foo<T>(x: T): T {
  return x;
}


interface Callable<R> {
  (...args: any[]): R;
}

type GenericReturnType<R, X> = X extends Callable<R> ? R : never;

type N = GenericReturnType<number, typeof foo>; // number

The Generic Function's Return Type in Typescript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Is there a way to detect changes in a Service variable within an Angular component?

Using regular expressions, you can locate and replace the second-to-last instance of a dot character in an email address

The Redux Toolkit slice and TypeScript were not in agreement: it was expecting 0 arguments, but received

Hidden input fields do not get populated by Angular submit prior to submission

How can we track and record NaN values in JavaScript/TypeScript as they occur in real-time?

The data type 'string' cannot be assigned to the type 'SystemStyleObject | undefined' in the context of Next.js and Chakra UI

Step-by-step guide on filtering an array of objects using Vuejs and TypeScript

What is the method for adding pages to the ion-nav component in Ionic with Angular?

nodemon failing to automatically refresh files in typescript projects

How can one pass a generic tuple as an argument and then return a generic that holds the specific types within the tuple?

Utilizing NGRX reducers with a common state object

Reasons why a functional component may not trigger a rerender after a state change using useReducer()

Using TypeORM: Implementing a @JoinTable with three columns

You can't observe the behavior of simulated functions in a class with a manually created mock

How can you check the status of a user in a Guild using Discord JS?

Tips on preventing image previews from consuming too much text data while updating a database in Angular 12 using Material UI for image uploads within a FormGroup object

Transform the subscription into a string

Ensuring the type of a specific key in an object

Combining information from two different sources to create a more comprehensive dataset

What is the proper way to implement an if-else statement within objects?