解决方案

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 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可能会帮助您更改整个组件中道具的类型（无法全部阅读）。

解决方案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的类型更改为+您的新类型。问题是您不会在整个代码行中更改道具的类型。

请不要担心，如果目前信息过多，请继续尝试！

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

1 个答案:

解决方案

解决方案2