Hur löser jag 'Property 'width' does not exist on type 'HTMLElement'.' när jag typkontrollerar Javascript (INTE Typescript) med/@ts-check i vscode?

I view.js-filen:

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

i filen main.js:

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

ger mig 'Property 'width' finns inte på typen 'HTMLElement'. typkontrollfel.

Jag vet inte hur jag ska gå vidare, jag har noll kunskap om TypeScript, och programmet är ändå skrivet i JavaScript. Alla lösningar jag har läst kräver att man använder TypeScript, vilket är helt värdelöst i det här exemplet.

Finns det något jag kan göra för att bli av med det här felet?

REDIGERA om jag lägger till följande:

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

i min view.js-fil fixar det alla fel i min main.js... MEN, när jag lägger till // @ts-check på view.js-filen som innehåller raden ovan får jag:

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

REDIGERA 2

Det verkar som att jag löste det genom att lägga till några parenteser med följande rad:

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

Svar #1

Inte alla HTML-element har en bredd, även om canvas gör det. Du kan lösa problemet genom att begränsa typen från HTMLElement till HTMLCanvasElement (kodexemplet är hämtat från denna TypeScript-artikel).

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

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

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

Eller så kan du fuska med en typannotering:

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

I JavaScript kan du använda JSDoc-kommentarer för att utföra typkontroller:

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

Och, även om jag inte har provat det, kanske du kan komma undan med en ts-ignore-kommentar även om det är en JavaScript-fil:

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

Relaterade artiklar