Javascript：为什么在某些情况下 vscode 的自动补全找不到特定于对象的建议？

Question

I'm trying to understand why vsCode's autocomplete function will sometimes give me a list of all members of a certain object and sometimes only a short list of options that I have used before but have nothing to do with the object in question, as seen in the images below.

For me as a beginner it's so very important to be able to explore the Document Object Model with the help of visual suggestions and from my limited understanding I just can't spot any difference between the two examples I'm looking at. The code below is all that there is in the current file (for simplicity):

const myCanvas = document.getElementById("canvas");
const myContext = myCanvas.getContext("2d");

From myCanvas. I would get all suggestions as expected, like "getContext", whereas from myContext. I only get an assortment of some items I've used before, but none of the methods or fields of the renderingContext2d-object, like "beginPath". Why is that and is there anything I can do to get all suggestions?

vsCode with incomplete autocomplete suggestions

VsCode with complete autocomplete suggestions

Answer 1

const myContext = myCanvas.getContext("2d");

The type of the return value of this function is based on the parameter so vscode doesn't actually know what type "myContext" is. So it can't auto suggest anything.

While with

const myCanvas = document.getElementById("canvas");

The function always returns a DOM element type so vscode can auto suggest DOM element methods and properties.

Answer 2

You can use JSDoc style type annotations , but you should know which type of element you'll get from document.getElementById. In your example this type is HTMLCanvasElement, what you can define like that:

/** @type {HTMLCanvasElement} */
const myCanvas = document.getElementById("canvas");
/** @type {CanvasRenderingContext2D} */
const myContext = myCanvas.getContext("2d");

After that, myCanvas.get... will give you "getContext" hint.