TypeScript interfaces and constructors

Question

My constructor can't see method in interface and i have such a problem: Class 'Board' incorrectly implements interface 'IBoard'. Property 'makeBoard' is missing in type 'Board' but required in type 'IBoard'.

How to handle it?

interface ICell {
    x: number,
    y: number,
    showBoard(): void,
    ctx: CanvasRenderingContext2D
}

export interface IBoard {
  ctx: CanvasRenderingContext2D,
  cell: Array<ICell>;
  canvas: HTMLCanvasElement,
  createCell(x:number, y:number, ctx:CanvasRenderingContext2D, color:string): void,
  createCells(): void,
  showBoard(): void,
  makeBoard(): void
}

export class Board implements IBoard {
  cell: Array<ICell> = [];
  canvas = document.getElementById('chessBoard-canvas') as HTMLCanvasElement;
  ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
  
  constructor() {
    this.makeBoard();
  }
}

michal.materowski · Accepted Answer · 2021-07-13 12:21:15Z

2

You have to implement the function makeBoard in Board class. Interface is just a contract. It basically says: If you have class that implements this interface it must have methods, that you declared in the interface.

Add make board method to Board class.

 makeBoard(): void {
  throw new Error('Method not implemented.');
}

answered Jul 13, 2021 at 12:21

michal.materowski

4473 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LaytonGB · Accepted Answer · 2021-07-13 12:23:16Z

0

You need to add the methods that the interface describes. You've written that an IBoard needs the createCell, createCells, showBoard, and makeBoard methods, yet you haven't written those methods on the Board class.

This should get rid of the error, but I'd recommend filling out the functions:

export class Board implements IBoard {
  cell: Array<ICell> = [];
  canvas = document.getElementById('chessBoard-canvas') as HTMLCanvasElement;
  ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;

  constructor() {
    this.makeBoard();
  }

  createCell(x,y,ctx,color) {
    return;
  }
  createCells() {
    return;
  }
  showBoard() {
    return;
  }
  makeBoard() {
    return;
  }
}

answered Jul 13, 2021 at 12:23

LaytonGB

1,4041 gold badge10 silver badges23 bronze badges

Collectives™ on Stack Overflow

TypeScript interfaces and constructors

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related