Develop an asynchronous function that will output a specific type based on a provided boolean parameter

Question

Develop an asynchronous function that will output a specific type based on a provided boolean parameter

I needed to create an asynchronous function in TypeScript with proper type return. The challenge was to have a boolean parameter that determines the return type of the function. After some research online, I found that using type conditional is the recommended approach.

I wrote the code as follows:

type Foo = {
    propA: string
    propB: string
}

type Bar = Omit<Foo, 'propB'> & {propC: string}

type ConditionalFooBar<T extends boolean> = T extends true? Foo:Bar

async function mainFunction<T extends boolean>(param:T) : Promise<ConditionalFooBar<T>>{
    // Some async operations here
    if(param===true){
        return {
            propA: "a string",
            propB: "a string"
        }
    }
    return {
        propA: "a string",
        propC: "a string"
    }
}

However, when I tried to compile this code, TypeScript threw an error at the first return statement:

Type '{ propA: string; propB: string; }' is not assignable to type 'ConditionalFooBar<T>'.ts(2322)

How can I fix this issue?

typescript

Answer 1

Answer №1

As of the latest TypeScript version 5.4, there is a limitation in implementing generic functions that return conditional types while ensuring compiler-verified type safety. There has been an ongoing request for improvement in this area, with references to relevant GitHub issues and pull requests for potential resolution coming up in future versions of TypeScript.

In the meantime, if you wish to maintain your function's behavior at runtime without encountering compiler errors, you may consider using type assertions as a workaround. This approach allows you to bypass strict checking temporarily to avoid false positives:

    async function exampleFunction<S extends boolean>(input: S): Promise<ConditionalType<S>> {
      if (input === true) {
        return {
          propX: "value X",
          propY: "value Y"
        } as ConditionalType<S>
      }
      return {
        propX: "another value",
        propZ: "value Z"
      } as ConditionalType<S>
    }

If immediate compiler-validated type safety is necessary, transforming your approach from conditional types to indexed access types could be a viable alternative. By structuring your operation around property lookups rather than traditional branching logic, you can achieve the desired outcome:

    interface Y {
      affirm: OptionA;
      negate: OptionB;
    }

    async function exampleFunction<S extends boolean>(input: S) {
      const y: Y = {
        get affirm() {
          return {
            propX: "value X",
            propY: "value Y"
          }
        },
        get negate() {
          return {
            propX: "value X",
            propZ: "value Z"
          }
        }
      }
      return y[`${input}`]
    }

The above pattern involves associating string keys with specific types within the Y interface and accessing them dynamically based on the input parameter value. This structure ensures compiler inference aligns with the expected outcomes during function calls, albeit in a more complex manner compared to initial implementations utilizing conditional types.

To explore the code further or experiment with variations, click on this Playground link.

Answer 2

As of the latest TypeScript version 5.4, there is a limitation in implementing generic functions that return conditional types while ensuring compiler-verified type safety. There has been an ongoing request for improvement in this area, with references to relevant GitHub issues and pull requests for potential resolution coming up in future versions of TypeScript.

In the meantime, if you wish to maintain your function's behavior at runtime without encountering compiler errors, you may consider using type assertions as a workaround. This approach allows you to bypass strict checking temporarily to avoid false positives:

    async function exampleFunction<S extends boolean>(input: S): Promise<ConditionalType<S>> {
      if (input === true) {
        return {
          propX: "value X",
          propY: "value Y"
        } as ConditionalType<S>
      }
      return {
        propX: "another value",
        propZ: "value Z"
      } as ConditionalType<S>
    }

If immediate compiler-validated type safety is necessary, transforming your approach from conditional types to indexed access types could be a viable alternative. By structuring your operation around property lookups rather than traditional branching logic, you can achieve the desired outcome:

    interface Y {
      affirm: OptionA;
      negate: OptionB;
    }

    async function exampleFunction<S extends boolean>(input: S) {
      const y: Y = {
        get affirm() {
          return {
            propX: "value X",
            propY: "value Y"
          }
        },
        get negate() {
          return {
            propX: "value X",
            propZ: "value Z"
          }
        }
      }
      return y[`${input}`]
    }

The above pattern involves associating string keys with specific types within the Y interface and accessing them dynamically based on the input parameter value. This structure ensures compiler inference aligns with the expected outcomes during function calls, albeit in a more complex manner compared to initial implementations utilizing conditional types.

To explore the code further or experiment with variations, click on this Playground link.

Develop an asynchronous function that will output a specific type based on a provided boolean parameter

Answer №1

Similar questions

Pausing in a NodeJS HTTP request listener until receiving another response before proceeding

Discovering the IP address of Azure Functions

typescript: best practices for typing key and value parameters in the forEach loop of Object.entries()

Error TS2322: The function expecting a type of 'FormEventHandler<HTMLFormElement>' cannot be assigned the type '(data: TicketFullDTO) => Promise<void>'

What could be causing the inner array typescript to be inaccessible in an Angular 5 application?

Can we determine the return type of a function based on the specific parameters it is called with?

Troubleshooting Problem in Angular 6: Difficulty in presenting data using *ngFor directive (data remains invisible)

The 'ReactNode' binding element is automatically assigned an 'any' type

Unit testing TypeScript code by creating a mock of the third-party library, ioredis

Monitor the closure of a programmatically opened tab by the user

Is there a method available that functions akin to document.getelementbyid() in this specific scenario?

At what point does Angular2 assess template values? What is the effect on overall performance when it encounters complex methods like `complexMethod()`?

What is the process of programmatically sorting a column in a Material UI DataGrid?

Sort by label using the pipe operator in RxJS with Angular

Tips for steering clear of distributive conditional types

Next.js React Hydration Issue - "Anticipated a corresponding <a> within the server HTML <a>"

What is the best way to bring in a .obj file in a ReactJS project while utilizing TypeScript?

If the numeral variable is used within an HTML function, a 'numeral is not defined' error may occur

Potentially null object in react typescript

The value of 'number' can be assigned to the constraint 'T[keyof T]', however, there is a possibility that 'T[keyof T]' may be initialized with a different subtype of the constraint 'number'