When using JSX syntax with Generics, Typescript is able to infer properties normally, except the type of function parameters.
Example code:
interface Dictionary {
a: JSX.IntrinsicElements['a'];
button: JSX.IntrinsicElements['button'];
}
type Props<T extends 'a' | 'button'> = Dictionary[T] & {
as: T;
};
function Test<T extends 'a' | 'button'>(args: Props<T>) {
return null;
}
<Test as="a" href="#" onClick={(arg) => {}} />; // Parameter 'arg' implicitly has an 'any' type.
Test({
as: 'a',
href: '#',
onClick: (arg) => {}, // No error
});
If I place the mouse over the onClick property, it can tell the type of the onClick (React.MouseEventHandler<HTMLAnchorElement>), but still cannot infer the parameter’s type.