[discussion] dynamic merge properties to type(or interface) by its specific key

[pd4d10]

Actually it is a question, but I think it may refers to type system of TypeScript, so I post it here.

The problem is how to dynamic merge properties to type(or interface) by its specific key.

Assuming we are creating a React component named Button. It takes a component prop, and will use this value as component actually rendered. Its implementation may looks like this:

interface ButtonProps {
  component: keyof React.ReactHTML
}

class Button extends React.Component<ButtonProps> {
  render() {
    const { component: Component, ...rest } = this.props
    // give it a button style
    // `component`'s value could be button, a, input, etc
    return <Component {...rest} />
  }
}

we need native HTML element's props merged to ButtonProps.

For example, the usage examples below should be all type safe.

<Button component="button" type="submit">A Button</a>
<Button component="a" href="/">A Link Button</a>
<Button component="input" type="submit" value="An input button" />

Which means, if component === 'a', ButtonProps should be

{ component: React.ReactHTML } & React.AnchorHTMLAttributes<HTMLAnchorElement>

if component === 'input', ButtonProps should be

{ component: React.ReactHTML } & React.InputHTMLAttributes<HTMLInputElement>

How to figure this out in TypeScript?

[pd4d10]

My thoughts:

type PropsOfHtmlTag<T extends keyof React.ReactHTML> =
React.ReactHTML[T] extends React.DetailedHTMLFactory<infer R, any>
  ? R
  : never

interface ButtonProps {
  component: keyof React.ReactHTML
}

type DynamicProps = PropsOfHtmlTag<ButtonProps['component']>

What we need is to merge ButtonProps and DynamicProps

I think this is possible:

import * as React from "React";

type AttributesForTag = { [K in keyof React.ReactHTML]: React.ReactHTML[K] extends React.DetailedHTMLFactory<infer Attr, any> ? Attr : never; };

class Button<K extends keyof AttributesForTag> extends React.Component<{ component: K } & AttributesForTag[K]> {
    render() {
        const { component, ...rest } = this.props as any;
        return React.createElement(component, rest);
    }
}

const x = <Button component="button" type="submit" />

Is it also possible to just make the element be one of the props?

class Button2 extends React.Component<{ component: JSX.Element }> {
    render() { return this.props.component; }
}
<Button2 component={<button type="submit" />} />

[pd4d10]

@Andy-MS Thanks for your response. I tried your example in VSCode:

Since HTML tag a has no value, I think the last line should throw an error but not. Tried to go to value key's definition then it shows:

Seems it merges all HTML tags' attributes? Then we got multiple definitions

[nkappler]

it works for me:

@pd4d10 Darn, it must be inferring K = string and allowing all elements. This has come up before, see #27808. You'll at least get correct behavior if you remember to provide an explicit type argument: <Button<"a"> component="a" value="submit" />;.

[pd4d10]

@nkappler @Andy-MS Thanks. Closing since the question is answered clearly