visual studio - Converting Javascript function to Typescript including getComputedTextLength() - Stack Overflow

I'm converting some Javascript code into Typescript. This is a cool Javascript function which uses d3 and wraps an svg text block perfectly. Normally I would just change the word "function" to "private" and the function will work as is in Typescript, but this one plains only about the getComputedTextLength() function. Would be great if someone can explain how I can make this function work in Typescript for myself and others, including why I'm getting the error. Visual Studio provides no help. Thanks.

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

I'm converting some Javascript code into Typescript. This is a cool Javascript function which uses d3 and wraps an svg text block perfectly. Normally I would just change the word "function" to "private" and the function will work as is in Typescript, but this one plains only about the getComputedTextLength() function. Would be great if someone can explain how I can make this function work in Typescript for myself and others, including why I'm getting the error. Visual Studio provides no help. Thanks.

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

• javascript
• visual-studio
• d3.js
• svg
• typescript

Share Improve this question Follow edited Sep 27, 2015 at 5:49 Radim Köhler 124k4848 gold badges242242 silver badges340340 bronze badges asked Sep 27, 2015 at 5:12 blisswebblissweb 3,87344 gold badges2525 silver badges3737 bronze badges 3

• And what's the error description? – Buzinas Commented Sep 27, 2015 at 5:18
• Property 'getComputedTextLength' does not exist on type 'Element' – blissweb Commented Sep 27, 2015 at 5:23
• The code is from Mike Bostock bl.ocks/mbostock/7555321 – 0x4a6f4672 Commented Jun 12, 2017 at 13:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 16

One way could be to use assertion (i.e. we say to Typescript piler - I know what is returned type here). So this could be solution

Instead of this:

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

We could use this (e.g. here expecting that node should be 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) {

The 'SVGTSpanElement' is ing from a mon lib.d.ts