CODEWITHSUNDEEP
reactjstypescript
Tim Givois
Tim Givois

Reputation: 2014

Extend child component props into wrapper component

I want to create a wrapper component that picks the partial of some props of an inner component and adds some custome defined props. The problem with this is that pick will create a type not an interface. so I'm unable to add other keys. How can I perform this? 

type innerProps = Partial<Pick<InnerComponentProps<T>, |"id"|"otherProps">>
interface outerComponentProps {
    // extend inner props and add more custom props
}

Is there a way to "destructure" innerProps into outerComponentProps?

Upvotes: 1

Views: 216

Answers (1)

ProdigySim
ProdigySim

Reputation: 2933

You can do this a few ways, but to stick with interfaces, you could extend the Partial<Pick<InnerComponentProps, 'id'|'otherProps'>> type:

interface InnerComponentProps {
    id: number;
    otherProps: object[];
    skippedProp: boolean;
}

interface OuterComponentProps extends 
  Partial<Pick<InnerComponentProps, 'id' | 'otherProps'>> 
{
    newProp: string;
}

Typescript-playground demo

Upvotes: 2

Related Questions