带有 JSX.Element 的 TypeScript 类型在 react 将不接受 .map() 并给出错误 TS2339答案

【问题标题】：TypeScript types with JSX.Element on react will not accept .map()and gives error TS2339带有 JSX.Element 的 TypeScript 类型在 react 将不接受 .map() 并给出错误 TS2339
【发布时间】：2020-11-30 09:38:40
【问题描述】：

我正在使用表格元素创建日历，并且正在使用 TypeScript。这是我第一次使用 TypeScript，我很困惑为什么我的类型不被接受。正如您将在下面的代码中看到的那样，我使用 JSX 元素作为并根据 7 行推送它们。

const blankCells: JSX.Element[] = [];
    for (let i = 0; i < firstDayOfMonth(); i++) {
        blankCells.push(
            <td role="presentation">None</td>
        );
    }

    const datesInMonth: JSX.Element[] = [];
    for (let day = 1; day <= daysOfMonth; day++) {
        datesInMonth.push(
            <td key={day} role="presentation">
                <button>{day}</button>
            </td>
        );
    }

    const totalDateElementsOfCalendar:JSX.Element[] = [...blankCells, ...datesInMonth];
    const calendarRows: (JSX.Element | JSX.Element[])[] = []; 
    let calendarSlot: JSX.Element | JSX.Element[] = [];

    totalDateElementsOfCalendar.forEach((dateElement, i) => {
        if (i % 7 !== 0) {
            calendarSlot.push(dateElement); 
        } else {
            calendarRows.push(calendarSlot); 
            calendarSlot = []; 
            calendarSlot.push(dateElement); 
        }
        if (i === totalDateElementsOfCalendar.length - 1) { 
            calendarRows.push(calendarSlot);
        }
    });

排队

if (i % 7 !== 0) {
            calendarSlot.push(dateElement);

TypeScript 给我一个错误“属性 'push' 在类型 'Element | Element[]' 上不存在。 “元素”类型上不存在属性“推送”。 (ts2339)" 这个错误在它下面的 else 语句中不存在。我对我定义的错误感到困惑。如果能解释为什么会发生这种情况以及如何解决它，我会很高兴。

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

你没有做任何 TypeScript 可以看到的告诉它变量是Element[]，而不仅仅是Element。你的类型说它可能是，但只有数组类型有push。

您似乎不需要类型的第一部分，只需将其声明为Element[]：

let calendarSlot: JSX.Element[] = [];

查看代码，也许您希望它是一个包含Element 或Element[] 值的数组？如果是这样，你需要()：

let calendarSlot: (JSX.Element | JSX.Element[])[] = [];

或者你可以使用Array<T>:

let calendarSlot: Array<JSX.Element | JSX.Element[]> = [];

【讨论】：