Missing property in type error

Question

I had a problem working on a Demo React project. Most of the problems are related to the fact that I'm trying to implement it in Typescript, where they use Javascript. This text is my app.tsx file.

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

When I run this, I get interface related errors.

A mistake in. /app/app.tsx(38.17): TS2324 error: the 'people' property is not present in the types 'IntrinsicAttributes and IntrinsicClassAttributes and AppProps and {children ?: ReactElement | ...'.

A mistake in. /app/app.tsx(38.17): TS2324 error: the 'stores' properties are missing from the types 'IntrinsicAttributes and IntrinsicClassAttributes and AppProps and {children ?: ReactElement | ...'. webpack: bundle now has a VALID value.

I have no idea what is happening with this. Does anyone know what my problem might be? Thank!

Answer 1

You have the following interface:

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

What do you say that Appshould be referred to humansand stores. However, you initialize it as <App />in ReactDOM.render(<App />, document.getElementById('main')); without properties . This is TypeScript, providing you errors regarding what you said, this is an intentional use. This is a mistake, like a function with arguments, but calling it without passing any.

Fix

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

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

Otherwise, specify them, for example. <App humans={123} stores={123} />(examples of people and stores).