Property 'store' does not exist on type 'Readonly<AppInitialProps
Solution 1:
Welcome to the community!
Your English is perfect, don't worry, keep trying and always post as most data possible so we can help you.
Your error is very clear but your problem is understanding the messy message of Typescript, let's break it down.
Property 'store' does not exist on type 'Readonly<AppInitialProps & { Component: NextComponentType<NextPageContext<any, AnyAction>, any, {}>; router: Router; __N_SSG?: boolean | undefined; __N_SSP?: boolean | undefined
; }> & Readonly<...>'.
You need to worry about the property store
which you want to extract from this line:
const { Component, store } = this.props;
The error message is saying the property store
does not exist in this.props
. TypeScript will check, among other things, for the existence of properties and he does that by checking the types. this.props
has the following type (from the error message):
Readonly<AppInitialProps & { Component: NextComponentType<NextPageContext<any, AnyAction>, any, {}>; router: Router; __N_SSG?: boolean | undefined; __N_SSP?: boolean | undefined
; }> & Readonly<...>
I recommend taking a look into TypeScript advanced types to understand what is Readonly
among others you will see when working with TS. But, in a nutshell, the type above is a combination of multiple types, try to read it like:
Readonly<A & B & C>
The &
operator combines two types. The resulting type above will be a combination of the types A
, B
and C
and the properties will be readonly
, which means you should not be changing the value of the properties.
Here an example I made for you:
type PersonProfile = {
name: string;
};
type PersonAge = {
age: number
}
type FullProfile = PersonProfile & PersonAge;
const personA: PersonProfile = { name: "Murillo" };
personA.name = "Henrique"; // ok
const fullPersonData: PersonProfile & PersonAge = { name: "Murillo", age: 103 };
const anotherFullPersonData: FullProfile = { name: "Henrique", age: 574 }; // The same
const personB: Readonly<PersonProfile> = { name: "John" };
personB.name = "Doe"; // Error, Cannot assign to 'name' because it is a read-only property
Solution
You can do the following to remove the error and test if everything works.
const { Component, store } = this.props as any;
This changes the type of this.props
from that messy stuff to any
, and any
can contain any property. You can do this for testing purposes, but I don't recommend using it, in fact, tools like eslint may not allow you on doing it (kind of breaks the purpose of using TypeScript).
You will also notice you will lose the suggestions from your editor because he doesn't know what is store
and Component
anymore.
I recommend you to change the type of the props
from your component, so the type will be the type it currently has + the store you want to extract. You may have a bit of work on that but I promise it will be nice learning.
This may help you with changing the type of the props in the whole component (didn't read it all).
Solution 2
// ...
type MyAmazingReduxStore = { store: any } // Change *any* to the correct type. check the redux documentation
// ...
const { Component, store } = this.props as Readonly<typeof this.props & MyAmazingReduxStore>
This changes the type of the props
to what it is + your new type. The problem is you won't change the type of the props in whe whole component, just on that line of code.
Don worry if it is too much information for now, keep trying!