如何解决'属性'宽度'在类型'HTMLElement'上不存在.' 当使用// @ ts-check在vscode中键入检查Javascript(NOT Typescript)时？

Question

在view.js文件中:

const canvas = document.getElementById('canvas');
...
export {
  canvas,
}; 

在main.js文件中:

 import * as view from '../src/view.js';
 ...
 xPosition: view.canvas.width / 2,

给了我'Property 'width' does not exist on type 'HTMLElement'.类型检查错误.

我不知道如何继续,我对打字稿没有任何了解,而且程序是用javascript编写的.我读过的所有解决方案都需要使用打字稿,这在本例中没用.

我有什么办法可以摆脱这个错误吗？

编辑如果我添加以下内容:

/** @type {HTMLCanvasElement} */
const canvas = document.getElementById('canvas');

在我的view.js文件中,它修复了我的main.js中的所有错误...但是,当我添加// @ts-check包含上述行的view.js文件时,我得到:

Type 'HTMLElement' is not assignable to type 'HTMLCanvasElement'.
  Property 'height' is missing in type 'HTMLElement'.

编辑2

我似乎通过使用以下行添加一些括号来解决这个问题:

const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('canvas'));

Answer 1

并非所有HTML元素都有宽度,尽管画布有.您可以通过缩小型解决这一问题HTMLElement,以HTMLCanvasElement(摘自代码示例这个打字稿文章).

const canvas = document.getElementById('x');

if (isCanvas(canvas)) {
    const width = canvas.width;
}

function isCanvas(obj: HTMLCanvasElement | HTMLElement): obj is HTMLCanvasElement {
    return obj.tagName === 'CANVAS';
}

或者您可以使用类型注释作弊:

const canvas = <HTMLCanvasElement>document.getElementById('x');
const width = canvas.width;

在JavaScript中,您可以使用JSDoc注释来执行类型断言:

/**
 * @type {HTMLCanvasElement}
 */
const canvas = document.getElementById('x');

而且,尽管我还没有尝试过,但即使它是一个JavaScript文件,你也可能会使用ts-ignore注释:

// @ts-ignore: I don't care that it might not be a HTML Canvas Element
const width = canvas.width;