在 function 上扩展内联 typescript 接口

Question

I have a pretty simple React component which takes a required prop, active .

Setting the inline interface for this one prop is quite simple. But now, I need to account for the other types of props that can be passed onto the component.

Luckily, Native supplies the props for this element, so I don't have to recreate the interface for it. But I'm struggling to figure out how to extend my current inline interface to get it to work.

I've tried this approach:

const BarTabName = ({ active, ...props }: { active: boolean; } extends TextProps) => {
    return <Text {...props} />;
};

But this just results in the error:

'?' expected.ts(1005)

If possible, I'm trying to avoid creating a separate interface outside of the parameters.

Answer 1

Use an intersection:

const BarTabName = ({ active, ...props }: { active: boolean; } & TextProps) => {