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

Posted 2023-03-15

【中文标题】如何让 VS Code 智能感知识别附加到现有类的新方法

【英文标题】：How to let VS Code intellisense recognize new methods appended to existing class

【发布时间】：2018-11-26 15:06:09

【问题描述】：

我正在尝试在 CanvasRenderingContext2D 类（它是画布元素的上下文对象）上定义新方法。例如，

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 的实例时，智能感知中仍然只显示原始成员。我如何使它工作？谢谢！

【参考方案1】：

似乎没有人有答案；在那种情况下，让我为可能有相同需求的人提供部分答案。可以在项目文件夹中新建一个 lib.es6.d.ts 文件，然后添加

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

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

即使我使用 TypeScript 而不是 javascript 重写整个项目，我仍然找不到解决“转到定义”问题的方法。但是，我可以将声明置于尽可能接近方法的实际代码的位置，以便“转到定义”实际上可行，即使在技术上不是这样。

【参考方案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();

【讨论】：

您的解决方案的主要缺点是您必须在CanvasRenderingContext2D 的每个实例上方手动声明为MyCanvasRenderingContext2D。但是，它确实解决了“去定义”的问题，我会给你投票（你可能看不到，我没有足够的代表）。