An easy way to not have to remember React event handlers types in TypeScript

handler-for.ts

type RemoveOn<T extends string> = T extends `on${infer R}` ? R : T;
type PropsFor<El extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[El];
type OnProps<El extends keyof JSX.IntrinsicElements> = Uncapitalize<RemoveOn<Extract<keyof PropsFor<El>, `on${string}`>>>;
type HandlerFor<El extends keyof JSX.IntrinsicElements, Ev extends OnProps<El>> = NonNullable<PropsFor<El>[`on${Capitalize<Ev>}` & keyof PropsFor<El>]>;

// Creating with a callback
function handlerFor<El extends keyof JSX.IntrinsicElements, Ev extends OnProps<El>>(event: [El, Ev], handler: HandlerFor<El, Ev>) {
    return handler;
}

const onChange = handlerFor(['input', 'change'], event => {
    event.target.value;
    event.target.focus();
});

// Creating literally
const onChange2: HandlerFor<'input', 'change'> = event => {
    event.target.value;
    event.target.focus();
}

function App() {
    return (
      <>
        <input onChange={onChange} />
        <input onChange={onChange2} />
      </>
    );
}