Wrapper around union function in TypeScript with generics

Question

Wrapper around union function in TypeScript with generics

I'm struggling to find a solution for typing a wrapper function. My goal is to enhance a form control's onChange callback by adding a console.log. Can someone please point out what I might be overlooking?

interface TextInput {
    type: 'TextInput';
    onChange: (value: string) => void;
}

interface NumberInput {
    type: 'NumberInput';
    onChange: (value: number) => void;
}

type FormControl = TextInput | NumberInput;

export const withLogger = <TFormControl extends FormControl>(formControl: TFormControl): TFormControl => ({
    ...formControl,
    onChange: (...args: Parameters<TFormControl['onChange']>) => {
        console.log(formControl.type, 'onChange', args);
        // Issue: A spread argument must either have a tuple type or be passed to a rest parameter.(2556)
        return formControl.onChange(...args);
    },
});

I've tried various ways of defining the arguments for the onChange wrapper such as:

onChange: (value: any) => formControl.onChange(value)
onChange: <TValue>(value: TValue) => formControl.onChange(value)
onChange: (value: number | string) => formControl.onChange(value)

However, all these attempts result in an error message:

Argument of type 'string | number' is not assignable to parameter of type 'never'. Type 'string' is not assignable to type 'never'.(2345)

Edit: TypeScript playground link

typescript generics union

Answer 1

Answer №1

When it comes to conditional types that rely on generic type parameters, the TypeScript compiler faces limitations in terms of analysis. Due to the nature of conditional types and how they interact with generic type parameters like Parameters<T>, which are implemented as conditional types themselves, the compiler struggles to determine the specifics of

Parameters<TFormControl['onChange']>

. This uncertainty poses challenges when verifying its compatibility with functions of type TFormControl['onChange'].

The inability of the compiler to fully grasp the inner workings of Parameters<T> leads to scenarios where formControl.onChange(...args) is misconstrued, causing a widening effect from the original generic TFormControl to the non-generic FormControl union type. Consequently, calling a union of functions becomes problematic.

A suggested remedy involves refactoring your code so that generic operations are handled through indexed accesses into homomorphic mapped types rather than relying on conditional types. Detailed guidance on this technique can be found in microsoft/TypeScript#47109.

You can begin by defining a simple mapping object, connecting literal types like "TextInput" and "NumberInput" to their respective parameter list types:

interface InputArgs {
    TextInput: [value: string];
    NumberInput: [value: number];
}

Subsequently, introduce Input<K> as a distributive object type over K, allowing for indexing into a mapped type over K to yield a union:

type Input<K extends keyof InputArgs = keyof InputArgs> =
    { [P in K]: { type: P, onChange: (...args: InputArgs[P]) => void } }[K];

This consolidated Input type encompasses the functionalities of TextInput, NumberInput, and FormControl:

type TextInput = Input<"TextInput">;
type NumberInput = Input<"NumberInput">;
type FormControl = Input;

With this setup, you can implement withLogger() as follows:

export const withLogger = <K extends keyof InputArgs>(formControl: Input<K>): Input<K> => ({
    ...formControl,
    onChange: (...args: InputArgs[K]) => {
        console.log(formControl.type, 'onChange', args);
        return formControl.onChange(...args); // okay
    },
});

This method ensures that onChange for an Input<K> maintains its generic qualities, accepting arguments of type InputArgs[K]. As a result, no unnecessary widening occurs, preserving the usability of the function and its arguments.

Playground link to code

Answer 2

When it comes to conditional types that rely on generic type parameters, the TypeScript compiler faces limitations in terms of analysis. Due to the nature of conditional types and how they interact with generic type parameters like Parameters<T>, which are implemented as conditional types themselves, the compiler struggles to determine the specifics of

Parameters<TFormControl['onChange']>

. This uncertainty poses challenges when verifying its compatibility with functions of type TFormControl['onChange'].

The inability of the compiler to fully grasp the inner workings of Parameters<T> leads to scenarios where formControl.onChange(...args) is misconstrued, causing a widening effect from the original generic TFormControl to the non-generic FormControl union type. Consequently, calling a union of functions becomes problematic.

A suggested remedy involves refactoring your code so that generic operations are handled through indexed accesses into homomorphic mapped types rather than relying on conditional types. Detailed guidance on this technique can be found in microsoft/TypeScript#47109.

You can begin by defining a simple mapping object, connecting literal types like "TextInput" and "NumberInput" to their respective parameter list types:

interface InputArgs {
    TextInput: [value: string];
    NumberInput: [value: number];
}

Subsequently, introduce Input<K> as a distributive object type over K, allowing for indexing into a mapped type over K to yield a union:

type Input<K extends keyof InputArgs = keyof InputArgs> =
    { [P in K]: { type: P, onChange: (...args: InputArgs[P]) => void } }[K];

This consolidated Input type encompasses the functionalities of TextInput, NumberInput, and FormControl:

type TextInput = Input<"TextInput">;
type NumberInput = Input<"NumberInput">;
type FormControl = Input;

With this setup, you can implement withLogger() as follows:

export const withLogger = <K extends keyof InputArgs>(formControl: Input<K>): Input<K> => ({
    ...formControl,
    onChange: (...args: InputArgs[K]) => {
        console.log(formControl.type, 'onChange', args);
        return formControl.onChange(...args); // okay
    },
});

This method ensures that onChange for an Input<K> maintains its generic qualities, accepting arguments of type InputArgs[K]. As a result, no unnecessary widening occurs, preserving the usability of the function and its arguments.

Playground link to code

Wrapper around union function in TypeScript with generics

Answer №1

Similar questions

Angular 9: The instantiation of cyclic dependencies is not allowed

Typescript loading icon directive

Error code -8 occurred while executing the yarn dev command, unable to identify the issue

The issue of returning a boolean value in an rxjs function leading to failure

Managing Modules at Runtime in Electron and Typescript: Best Practices to Ensure Smooth Operation

Just completed the upgrade of my Angular project from version 9 to version 12, but now encountering issues with a module that utilizes Plotly

Enhanced string key indexer type safety in TypeScript

Error: Failed to locate package "package-name" in the "npm" registry during yarn installation

Using methods from one component in another with NgModules

Why is webpack attempting to package up my testing files?

When using TypeScript, my sorting function returns a value of 0 for all time values

Access SCSS variable values in Angular HTML or TypeScript files

Command to update a document in AWS DynamoDB using the Document Client

Setting a value to an optional property of an inherited type is a simple task that can

When utilizing useRef and useCallback in React, the output is visible in the console log but does not appear on the page

Function overloading proving to be ineffective in dealing with this issue

What steps can be taken to resolve the error message "Module '../home/featuredRooms' cannot be found, or its corresponding type declarations"?

Handling HTTP errors in Angular when receiving a JSON response

Adjust the size of an Angular component or directive based on the variable being passed in

What is the most graceful method to define a class attribute just once?