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

Tips for arranging mat-option in alphabetical order using typescript in Angular 7 Material Design

Incorporate the Input() component into your codebase and take advantage of its dot notation features, such as

Ways to turn off Typescript alerts for return statements

Angular service is able to return an Observable after using the .then method

Error occurred after attempting to make a GET request

Is there a way to utilize a value from one column within a Datatables constructor for another column's operation?

Sequelize's bulk synchronization process is ineffective

Issue with routing in a bundled Angular 2 project using webpack

What is the reason for a boolean extracted from a union type showing that it is not equivalent to true?

Tips for determining if a key is present in local storage:

Converting a string into a Date in Typescript while disregarding the timezone

What is the best method for retrieving GET parameters in an Angular2 application?

Issue with Angular 10 Web Worker: Unable to locate the main TypeScript configuration file 'tsconfig.base.json'

Tips for accessing the StaticRouterContext in Typescript with react-router-dom

What is the best way to set up the typeRoots option for proper configuration

Watchable: Yield the outcome of a Promise as long as watching continues

Does a typescript definition file exist for Apple MapKit JS?

The operation failed with a TypeError because the object does not allow the addition of the newField property

Set the timezone of a Javascript Date to be zero

What is the best way to add all the items from an array to a div element?