React onChange handler with function union argument causes onChange to show the wrong type

[wbolduc]

Bug Report

The onChange in the given example seems to change types when you pass a function that also accepts a function
the handler

TS playground

🔎 Search Terms

React, onChange

⏯ Playground Link

TS playground

💻 Code

import React, { useState } from 'react'


interface Test<Emp extends null | number> {
	empty_value?: Emp;
	value: number | null;
	onChange: (value: number | Emp) => void;
}

//types stolen from react's index.d.ts
type SetStateAction<S> = S | ((prevState: S) => S);
type Dispatch<A> = (value: A) => void;

const Aaaa = <E extends number | null = null>({
	value,
	// @ts-ignore-next-line This will be null unless the user passes a number in which case this is overridden anyways
	empty_value = null,
	onChange,
}: Test<E>) => (
	<input
		type="number"
		value={value ?? ""}
		onChange={(e) =>
			onChange(e.target.value === "" ? empty_value : +e.target.value)
		}
	/>
);

const B = () => {
	const [value, setValue] = useState(1);

	const handleChange: Dispatch<SetStateAction<number>> = (value) =>
		setValue(value);
	
	const handleChange2: Dispatch<number> = (value) => setValue(value)

	return (
		<>
			<Aaaa value={value} onChange={setValue} empty_value={0} />
			<Aaaa value={value} onChange={handleChange} empty_value={0} />
			{/* If you hover over the onChange in the above two components it suggests that suddenly onChange could also recieve a null value */}

			{/* If you hover over the onChange of the following components, the onChange type appears as expected */}
			<Aaaa value={value} onChange={handleChange2} empty_value={0} />
			<Aaaa value={value} onChange={(v) => setValue(v)} empty_value={0} />
		</>
	);
};

🙁 Actual behavior

onChange does not accept handers and displays as possibly being called with null

🙂 Expected behavior

all onChanges in the ts playground should not produce errors

[RyanCavanaugh]

This follows from the inference algorithm and is intended behavior. Zero candidates are collected for Aaaa's E parameter because the number type gets "peeled off" during the inference step of relating (arg: number | Emp) => void to (arg: number) => (doesn't matter), so TS falls back to the constraint, which is a union.

[typescript-bot]

This issue has been marked 'Working as Intended' and has seen no recent activity. It has been automatically closed for house-keeping purposes.