如何让 VS Code 智能感知识别附加到现有 class 的新方法

Question

我正在尝试在 class CanvasRenderingContext2D（这是 canvas 元素的上下文对象）上定义新方法。例如，

CanvasRenderingContext2D.prototype.dot=function(x, y) {
    ....
}

将是一种在 (x, y) 坐标处绘制具有特定样式的点的新方法（函数内的确切代码与我这里的问题无关）。我的问题是，如何让 VS 代码智能感知识别这是现在 CanvasRenderingContext2D 的新方法？我尝试过

/**
 * Draws a dot at the (x, y) coordinate
 * @memberof CanvasRenderingContext2D#
 * @param {number} x 
 * @param {number} y 
 */

但它不起作用，当我写下 CanvasRenderingContext2D 的实例时，智能感知中仍然只显示原始成员。我如何让它发挥作用？谢谢！

Answer 1

好像没人回答；既然如此，让我为那些可能有相同需求的人提供部分答案。可以在项目文件夹中创建一个新的 lib.es6.d.ts 文件，然后添加

interface CanvasRenderingContext2D extends CanvasPathMethods {
    dot(x:number, y:number):void;
}

声明新的点方法；这足以让智能感知在 CanvasRenderingContext2D 的任何实例之后显示它。但是，这并不是一个完整的答案，因为不能转到点方法的实际定义（使用 "go to definition" 只会转到所说的 .d.ts 文件，而不是代码实际所在的位置） .

即使我使用 TypeScript 而不是 JavaScript 重写整个项目，我仍然找不到解决 "go to definition" 问题的方法。但是，我可以将声明尽可能接近方法的实际代码，这样 "go to definition" 实际上就可以工作了，即使在技术上不是这样。

Answer 2

您需要像这样使用自定义的@typedef：

/**
 * Draws a dot at the (x, y) coordinate
 * @param {number} x 
 * @param {number} y 
 */
const dot=function(x, y) {
}
CanvasRenderingContext2D.prototype.dot = dot;

/** @typedef {CanvasRenderingContext2D & { dot: dot }} MyCanvasRenderingContext2D */

/** @type {MyCanvasRenderingContext2D} */
const o = new CanvasRenderingContext2D();
o.dot();

如何让 VS Code 智能感知识别附加到现有 class 的新方法

How to let VS Code intellisense recognize new methods appended to existing class

javascript

javascript-intellisense

visual-studio-code