类型“Readonly<AppInitialProps”上不存在属性“store”

Question

我接下来在学习，打字稿，redux。
为了在下一步中应用 redux，在谷歌搜索之后，我写了这样的代码。
但我不知道错误的含义是什么以及我必须做什么。

import App from "next/app";
import Head from 'next/head';

/*redux*/
import withRedux from 'next-redux-wrapper';
import { Provider } from 'react-redux';
import initialStore from '../redux/store';

export default withRedux(initialStore)(class MyApp extends App{
    static async getInitialProps ({Component, ctx}:any) {
    return {
      pageProps: (Component.getInitialProps ? await Component.getInitialProps(ctx) : {})
    }
  }

    render() {
        const { Component, store } = this.props;

        return(
            <Provider store={store}>
                <AppLayout>
                    <Component />
                </AppLayout>
            </Provider>
        )
    }
})

这是我的代码
错误消息是

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

我不知道我的错
是什么 我想知道是什么问题

抱歉我英语不好

Answer 1

欢迎来到社区！

您的英语是完美的，别担心，继续尝试并始终尽可能多地发布数据，以便我们可以为您提供帮助。

你的错误很清楚，但你的问题是理解 Typescript 的凌乱信息，让我们分解它。

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

您需要担心store要从此行中提取的属性：

const { Component, store } = this.props;

错误消息是该属性store在 中不存在this.props。除其他外，TypeScript 会检查属性是否存在，他通过检查类型来做到这一点。this.props具有以下类型（来自错误消息）：

Readonly<AppInitialProps & { Component: NextComponentType<NextPageContext<any, AnyAction>, any, {}>; router: Router; __N_SSG?: boolean | undefined; __N_SSP?: boolean | undefined
; }> & Readonly<...>

我建议查看TypeScript 高级类型，以了解Readonly使用 TS 时您将看到的其他类型。但是，简而言之，上面的类型是多种类型的组合，尝试阅读它：

Readonly<A & B & C>

该&运营商结合了两种类型。上述所得到的类型将是类型的组合A，B并C与属性将是readonly，这意味着你不应该被改变的属性的值。

这是我为您制作的示例：

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

解决方案

您可以执行以下操作来消除错误并测试一切是否正常。

const { Component, store } = this.props as any;

这将 的类型this.props从凌乱的东西更改为any，并且any可以包含任何属性。您可以出于测试目的这样做，但我不建议使用它，事实上，像eslint这样的工具可能不允许您这样做（有点违反使用 TypeScript 的目的）。

您还会注意到您将失去编辑的建议，因为他不知道是什么，store并且Component不再知道。

我建议您props从组件中更改 的类型，因此类型将是它当前拥有的类型 + 要提取的商店。您可能需要做一些工作，但我保证这将是很好的学习。

这可能会帮助您更改整个组件中道具的类型（没有全部阅读）。

解决方案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>

这会将 的类型更改为props它的类型 + 您的新类型。问题是你不会在整个组件中改变道具的类型，只是在那行代码上。

如果现在信息太多，请不要担心，继续尝试！