Generic function is not assignable due to conditional type

Question

Generic function is not assignable due to conditional type

My goal is to restrict the return type of a generic function. Let's simplify with an example.

type MyReturnType<T> = T extends string ? number : Function;
type Input = string | number;
function myFn<T extends string | number>(input: T): MyReturnType<T> {
  return typeof input === 'string' ? 100 : (() => {});
}

However, I encountered a TypeScript error due to the return statement:

Type '100 | (() => void)' is not assignable to type 'MyReturnType<T>'.
  Type '100' is not assignable to type 'MyReturnType<T>'.

This confusion arises as I was expecting MyReturnType<T> to only resolve to a number or a Function. Why is 100 considered unassignable? Is there something I'm missing here? What message is the compiler trying to convey?

I suspect that the explanation lies within the conditional types section of the documentation. However, I may need some clarification since certain aspects are challenging for me to grasp. Can someone decode the logic behind this code snippet for me?

(TS 3.8.3)

typescript generics typescript-generics

Answer 1

Answer №1

Seems to be a constraint with the compiler when narrowing types to union types:

Issue with assigning 'true' to type 'T2 extends keyof T1 ? true : false' #56789

Answer 2

Seems to be a constraint with the compiler when narrowing types to union types:

Issue with assigning 'true' to type 'T2 extends keyof T1 ? true : false' #56789

Answer 3

Answer №2

The key to solving this problem effectively is through the use of function overloads:

type Input = string | number;
function processInput(input: string): number
function processInput(input: number): Function
function processInput(input: Input): number | Function {
    return typeof input === "string" ? 100 : () => {}
}

Ensure that you cover all possible input types with separate overload functions. For instance, in a scenario where there are 5 potential argument types (including 2 unions), the solution would look like this:

type Value = string | number | null
export function divideBy10toPower(value: string, power: number): number
export function divideBy10toPower(value: null, power: number): null
export function divideBy10toPower(value: number, power: number): number
export function divideBy10toPower<T extends number | null>(value: T, power: number): T
export function divideBy10toPower<T extends string | null>(value: T, power: number): T extends string ? number : null
export function divideBy10toPower(value: Value, power: number): Value {
    return value === null
        ? null
        : BigNumber(value)
            .div(10 ** power)
            .toNumber()
}

It's crucial to address the specific unions such as string | null and number | null to ensure proper typing of return values.

Answer 4

The key to solving this problem effectively is through the use of function overloads:

type Input = string | number;
function processInput(input: string): number
function processInput(input: number): Function
function processInput(input: Input): number | Function {
    return typeof input === "string" ? 100 : () => {}
}

Ensure that you cover all possible input types with separate overload functions. For instance, in a scenario where there are 5 potential argument types (including 2 unions), the solution would look like this:

type Value = string | number | null
export function divideBy10toPower(value: string, power: number): number
export function divideBy10toPower(value: null, power: number): null
export function divideBy10toPower(value: number, power: number): number
export function divideBy10toPower<T extends number | null>(value: T, power: number): T
export function divideBy10toPower<T extends string | null>(value: T, power: number): T extends string ? number : null
export function divideBy10toPower(value: Value, power: number): Value {
    return value === null
        ? null
        : BigNumber(value)
            .div(10 ** power)
            .toNumber()
}

It's crucial to address the specific unions such as string | null and number | null to ensure proper typing of return values.

Generic function is not assignable due to conditional type

Answer №1

Answer №2

Similar questions

Is it possible to implement websockets with inversify-express-utils?

What are the best methods for protecting a soda?

Create a tuple type by mapping an object with generics

Unclear error message when implementing union types in TypeScript

Sometimes the downloaded xlsx file may become corrupted

Utilizing Angular and TypeScript: The best approach for managing this situation

I am encountering issues with the TypeScript repository build on my local machine, but it successfully passes when

Firebase Storage does not have an export named useStorageEmulator

Creating formGroups dynamically for each object in an array and then updating the values with the object data

Conditionally using TypeScript, learn the process of implementing useQuery within React-Query

Which Index Type is the best fit for my assignment?

The combination of Angular's ngrx and Router.Events within Rxjs does not seem to function as intended

What are the benefits of using default ES module properties for exporting/importing compared to named module properties?

How can we create external labels for a polar chart in ng2-charts and chart.js, with a set position outside the circular rings?

The issue with prerendering leads to a SyntaxError: Forbidden to utilize import statement in a non-module context

Having trouble accessing previously submitted form values in Angular

There is an issue with TypeScript where the indexable type "string[]" is not able to be

Leveraging constructors for injecting dependencies in Angular is a key practice for enhancing modularity and maintainability

"The code to extract the ID and value from a radio button that is selected is not functioning properly

Converting an array of object values to an Interface type in Typescript