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

Question

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

游戏网：

///<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

解决方案，使用 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();
    }

Answer 2

一种更好的做事方法（使用 HTMLCanvasElement 类型），尽管丢失 width（） 属性就是像这样引用 Canvas。

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