Блог

У меня есть такой код, что в конце концов все это должно создать фигуры на моей шахматной доске:

 export class Board {
    chessBoard: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D;
    squareSize: number = 80;
    letters: string[] = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
    numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8];
    pieces: IPiece[] = [];
    lightCell: string = '#efd9b7';
    darkCell: string = '#b48866';
    constructor() {
        this.chessBoard = document.getElementById('chessBoard-canvas') as HTMLCanvasElement;
        this.ctx = this.chessBoard.getContext('2d') as CanvasRenderingContext2D;
    }
   ...
  createFigure(row: number, col: number, x: number, y: number): void {
    for (const figure of this.pieces) {
        figure.image.onload = () => row === figure.row amp;amp; col === figure.column ? figure.create(x, y) : null;
    }
    this.createPieces();
  }
}
 

Но у меня есть некоторые проблемы, такие как:
рисунок.изображение.загрузка — Объект, возможно, «не определен». ts(2532)
рисунок.создать(x, y) — Невозможно вызвать объект, который, возможно, «не определен».ts(2722)

Как с этим справиться?

Интерфейс IPiece

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

}

учитывая, что image и create являются необязательными, вам нужно будет проверить их существование, например

 for (const figure of this.pieces) {
   if(figure.image) {
      figure.image.onload = () => {
         if(row === figure.row amp;amp; col === figure.column) {
            figure.create?.(x, y)
         }         
      }
   }
}
 

обратите также figure.create?.(x, y) внимание на то, что вызывает только create в том случае, если оно существует

также удален троичный, так как часто считается плохой практикой использовать троичный в качестве короткого способа написания if оператора с вызовом функции