JS/TS: object 解构

Question

i've a variable named props . The type extends from VariantTheme , VariantSize , VariantGradient , & React.DOMAttributes<HTMLOrSVGElement>

Then i want to make one more variable, let say htmlProps . I want to fill the htmlProps from props . I don't want it filled with a foreign props other than listed on React.DOMAttributes<HTMLOrSVGElement> . Then spread the filtered prop into react component.

Here the not working code:

export interface Props
    extends
        VariantTheme,
        VariantSize,
        VariantGradient,
        React.DOMAttributes<HTMLOrSVGElement>
{
    tag?     : keyof JSX.IntrinsicElements
    classes? : string[]
}
export default function Element(props: Props) {
    const elmStyles     = styles.useStyles();

    // themes:
    const variTheme     = useVariantTheme(props);
    const variSize      = useVariantSize(props);
    const variGradient  = useVariantGradient(props);



    const Tag       = (props.tag ?? 'div');
    const htmlProps = props as React.HTMLAttributes<HTMLOrSVGElement>; // not working! Still containing strange props from VariantTheme, VariantSize, tag, classes, ...
    return (
        <Tag {...htmlProps}
            className={[
                elmStyles.main,
                
                // themes:
                variTheme.class,
                variSize.class,
                variGradient.class,

                ...(props.classes ?? []),
            ].filter((c) => !!c).join(' ')}
        >
            {(props as React.PropsWithChildren<Props>)?.children}
        </Tag>
    );
};

Do you have an idea to fix my code?

Answer 1

@spender already gave you the answer. Typescript only exists at compile time and what you are really doing is telling the compiler that props is now of type React.HTMLAttributes<HTMLOrSVGElement> , but you are still responsible on how the props are composed. In sum typescript does not alter how your javascript code works, it only helps you find mistakes at compile time.

One solution for your use case is to have htmlProps as a property of props and then spread these to Tag .

export interface Props
    extends
        VariantTheme,
        VariantSize,
        VariantGradient
{
    tag?     : keyof JSX.IntrinsicElements
    classes? : string[],
    htmlProps: React.DOMAttributes<HTMLOrSVGElement>, // dom attributes is now a property in props
}
export default function Element(props: Props) {
    const elmStyles     = styles.useStyles();

    // themes:
    const variTheme     = useVariantTheme(props);
    const variSize      = useVariantSize(props);
    const variGradient  = useVariantGradient(props);



    const Tag       = (props.tag ?? 'div');
    return (
        <Tag {...props.htmlProps} // you can now pass the desired props to tag
            className={[
                elmStyles.main,
                
                // themes:
                variTheme.class,
                variSize.class,
                variGradient.class,

                ...(props.classes ?? []),
            ].filter((c) => !!c).join(' ')}
        >
            {(props as React.PropsWithChildren<Props>)?.children}
        </Tag>
    );
};

But @spender's suggestion is a better approach.

Don't forget to update your hooks to accommodate this change.