score:1

i've ran into the same problem, here is my working example:

interface commonprops {
    children: react.reactnode;
}

interface truncatedprops extends commonprops {
    truncate?: 'on';
    expanded?: boolean;
}

interface notruncatedprops extends commonprops {
    truncate?: 'off';
}

interface textprops extends commonprops {
    truncate?: 'on' | 'off';
    expanded?: boolean;
}

function text(props: notruncatedprops): jsx.element;
function text(props: truncatedprops): jsx.element;

function text(props: textprops) {
    const { children, truncate, expanded } = props;
    const classname = truncate ? 'u-text-truncate' : '';

    return (
        <div classname={classname} aria-expanded={!!expanded}>
            {children}
        </div>
    );
}

but the issue is that i can't make use spread operator for props like so:

...
const textprops: textprops= {
        truncate: 'on',
        expanded: true,
        children: 'text'
    };
<text {...textprops} /> <- typescript warning
...

you should explicitly point out the right type for textprops: truncatedprops or notruncatedpops, which isn't handy.


Related Query

More Query from same tag