CODEWITHSUNDEEP
reactjstypescript
j5juice
j5juice

Reputation: 663

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!

Upvotes: 21

Views: 63746

Answers (1)

basarat
basarat

Reputation: 275857

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).

Upvotes: 53

Related Questions