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

The Angular custom modal service is malfunctioning as the component is not getting the necessary updates

The Angular-slickgrid is encountering an issue where it is unable to access the property "hostView" as it

Exploring the Concept of Extending Generic Constraints in TypeScript

What is preventing type guarding in this particular instance for TypeScript?

Establish a public-facing link for a React component

Ways to leverage Composite API in place of Mixin or Extends functionality

What's the most efficient way to define the type of an object in TypeScript when one of its properties shares the same name as the type itself?

Embed the value of an array in HTML

What is the best way to exclude multiple properties from an object in JavaScript?

Having trouble utilizing a function with an async onload method within a service in Angular - why does the same function work flawlessly in a component?

Caution: The `id` property did not match. Server: "fc-dom-171" Client: "fc-dom-2" while utilizing FullCalendar in a Next.js environment

What is the best way to sequentially invoke methods in Angular?

Unable to locate module 'fs'

How can I assign a type to an array object by utilizing both the 'Pick' and '&' keywords simultaneously in TypeScript?

Finding the number of elements in a FirebaseListObservable involves accessing the `length` property

Is there a way to recursively convert property types from one to another in an object that contains optional properties?

Creating a dynamic list in Typescript from a tuple array without any intersections

Encountering an error with the Next Auth adapter in TypeScript when attempting to modify the default User interface

The module 'module://graphql/language/parser.js' could not be resolved

Typescript Declarations for OpenLayers version 6