Typescript 类型“Readonly_Typescript_Redux_Next

Typescript 类型“Readonly

typescript redux

Typescript 类型“Readonly,typescript,redux,next,Typescript,Redux,Next,我在学习下一个，打字稿，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。为了在下一步中应用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<...>'.

错误消息表示this.props中不存在属性存储。TypeScript将检查属性的存在性，他通过检查类型来实现这一点。此.props在错误消息中具有以下类型：

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

&运算符结合了两种类型。上面的结果类型将是类型a、B和C的组合，并且属性将是只读的，这意味着您不应该更改属性的值

下面是我给大家举的一个例子：

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

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

您还将注意到，您将丢失来自编辑器的建议，因为他不再知道什么是存储和组件

我建议您更改组件中道具的类型，以便该类型将是当前的类型+要提取的存储。你可能有一点工作，但我保证这将是很好的学习

可能会帮助你改变道具的类型在整个组件中并没有阅读所有内容

解决方案2 这会将道具的类型更改为您的新类型。问题是您不会在整个组件中更改道具的类型，只是在代码行中

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