CODEWITHSUNDEEP
reactjstypescript
GROVER.
GROVER.

Reputation: 4378

extend inline typescript interface on function

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.

Upvotes: 4

Views: 2830

Answers (1)

tenshi
tenshi

Reputation: 26326

Use an intersection:

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

Upvotes: 11

Related Questions