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!