Property … does not exist on type 'IntrinsicAttributes & …'

Question

I changed my .js file to a typescript file .tsx. I have the following function defined within the file:

function MyCard(param1: ObjectDto, toggleFunction: any) {}

I am using this function in another .tsx file like this

<MyCard param1={param1Value} toggleFunction={myToggleFunction} />

But I am getting the following error:

Type '{ param1: ObjectDto; toggleFunction: (index: any) => void; }' is not assignable to type 'IntrinsicAttributes & ObjectDto'. Property 'param1' does not exist on type 'IntrinsicAttributes & ObjectDto'.

This worked fine before changing to the Typescript format. How can I fix this for Typescript?

Answer 1

Components have only one parameter which is the props object, therefore your function should look something like this:

function MyCard(props: { param1: ObjectDto, toggleFunction: any }) {}

The type system is trying to match the properties with the first parameter of your function, which is of type ObjectDto . That's why you get error

is not assignable to type 'IntrinsicAttributes & ObjectDto'

Answer 2

Did you make an interface for your component "MyCard"?

Like this:

interface MyCodeParams {
    param1: ObjectDto
    toggleFunction: (param: any) => void
}

Also, i think toggleFunction: (param?: any) => void is the right type because your function may have parameters so you should type your function like this.