Using Typescript, the type T or a function that returns T can be utilized in various scenarios

Question

Using Typescript, the type T or a function that returns T can be utilized in various scenarios

You can check out a demonstration on this interactive platform.

In creating a simple generic type that represents either a variable or a function returning a variable, there was an issue with the typical typeof arg === 'function' check. The error message displayed was as follows:

This expression is not callable.
  Not all constituents of type '(() => T) | (T & Function)' are callable.
    Type 'T & Function' has no call signatures.

Is there a way to resolve this without resorting to using a type guard function?

type Initializer<T> = T | (() => T)

function correct(arg: Initializer<string>) {
    return typeof arg === 'function' ? arg() : arg
}

function wrong<T>(arg: Initializer<T>) {
    return typeof arg === 'function' ? arg() : arg // issue here
}

const isFunction = (arg: any): arg is Function => typeof arg === 'function'

function correct_2<T>(arg: Initializer<T>) {
    return isFunction(arg) ? arg() : arg
}

typescript

Answer 1

Answer №1

Here is an alternative way to express this code:

type Definition<T> = T extends any ? (T | (() => T)) : never

function validate<T>(input: Definition<T>): T {
    return typeof input === 'function' ? input() : input // performs as expected
    // input is Definition<T> & Function in the true condition
}

const result1 = validate(2) // const result1: 2
const result2 = validate(() => 2) // const result2: number

In the original implementation, input is inferred as

(() => T) | (T & Function)

within the true branch. TypeScript appears to struggle with recognizing that both parts of this union type are callable functions. By using the provided version, the compiler can accurately determine the ability to invoke input after the function check.

It might be beneficial to consider raising an issue on GitHub regarding this scenario in the TypeScript repository - there is a strong argument that T & Function should indeed encompass a broad range of function types.

Answer 2

Here is an alternative way to express this code:

type Definition<T> = T extends any ? (T | (() => T)) : never

function validate<T>(input: Definition<T>): T {
    return typeof input === 'function' ? input() : input // performs as expected
    // input is Definition<T> & Function in the true condition
}

const result1 = validate(2) // const result1: 2
const result2 = validate(() => 2) // const result2: number

In the original implementation, input is inferred as

(() => T) | (T & Function)

within the true branch. TypeScript appears to struggle with recognizing that both parts of this union type are callable functions. By using the provided version, the compiler can accurately determine the ability to invoke input after the function check.

It might be beneficial to consider raising an issue on GitHub regarding this scenario in the TypeScript repository - there is a strong argument that T & Function should indeed encompass a broad range of function types.

Answer 3

Answer №2

When checking if arg is callable, using instanceof Function proves to be an effective method:

type Initializer<T> = T | (() => T)

function fixed<T>(arg: Initializer<T>) {
  // Instead of relying on `typeof`:
  // return typeof arg === 'function' ? arg() : arg // error here

  // opt for `instanceof`
  return arg instanceof Function ? arg() : arg
}

This approach was initially highlighted by kentcdodds in a GitHub discussion.

Answer 4

When checking if arg is callable, using instanceof Function proves to be an effective method:

type Initializer<T> = T | (() => T)

function fixed<T>(arg: Initializer<T>) {
  // Instead of relying on `typeof`:
  // return typeof arg === 'function' ? arg() : arg // error here

  // opt for `instanceof`
  return arg instanceof Function ? arg() : arg
}

This approach was initially highlighted by kentcdodds in a GitHub discussion.

Answer 5

Answer №3

I took a unique approach different from the accepted answer, ensuring that T (the expected resolved value) is not allowed to be a function. This method appears to be effective in most scenarios, unless you intend to generate functions from the initializer.

type Initializer<T> = T extends Function ? never : T | (() => T);

function foo<T>(r: Initializer<T>): T {
  return typeof r === 'function' ? r() : r;
}

const valOK = foo('2');
const funOK = foo(() => 4);
const funError = foo((a: number, b: number) => a + b);  // Expected error

Playground link

Answer 6

I took a unique approach different from the accepted answer, ensuring that T (the expected resolved value) is not allowed to be a function. This method appears to be effective in most scenarios, unless you intend to generate functions from the initializer.

type Initializer<T> = T extends Function ? never : T | (() => T);

function foo<T>(r: Initializer<T>): T {
  return typeof r === 'function' ? r() : r;
}

const valOK = foo('2');
const funOK = foo(() => 4);
const funError = foo((a: number, b: number) => a + b);  // Expected error

Playground link

Using Typescript, the type T or a function that returns T can be utilized in various scenarios

Answer №1

Answer №2

Answer №3

Similar questions

Unable to access the "target" property while transferring a value from child to parent component

Loop through a collection of map instances in TypeScript

Issue encountered while executing ./node_modules/.bin/cucumber-js within GitLab CI

Performing an RxJS loop to retrieve the httpGet response, followed by executing httpPut and httpPost requests based

What is the best way to retrieve a specific property from an array of objects in Angular 6 using typescript?

Utilizing Dynamic Class Names in Angular 7 with Typescript

How the addition of a type union allows it to be assigned to AnyAction

Challenges arise when working with Vue 3.2 using the <script setup> tag in conjunction with TypeScript type

What is the method for incorporating sorting into a mat-list?

Encountering an uncaughtException: Error stating that the module '....nextserverapphomelibworker.js' cannot be located while attempting to utilize pino.transport in Next.js

Creating types for React.ComponentType<P> in Material-UI using TypeScript

Can one invoke ConfirmationService from a different Service?

Having trouble with the npm Fluid Player installation

What is the best way to dynamically assign formControlNames in Angular using *ngFor?

Ways to broaden React categories for embracing html attributes as props?

rxjs - monitoring several observables and triggering a response upon any alteration

Instructions on resolving the issue: The type 'string | ChatCompletionContentPart[] | null' cannot be assigned to type 'ReactNode'

Unable to alter Mui input label color upon focus using theme.ts

Listening for Angular 2 router events

Next.js routes handlers do not have defined methods parameters