typescript - 用于保存 Jquery 对 HTML5 Canvas 的引用的 Typescript 变量

Question

嗨，我想知道我是否以正确的方式执行此操作，我想要一个 Typescript 变量来保存对 HTML5 Canvas 的 Jquery 引用。我有一个无类型的画布对象，它从 $(document).ready 中的行传递到构造函数中。

游戏.ts：

///<reference path="../javascripts/sprite.js" />
///<reference path="d.ts/jquery-1.8.d.ts" />
///<reference path="../javascripts/jquery-1.8.2.js/>


        $(document).ready(function () {
        canvas = $('#canvas');

        })
    });

class Game {

    canvas;

    CANVAS_WIDTH: number;
    CANVAS_HEIGHT: number;

    constructor (canvas) {
        this.canvas = canvas;
        this.CANVAS_WIDTH = canvas.width();
        this.CANVAS_HEIGHT = canvas.height();
    }

但是，在游戏类中使用此画布变量时，我没有像 .width() 那样获得任何 jquery 语法自动完成；

Answer 1

一种更好的做事方式（使用 HTMLCanvasElement 类型），虽然丢失了 width() 属性是像这样引用 Canvas。

  canvas: HTMLCanvasElement = <HTMLCanvasElement> document.getElementById('canvas');

context2D: CanvasRenderingContext2D;

Answer 2

解决方案，使用 JQuery 变量：

class Game {

     canvas : JQuery;

    CANVAS_WIDTH: number;
    CANVAS_HEIGHT: number;

    constructor (canvas:JQuery) {
        this.canvas = canvas;

        this.CANVAS_WIDTH = canvas.width();
        this.CANVAS_HEIGHT = canvas.height();
    }