扩展 SVG.Element 的更好方法，让 vscode 知道已进行更改并提供文档答案

【问题标题】：Better way to extend SVG.Element that lets vscode know the change has been made and provides documentation扩展 SVG.Element 的更好方法，让 vscode 知道已进行更改并提供文档
【发布时间】：2020-12-14 14:48:02
【问题描述】：

我正在使用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 的对象提供此功能的智能建议。同样，我无法提供任何人使用此功能文档此功能。

我试图更改 node_modules/@svgdotjs/svg.js/dist/svg.node.js 文件以及 node_modules/@svgdotjs/svg.js/src/elements/Element.js Element 类的主体 以包含我的功能，但在尝试使用它时出现错误说函数不存在。

我更愿意为open source project on github 做出贡献，但在我弄清楚这些该死的文件以及实际可行的方法之前，我恐怕没有用处。

为了将新功能写入库的SVG.Element 类，我需要更改哪个文件？我是否需要克隆 repo 并进行重建？

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

【问题讨论】：

标签： javascript node.js svg svg.js

【解决方案1】：

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});

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

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

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

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

【讨论】：