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.