将 javascript 转换为 TypeScript 的问题

Question

Syntax issue in typescript.. I wrote code in javascript and try to put it in ts file. Made some changes, but still showing issues with cells.

class X {
  public appendTableColumn() {
    var tbl = <HTMLTableElement>document.getElementById("myTable"); // table reference
    //var colnum= parseInt(tbl.rows[0].cells.length) - 1;
    // i;
    var m = parseInt(tbl.rows[0].cells.length) + 1;
    // open loop for each row and append cell
    for (var i = 0; i < tbl.rows.length; i++) {
      var k = parseInt(i) + 1;

      //createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), "R"+ tbl.rows.length +"C"+ k, 'col');
      this.createCell(
        tbl.rows[i].insertCell(tbl.rows[i].cells.length),
        "",
        "col",
      );
      var x = document.getElementById("myTable").rows[i].cells;
      var btnName = "R" + k + "C" + m;
      x[tbl.rows[i].cells.length - 1].id = "td" + btnName;
      x[tbl.rows[i].cells.length - 1].innerHTML =
        '<button class="button" onclick="reply_click(this.id);" id=' +
        btnName +
        ">Manage Items</button>";
      //alert(btnName);
    }
  }
}

Answer 1

document.getElementById is only guaranteed to return an HTMLElement , but you're implicitly expecting it to be a table, which TypeScript can't guarantee because it doesn't look at your HTML code (among other reasons).

When you have an element type assumption like this, what you need to do is use a type assertion.

var x = (<HTMLTableElement>document.getElementById("myTable")).rows[i].cells;

As an aside, you don't need to pass variables of type number to parseInt . The following lines:

var m = parseInt(tbl.rows[0].cells.length) + 1;
// ...
var k = parseInt(i) + 1;

Should instead be written as:

var m = tbl.rows[0].cells.length + 1;
// ...
var k = i + 1;