CODEWITHSUNDEEP
reactjstypescriptreact-props
Taghi Khavari
Taghi Khavari

Reputation: 6582

How Can I extend a React functional Component Prop Type?

I have a react functional component which works perfectly and I'm using typescript for this component. I want to extend it a little so I could use it other places too, the challenge is I used a type for a prop which I don't want to change , but to extend it , here is the component: 

const CargoCard = (props: CargoGetListResultModel) => {
  ** Some Code here **
}

Can anyone please help me how can I extend prop types? for example I want to add two new props like 

{isExtended: boolean; extendedData: {id: number, title: string}}

Upvotes: 2

Views: 3821

Answers (1)

Sahandevs
Sahandevs

Reputation: 1160

You can use Intersection Types

type ExtendedType = CargoGetListResultModel & {isExtended: boolean; extendedData: {id: number, title: string}};

// inline:

const CargoCard = (props: CargoGetListResultModel & {isExtended: boolean; extendedData: {id: number, title: string}}) => {
  // ** Some Code here **
}

Check out https://www.typescriptlang.org/docs/handbook/advanced-types.html for more examples.

Upvotes: 2

Related Questions