我正在学习 Next.js、TypeScript、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<...>'.

我不知道我的错在哪里，我想知道是什么问题？

最佳答案

欢迎来到社区!

你的英语很完美，别担心，继续努力并始终发布尽可能多的数据，以便我们可以帮助你。

你的错误很明显，但你的问题是理解 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 advanced types了解什么是 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 的类型，这样类型将是它当前拥有的类型 + 您要提取的商店。您可能需要做一些工作，但我保证这将是很好的学习。

This可能会帮助您更改整个组件中的 Prop 类型(没有全部阅读)。

解决方案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 的类型更改为原来的类型 + 您的新类型。问题是您不会更改整个组件中的 props 类型，只是在那行代码上。

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

关于typescript - 类型 'Readonly<AppInitialProps 上不存在属性 'store'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60882681/