时间戳

首页 > 解决方案 > 意外的`属性'forEach'在类型上不存在`错误

javascript - 意外的`属性'forEach'在类型上不存在`错误

问题描述

我正在创建国际象棋游戏并且收到我不理解的 Typescript 错误。

此类方法中出现错误：

clickEvent (e: MouseEvent): void {
    const coordinates: ClientRect = this.chessBoard.getBoundingClientRect();
    const xCoord: number = e.clientX - coordinates.left;
    const yCoord: number = e.clientY - coordinates.top;
    const findColumn: number = Math.trunc(xCoord / this.squareSize);
    const findRow: number = Math.trunc(yCoord / this.squareSize);

    for (const figure of this.pieces) {
        if (figure.row === findRow && figure.column === findColumn) {
            this.chessBoard.draggable = true;
            this.chessBoard.ondragstart = (e) => e.dataTransfer?.setDragImage(figure.image, this.squareSize / 2, this.squareSize / 2);
            this.chessBoard.ondrag = (e) => {
                figure.newSteps?.forEach((step: IStep) => {
                    step.item = this.pieces.find(f => f.row === step.row && f.column === step.column);
                    (step.item && step.item.color !== figure.color) || !step.item ? this.highlight(step.row, step.column) : null;
                });
                this.newStepsArr = figure.steps || [];
            }
            this.chessBoard.ondragend = (e) => {
                this.newSquare(figure.row, figure.column);
                const squareCoords: ClientRect = this.chessBoard.getBoundingClientRect();
                const dragCoordX: number = Math.trunc((e.clientX - squareCoords.left) / this.squareSize);
                const dragCoordY: number = Math.trunc((e.clientY - squareCoords.top) / this.squareSize);

                figure.row = dragCoordY;
                figure.column = dragCoordX;

                const correctStep: IStep = figure.steps?.find((step: IStep) => step.row === figure.row && step.column === figure.column);
                if (!correctStep || (correctStep.item && correctStep.item.color === figure.color)) {
                    figure.row = figure.steps[0].row;
                    figure.column = figure.steps[0].column;
                }
                this.newStepsArr && this.newStepsArr.slice(1).forEach((step: IStep) => this.newSquare(step.row, step.column, step.item && step.item.image));
                figure.newSteps(figure.row, figure.column);
                this.newSquare(figure.row, figure.column, figure.image);

                this.chessBoard.draggable = false;
            }
        }
    }
}

下面是相关的接口声明：

export interface IPiece {
    id: number,
    column: number,
    row: number,
    color: TColors,
    name: TName,
    image?: HTMLImageElement,
    steps?: IStep[],
    make?(row: number, column: number): void,
    newSteps?(row: number, column: number): void,
}

这些是我得到的错误：

figure.newSteps?.forEach - Property 'forEach' does not exist on type '(row: number, column: number) => void'. ts(2339)

figure.row = figure.steps[0].row; - Object is possibly 'undefined'. ts(2532)

将非常感谢您的帮助！

标签： javascripttypescript

解决方案

有错误告诉你到底是什么问题！听他们说！

figure.newSteps?.forEach - Property 'forEach' does not exist on type '(row: number, column: number) => void'. ts(2339)

根据您的IPiece界面，newSteps是带有签名的函数类型(row: number, column: number): void。函数没有forEach方法（除非您添加一个）。显然，您指的是为 Arrays 定义的forEach。所以你要么有一个基本的逻辑问题，要么有一个错字，例如，也许你的意思是：

figure.steps?.forEach

因为IPIece.steps是一个数组。

同样，第二个错误也是正确的。在线上

figure.row = figure.steps[0].row;

两者都figure.steps可以是undefined（你用 a 声明steps）IPiece也?可以figure.steps[0]是undefined（例如，如果它是一个空数组）。在此行之前，您尚未检查任何一种情况。

推荐阅读