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

【问题标题】：Typescript variable to Hold Jquery reference to HTML5 Canvas用于保存 Jquery 对 HTML5 Canvas 的引用的 Typescript 变量
【发布时间】：2012-11-29 00:44:56
【问题描述】：

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

game.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 语法自动完成功能；

【问题讨论】：

标签： typescript

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

【讨论】：

【解决方案2】：

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

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

context2D: CanvasRenderingContext2D;

【讨论】：