Question

我正在尝试学习JavaScript并在Visual Studio中编写一些示例。但是，获取画布上下文时，Intellisense不再为我工作。该示例在浏览器中呈现良好。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas with text</title>
    <meta charset="utf-8" />
</head>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.font = "30px Arial";
        ctx.fillText("Hello World", 10, 50);
    </script>
</body>
</html>

该行：“ var ctx = c.getContext（” 2d“）;”导致ctx无法获取IntelliSense。所以font和fillText是我只是必须事先知道的属性和方法，而无法从Visual Studio获得任何帮助。

那是正常的还是我做错了什么？

Answer 1

不幸的是，这是预期的。

Visual Studio在后台使用Typescript来静态分析您的代码并猜测您要使用的“类型”，从而提供智能感知。这不是一件容易的事。 JavaScript 不是一种类型化的语言，坦率地说，VS可以做到这一点令人印象深刻。

但是，.getContext()函数可以返回几种不同的类型（https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext），而CanvasRenderingContext2D只是其中之一。虽然我们可以理解您的字符串“ 2d”是一个常量，但tsc却不能。

有一些希望-VS还可以记住您在对象上完成的操作，因此一旦使用了一些属性，它就会开始建议那些属性（尽管坦率地说，如果拼写错误，那将是一把双刃剑东西！）。

CanvasRenderingContext2D似乎没有构造函数（https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D），这意味着您无法暗示tsc想要的内容。恐怕这很普遍。

我建议的唯一替代方法是直接使用TypeScript，或考虑将Flow添加到项目中，从而允许您使用JavaScript并注释类型（包括vscode扩展名，可以理解这些内容）。

Answer 2

最近使用VSCode进行了研究。使VSCode的智能感知将画布识别为JavaScript中的$this的方法是在从DOM中获取元素时使用内联类型定义注释：

<canvas>

编写JavaScript时Visual Studio缺少IntelliSense

2 个答案: