意外的“属性‘forEach’在类型上不存在”错误

Question

I am creating chess game and am getting Typescript errors that I don't understand.

The errors occur in this class method:

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;
            }
        }
    }
}

Here is the relevant interface declaration:

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,
}

And these are the errors I am getting:

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)

Will be so thankfull for your help!

Answer 1

There errors are telling you exactly what's wrong! Listen to them!

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

According to your IPiece interface, newSteps is a function type with the signature (row: number, column: number): void . Functions do not have a forEach method (unless you add one). Obviously you are referring to the forEach defined for Arrays . So you either have a basic logic problem or a typo, eg perhaps you meant:

figure.steps?.forEach

because IPIece.steps is an Array.

Likewise, the second error is correct as well. On the line

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

both figure.steps could be undefined (you declared steps in IPiece with a ? ) and figure.steps[0] could be undefined as well (eg if it is an empty array). You have not checked for either condition prior to this line.