javascript - 扩展 SVGTextElement 时 typescript 未捕获类型错误

Question

我正在尝试为 SVGTextElement 创建一个简单的扩展，这里是:

interface SVGTextElement {
    setX(value: string): SVGTextElement;
    setY(value: string): SVGTextElement;
}

SVGTextElement.prototype.setX = (value: string): SVGTextElement => {
    var el: SVGTextElement = this;
    el.setAttribute("x", value);
    return el;
}

SVGTextElement.prototype.setY = (value: string): SVGTextElement => {
    var el: SVGTextElement = this;
    el.setAttribute("y", value);
    return el;
}

我是这样使用这个扩展的:

const e = document.createElementNS("http://www.w3.org/2000/svg", "text");
e.setX("0");

但是我得到了错误:

SvgTextElementExtensions.ts:18 Uncaught TypeError: el.setAttribute is not a function

我做错了什么？

Answer 1

你不应该在这里使用粗箭头语法，它会将 this 绑定(bind)到 window，而 window 没有 setAttribute。这样做:

SVGTextElement.prototype.setX = function (value: string): SVGTextElement {
    var el: SVGTextElement = this;
    el.setAttribute("x", value);
    return el;
}

SVGTextElement.prototype.setY = function (value: string): SVGTextElement {
    var el: SVGTextElement = this;
    el.setAttribute("y", value);
    return el;
}