类型“X[]”上不存在属性“customProperty”。打字稿反应。 TS2339答案

【问题标题】：Property 'customProperty' does not exist on type 'X[]'. Typescript React. TS2339类型“X[]”上不存在属性“customProperty”。打字稿反应。 TS2339
【发布时间】：2020-12-18 02:58:28
【问题描述】：

我正在尝试将目录组件移动到 redux，但我不断收到此错误。该类型基本上是一个对象数组。如果我将类型从“Section”更改为 any，则 mapStateToProps 中的 section 属性会抱怨“没有重载匹配此调用”。

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;

【问题讨论】：

标签： reactjs typescript redux react-redux react-tsx

【解决方案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 和错误消息来看，这是一个数组：

类型 '({ title: string; imageURL: string; id: number; linkURL: string; size?: undefined; } | { title: string; imageURL: string; size: string; id:数字；链接URL：字符串；})[]' −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− −−−−−−−−−−−−^^

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

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

【讨论】：