更好的扩展SVG.Element的方法，可以使vscode知道所做的更改并提供文档

问题描述

我正在使用SVG.js，而documentation描述了一种扩展库中类的方法，以便为扩展该类的所有对象添加额外的功能。

我想出了这个示例，为从SVG.Element继承的任何对象提供一个红色边框。

import * as SVG from '@svgdotjs/svg.js';

SVG.extend(SVG.Element,{
    bounding_box: function(margin) {
        var bbox = this.bbox()
        return this.parent().rect({
            x: bbox.x - margin/2,y: bbox.y - margin/2,width: bbox.width + margin,height: bbox.height + margin
        })
        .stroke("red")
        .attr("fill-opacity",0)
    }
})

但是，尽管这可行，但是在运行时发生的事实不允许vscode在继承自SVG.Element的对象上为此功能提供智能建议。同样，我无法提供使用此功能文档来获得此功能的任何人。

我尝试在Element类的正文中更改node_modules/@svgdotjs/svg.js/dist/svg.node.js文件和node_modules/@svgdotjs/svg.js/src/elements/Element.js 以包括我的功能，但是尝试使用它时我收到一条错误消息，说该功能不存在。

我更愿意为open source project on github做出贡献，但是在我弄清这些该死的文件以及实际上将要工作的东西之前，恐怕我没有用。

我需要更改哪个文件才能将新功能写入库的SVG.Element类？我需要克隆存储库并进行重建吗？

我以前从未做过开源，所以这对我来说是第一次。干杯。

解决方法

IntelliSense使用JSDoc语法的子集来增强代码完成度。不幸的是，关于什么有效或无效的文档不完整。 This page做出了很多承诺，但是here起作用的列表要小得多。

描述此类扩展的正确JSDoc方法是使用@mixin MyExtension注释对象文字作为SVG.extend()的参数，然后用@mixes MyExtension注释该类。这在VSCode v1.48中不起作用。

相反，尽管将@memberof批注的使用列为“越野车”，但这似乎是可行的。您要混合的方法必须与对象文字分开编写：

//mockup for the purpose of testing
const SVG = {};

SVG.Element = class {
    bbox () {
        return {x:0,y:0,width:1,height:1}
    }
    parent () {
        return this;
    }
}

/** 
 * @memberof SVG.Element
 * @param {number} margin
 */
function bounding_box (margin) {
    var bbox = this.bbox()
    return this.parent().rect({
        x: bbox.x - margin/2,y: bbox.y - margin/2,width: bbox.width + margin,height: bbox.height + margin
    })
    .stroke("red")
    .attr("fill-opacity",0)
}

SVG.extend(SVG.Element,{bounding_box});

然后将this函数内的bounding_box正确识别为SVG.Element类型。写作时

const el = SVG.Element();
el.bounding_box()

.bounding_box未在提示中列为方法，但正确键入了margin参数。

在边栏中，大纲将.bounding_box显示为SVG.Element的成员，但将其显示为属性，而不是方法。