属性 'customProperty' 在类型 'X[]' 上不存在。打字稿反应。 TS2339

Question

我正在尝试将目录组件移动到 redux 中，但我一直收到此错误。该类型基本上是一个对象数组。如果我将类型从 'Section' 更改为任何类型，那么 mapStateToProps 中的 sections 道具会抱怨 'no overload matches this call'.

Property 'sections' does not exist on type '({ title: string; imageURL: string; id: number; linkURL: string; size?: undefined; } | { title: string; imageURL: string; size: string; id: number; linkURL: string; })[]'

Directory.tsx

import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { selectDirectorySections, Section } from '../../redux/directory/directorySelectors';
import MenuItem, { IMenuItem } from '../menuItem/MenuItem';
import './Directory.scss';

interface IMenuItems extends IMenuItem {
    id:number
};

const Directory = ({ sections }:Section) => {
    return (
        <div className='directory-menu'>
            {sections.map(({ id, ...otherSectionProps }:IMenuItems) => (
                <MenuItem key={id} {...otherSectionProps} />
            ))}
        </div>
    );
};

const mapStateToProps = createStructuredSelector({
    sections: selectDirectorySections
});

export default connect(mapStateToProps)(Directory);

directorySelectors.ts

import { RootState } from '../rootReducer';
import { createSelector } from 'reselect';

const selectDirectory = (state:RootState) => state.directory;

export const selectDirectorySections = createSelector(
    [selectDirectory],
    directory => directory.sections
);

export type Section = ReturnType<typeof selectDirectorySections>;

directoryReducer.js

const INITIAL_STATE = {
    sections: [
        {
            title: 'hats',
            imageURL: 'https://i.ibb.co/cvpntL1/hats.png',
            id: 1,
            linkURL: 'hats'
        }...
    ]
};

const directoryReducer = (state=INITIAL_STATE, action) => {
    switch(action.type) {
        default:
            return state;
    };
};

export default directoryReducer;

Answer 1

在此代码中：

const Directory = ({ sections }:Section) => {
    return (
        <div className='directory-menu'>
            {sections.map(({ id, ...otherSectionProps }:IMenuItems) => (
                <MenuItem key={id} {...otherSectionProps} />
            ))}
        </div>
    );
};

您正在尝试从 Section 类型的对象中解构属性 sections。 Section 定义为：

export const selectDirectorySections = createSelector(
    [selectDirectory],
    directory => directory.sections
);

export type Section = ReturnType<typeof selectDirectorySections>;

所以它具有 directory.sections 所具有的类型。从名称 directory.sections 和错误消息来看，这是一个 array:

Property 'sections' does not exist on type '({ title: string; imageURL: string; id: number; linkURL: string; size?: undefined; } | { title: string; imageURL: string; size: string; id: number; linkURL: string; })[]'
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^

数组没有 sections 属性（除非你加一个，这通常不是一个好主意）。

您需要修改定义 Section 的方式，或更改使用它的代码以将其用作数组（例如，通过循环等）。

属性 'customProperty' 在类型 'X[]' 上不存在。打字稿反应。 TS2339

Property 'customProperty' does not exist on type 'X[]'. Typescript React. TS2339

typescript

reactjs

redux

react-redux

react-tsx