Unable to add custom props to standard JSX components with Typescript

[tjw0051]

I'm trying to add a custom prop as a standard html attribute to all components, for example:

<div translate="yes">

Expected Behavior

If I add an unknown prop to the div element I get the error:

Property 'translate' does not exist on type 'HTMLAttributes<HTMLDivElement>'.ts(2322)

I've tried redefining the interface for HTMLAttributes in my declaration.d.ts file as:

import { JSX } from "preact";
declare module 'preact' {
    interface HTMLAttributes<RefType extends EventTarget = EventTarget>
		extends preact.ClassAttributes<RefType>,
			    JSX.DOMAttributes<RefType> {
            translate: string;
        }
}

But this produces the same error. Am I doing this wrong? Is there a way to add additional props to built-in jsx elements?

[rschristian]

I believe you want something like this: https://github.com/preactjs/wmr/blob/42fa94027c0adc05b1e05b364010eb39203a12e8/packages/preact-iso/router.d.ts#L22-L27

Just swap out RouteableProps for whatever you want.