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

Question

我使用的是 Visual Studio Code 1.11.1。

对于以下代码，智能感知可以正常工作，了解 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 的所有属性和方法。事实上，它考虑 any 类型的 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 语言支持，所以相信您遇到了这个错误:https://github.com/Microsoft/TypeScript/issues/10868

作为解决方法，请尝试在 App 本身上声明 canvas 的类型:

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

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

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

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

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