fixing strictBindCallApply related error in typescript

Question

When I add strictBindCallApply:true in my tsconfig.json and run ng build I get the following:

ERROR in src/app/hot/hot.component.ts(538,61): error TS2345: Argument of type 'IArguments' is not assignable to parameter of type '[Core, HTMLTableCellElement, number, number, string | number, any, CellProperties]'.
Type 'IArguments' is missing the following properties from type '[Core, HTMLTableCellElement, number, number, string | number, any, CellProperties]': 0, 1, 2, 3, and 32 more.

The pertinent code section is as follows:

const cellValidationTempVar = this.cellValidation;
this.cellValidation[i].renderer = function (instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments); // HERE!
  if (instance.getDataAtCell(row, col).length > cellValidationTempVar[col].length ) {
    td.classList.add('htInvalid');
  } else {
    td.classList.remove('htInvalid');
  }
}

The Handsontable.renderers.TextRenderer.apply(this, arguments); statement is identical to that used in the documentation.

I'm using:

• Angular 7.2
• Handsontable 7.0.0
• Typescript 3.2.4

The build works fine without strictBindCallApply.

Answer 1

The strictBindCallApply:true enables strict type checks for apply calls that is why it causes the error. The type of the arguments is not what typescript expects to get in the apply call. The sample in the documentation is a javascript sample where there is no type checking that is why it works ok.

You can prevent the error by specifying the arguments explicitly instead of using the arguments object. Here is the updated code:

const cellValidationTempVar = this.cellValidation;
this.cellValidation[i].renderer = function (instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, [instance, td, row, col, prop, value, cellProperties]); // HERE!
  if (instance.getDataAtCell(row, col).length > cellValidationTempVar[col].length ) {
    td.classList.add('htInvalid');
  } else {
    td.classList.remove('htInvalid');
  }
}

This is not so elegant but it prevents the type error.

Another option is to specify to ignore the type by casting to any so it is then like the javascript code.

Handsontable.default.renderers.TextRenderer.apply(this, arguments as any);

If you want the type checking I think the first approach is the better way to go.