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

The absence of essential DOM types in a TypeScript project is causing issues

A Promise is automatically returned by async functions

Module not found: vueform.config

Inquiry regarding the return value of 'async-lock' in nodejs

What is the TypeScript syntax for indicating multiple generic types for a variable?

Curious about the missing dependencies in React Hook useEffect?

Using typescript with Ramda's filter and prop functions can lead to unexpected errors

TypeScript encounters difficulty locating the div element

Troubleshooting: Resolving JSX props issue in Vue template

The variables declared within the Promise constructor are being identified as undefined by Typescript

Encountering build errors while utilizing strict mode in tsconfig for Spring-Flo, JointJS, and CodeMirror

Showing records from Firebase that are still within the date range

Embedding a transpiled .js file in HTML using ExpressJS as a static resource

Utilizing a syntax highlighter in combination with tsx React markdown allows for cleaner

Tips for successfully importing $lib in SvelteKit without encountering any TypeScript errors

The Angular 2 router is not compatible with using the same component but with different IDs

What is the best way to implement filter functionality for individual columns in an Angular material table using ngFor?

Discover the combined type of values from a const enum in Typescript

Issue with bundling project arises post upgrading node version from v6.10 to v10.x

Is there a hashing algorithm that produces identical results in both Dart and TypeScript?