Visual Studio Code JavaScript Intellisense不适用于对象属性

Question

我正在使用Visual Studio Code 1.11.1。

对于以下代码，Intellisense正常工作，理解 canvas 变量的类型为 HTMLCanvasElement ：

var canvas = document.getElementsByTagName('canvas')[0];

事实上，当我写下该变量的名称后跟一个点时，它会显示 HTMLCanvasElement 的所有属性和方法。

但是，使用以下代码，我将该变量包装在对象（充当命名空间）中，Intellisense不再理解该变量的类型为 HTMLCanvasElement ：

// create a namespace "App"
var App;
App = {};

App.canvas = document.getElementsByTagName('canvas');

当我写“ App.canvas ”后跟一个点字符时，Intellisense没有向我显示 HTMLCanvasElement 的所有属性和方法。实际上，它会考虑任何类型的 App.canvas 。

我也尝试过使用 @type 注释，如下面的代码所示，但结果是一样的：

// create a namespace "App"
var App;
App = {};

/** @type {HTMLCanvasElement} */
App.canvas = document.getElementsByTagName('canvas')[0];

是否有可能让Intellisense理解对象属性的变量类型（例如我的示例中的 App.canvas ）？

Answer 1

我致力于VSCode的JS / TS支持。我们使用TypeScript项目来支持我们的JS和TS语言支持，所以相信你遇到了这个bug：https://github.com/Microsoft/TypeScript/issues/10868

要解决此问题，请尝试在canvas本身上声明App的类型：

/** @type {{canvas:HTMLCanvasElement}} */
var App;
App = {};

App.canvas = document.getElementsByTagName('canvas')[0];

使用对象文字也应该有效：

var App = { canvas: document.getElementsByTagName('canvas')[0] }

我们正在研究在这些情况下改进IntelliSense