Typescript JSX with Generics - Parameter implicitly has an 'any' type

Question

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
});

TS Playground

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.

Answer 1

Just explicitly define it as any with args: any and it should stop showing it as error:)