j5juice j5juice - 1 month ago 36
TypeScript Question

Property is missing in type error

I am having an issue with working through a demo React project. Most of the issues stem from me trying to implement it in Typescript where they are using Javascript. This gist is my app.tsx file.

https://gist.github.com/jjuel/59eed01cccca0a7b4f486181f2a14c6c

When I run this I get errors pertaining to the interface.


ERROR in ./app/app.tsx
(38,17): error TS2324: Property 'humans' is missing in type 'IntrinsicAttributes & IntrinsicClassAttributes & AppProps & { children?: ReactElement |...'.

ERROR in ./app/app.tsx
(38,17): error TS2324: Property 'stores' is missing in type 'IntrinsicAttributes & IntrinsicClassAttributes & AppProps & { children?: ReactElement |...'.
webpack: bundle is now VALID.


I have no idea what is going on with this. Does anyone know what my issue could be? Thanks!

Answer

You have the following interface :

interface AppProps {
    humans: any;
    stores: any;
}

Which is you saying that App must be passed in humans and stores. However you are initializing it as <App /> in ReactDOM.render(<App />, document.getElementById('main')); without the properties. This is TypeScript providing you with errors about what you said was the intented use. It's an error like having a function with arguments but calling it without passing any.

Fix

Perhaps these properties are optional for you? If so declare it as such:

interface AppProps {
    humans?: any;
    stores?: any;
}

Otherwise provide them e.g. <App humans={123} stores={123} /> (sample instances of humans and stores).