Así que quiero tener un componente que tome as apoyo, ya partir de eso crea un elemento. En código, esto es bastante simple:

 function Box({ as = 'div', children, ...props }) { return createElement(as, props, children); }

Puedo derivar los apoyos para un as usando el siguiente código básico:

 type Elements = JSX.IntrinsicElements; type ElementType = keyof Elements | ComponentType<any>; type ElementProps<TElement> = TElement extends keyof Elements ? Elements[TElement] : TElement extends ComponentType<infer TProps> ? TProps : never; type Props<TElement> = { readonly as: TElement; } & ElementProps<TElement>; type DivProps = Props<{as: 'div'}>; // this works

Sin embargo, con lo que tengo problemas es con el reenvío de la referencia .

Puedo hacer lo siguiente para convertir la cadena literal en un HTMLElement

 type InferElement<TElement> = TElement extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[TElement] : TElement; type DivElement = InferElement<'div'>; // HTMLDivElement

Pero parece que no puedo hacer que funcione cuando reenvío la referencia:

 function BaseBox<T extends ElementType>( { as = 'div', children, ...props }: Props<T>, ref: ForwardedRef<InferElement<T>> ) { return createElement(as, props, children); } const Box = forwardRef(BaseBox); // this doesn't work

¿Cómo haría para decirle a mecanografiado cómo interpretar esto correctamente?