Свойство 'store' не существует для типа 'Readonly - PullRequest
Новая
       15

Свойство 'store' не существует для типа 'Readonly

1 голос
/ 27 марта 2020

Я учусь дальше, машинопись, редукс. Чтобы применить избыточность в следующем, после поиска в Google, я пишу свой код следующим образом. Но я не знаю, что означает ошибка и что я должен делать. 

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

Я не знаю, в чем моя вина Интересно, в чем проблема?

Извините, я не очень хорош в английском sh

1 Ответ

0 голосов
/ 27 марта 2020

Добро пожаловать в сообщество!

Ваш Engli sh совершенен, не волнуйтесь, продолжайте стараться и всегда публиковайте как можно больше данных, чтобы мы могли помочь вам.

Ваша ошибка очень ясна, но ваша проблема заключается в понимании грязного сообщения 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 среди других, которые вы увидите при работе с ТС. Но, в двух словах, приведенный выше тип является комбинацией нескольких типов, попробуйте прочитать его следующим образом: 

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 на тип + ваш новый тип. Проблема в том, что вы не измените тип реквизита во всем компоненте, только в этой строке кода.

Не беспокойтесь, если сейчас слишком много информации, продолжайте пытаться!

...