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

Question

I'm trying to move a directory component into redux, but I keep getting this error. The type is basically an array of objects. If I change the type from 'Section' to any, then the sections prop in mapStateToProps complains that '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

In this code:

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

you're trying to destructure the property sections from an object of type Section. Section is defined as:

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

export type Section = ReturnType<typeof selectDirectorySections>;

So it has the type that directory.sections has. From the name directory.sections, and from the error message, that's an 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; })[]'
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^

Arrays don't have a sections property (unless you add one, which is usually not a good idea).

You'll need to modify how you define Section, or change your code using it to use it as an array (e.g., by looping, etc.).