typescript - 画布上下文的包装类

Question

想法是创建一个可以扩展给定画布上下文的类，提供额外的方法并存储一些数据（如画布中心或颜色托盘），但也允许访问上下文属性

在纯 JavaScript 中，这可以正常工作：

class Board  {
  constructor(ctx) {
    Object.setPrototypeOf(Board.prototype, ctx)
  }

  drawHexagon(){
    //do the drawing
  }
}

let board = new Board(canvas.getContext("2d"))

board.fillStyle = "white" //accesses contexts property
board.drawHexagon() //uses own method

这似乎是一个 hack，但还没有找到其他方法。typescript 也不知道 Board 扩展了提供的上下文并在我尝试访问它的属性时抱怨。

我试着像这样输入 Board：

class Board extends CanvasRenderingContext2D {
  constructor(ctx: CanvasRenderingContext2D) {
    super() 
    //typescript requires call to super if class extends something
    //but this creates a runtime error
    Object.setPrototypeOf(Board.prototype, ctx)
  }
}

像这样尝试：

//results in an error from typescript:
//Class 'Board' incorrectly implements interface 'CanvasRenderingContext2D'
class Board implements CanvasRenderingContext2D {
  constructor(ctx: CanvasRenderingContext2D) {
    Object.setPrototypeOf(Board.prototype, ctx)
  }
}

是的，我可以这样做

class Board  {
  context: CanvasRenderingContext2D
  constructor(ctx: CanvasRenderingContext2D) {
    this.context = ctx
  }
}

let board = new Board(canvas.getContext("2d"))
board.context.beginPath() //here is how I would that access contexts property

但目标正是避免它（如果可能）

我像往常一样陷入思考一种解决方案而没有看到其他解决方案的困境。

什么是实现这个类的正确方法？

标签： typescriptooptypescript-typings