Menu
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!
813
The error "Type is missing the following properties from type" occurs when the type we assign to a variable is missing some of the properties the actual type of the variable expects. To solve the error, make sure to specify all of the required properties on the object.
The React. js error "Type is missing the following properties from type" occurs when we don't pass any props to a component, or don't pass it all of the props it requires. To solve the error, make sure to provide all of the props that are required in the component. Here is an example of how the error occurs.
The "Property does not exist on type '{}'" error occurs when we try to access or set a property that is not contained in the object's type. To solve the error, type the object properties explicitly or use a type with variable key names.
Never is a new type in TypeScript that denotes values that will never be encountered. Example 1: The null can be assigned to void but null cannot be assigned to never type variables, nor can any other type be assigned including any.
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.
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).
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
