将 Javascript 函数转换为 Typescript，包括 getComputedTextLength()

Question

我正在将一些 Javascript 代码转换为 Typescript。 这是一个很酷的 Javascript 函数，它使用 d3 并完美地包装了一个 svg 文本块。通常我只需将“函数”一词更改为“私有”，该函数将像在 Typescript 中一样工作，但这个仅抱怨 getComputedTextLength() 函数。如果有人可以解释我如何让这个功能在 Typescript 中为我自己和其他人工作，包括为什么我会收到错误，那就太好了。 Visual Studio 没有提供任何帮助。谢谢。

function wrap(text, width) {
    text.each(function() {
        var text = d3.select(this),
            words = text.text().split(/\s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1.1, // ems
            y = text.attr("y"),
            x = text.attr("x"),
            dy = parseFloat(text.attr("dy")),
            tspan = text.text(null).append("tspan")
                .attr("x", x).attr("y", y).attr("dy", dy + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan")
                    .attr("x", x).attr("y", y)
                    .attr("dy", ++lineNumber * lineHeight + dy + "em")
                    .text(word);
            }
        }
    });
}

Answer 1

一种方法是使用断言（即我们对 Typescript 编译器说 - 我知道这里返回的类型）。所以这可能是解决方案

而不是这个：

while (word = words.pop()) {
    line.push(word);
    tspan.text(line.join(" "));
    if (tspan.node().getComputedTextLength() > width) {

我们可以使用这个（例如这里期望该节点应该是SVGTSpanElement）

while (word = words.pop()) {
    line.push(word);
    tspan.text(line.join(" "));
    var node: SVGTSpanElement = <SVGTSpanElement>tspan.node(); 
    var hasGreaterWidth = node.getComputedTextLength() > width; 
    if (hasGreaterWidth) {

'SVGTSpanElement' 来自一个普通的lib.d.ts