TypeScript & React: Property does not exist on type IntrinsicAttributes

If you’re working on a codebase where you are trying to introduce TypeScript gradually, you may start renaming your React components from `.js` or `.jsx` files to `.tsx` incrementally.

Let’s say you are converting FormComponent (form_component.tsx), which imports and renders InputComponent (js file, not converted, input_component.js). If you have installed types for React, you may run into the issue when rendering <InputComponent myProp={someProp}>:


Property 'myProp' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<InputComponent> & Readonly<{ children?: ReactNode; }> & Readonly<{}>'.'

This is because at the time of writing, typed React defaults React components to have an empty property and state. To get around this, you can do any of the following:

– Convert InputComponent to a .tsx file. This takes some effort: converting props and state, and resolving any other errors. You will also have to do the same for any custom React components it imports.

– Define a .d.ts file for InputComponent. react-to-typescript-definitions can help with this. A disadvantage here is that your .js files and the .d.ts can get out of sync.

– Add the following code to InputComponent:

/**
* @augments {object, object>}
*/

The last option is the path of the least resistance, but you lose a lot of the cool type safety that doing the other options would provide. You can follow any updates to the @augments approach at the following github issue: TypeScript/issues/14558

Leave a Reply

Your email address will not be published. Required fields are marked *