rxjs-hooks | React hooks for RxJS | Reactive Programming library

This is caused by the distributive behavior of conditional types. Conditional types distribute over naked type parameters. This means if the type parameter contains a union, the conditional type will be applied to each member of the union and the result will be the union of all applications. So in your case we would get VoidableCallback<{ type: 'add'; n: number } | { type: 'multiply'; n: number }> = VoidableCallback<{ type: 'add'; n: number }> | VoidableCallback<{ type: 'multiply'; n: number }> = ((val: { type: 'add'; n: number }) => void) | ((val: { type: 'multiply'; n: number }) => void) You can read about this behavior here

The reason you get an error about the intersection is the way typescript deals with unions of function signatures, it basically requires that the parameters be compatible will all signatures in the union, so the parameter must be an intersection of all possible parameter types. You can read about this here

The simple solution is to disable the distribution for the conditional type. This is easily done by placing the type parameter in a tuple: