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

Question

我正在将一些 Javascript 代码转换为 Typescript。这是一个很酷的 Javascript 函数，它使用 d3 并完美地包装了一个 svg 文本 block 。通常我只会将“函数”一词更改为“私有(private)”，该函数将像在 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