Add typings for custom renderers in the ts examples

docs/content/guides/cell-features/conditional-formatting/javascript/example1.ts

@@ -12,15 +12,15 @@ const data: (string | number)[][] = [
   ['2019', '', 15, -12, 'readOnly']
 ];
 
-const firstRowRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {
-  Handsontable.renderers.TextRenderer.apply(this, [instance, td, row, col, prop, value, cellProperties]);
+const firstRowRenderer: BaseRenderer = (instance, td, ...rest) => {
+  Handsontable.renderers.TextRenderer(instance, td, ...rest);
   td.style.fontWeight = 'bold';
   td.style.color = 'green';
   td.style.background = '#CEC';
 }
 
 const negativeValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {
-  Handsontable.renderers.TextRenderer.apply(this, [instance, td, row, col, prop, value, cellProperties]);
+  Handsontable.renderers.TextRenderer(instance, td, row, col, prop, value, cellProperties);
 
   // if the row contains a negative number
   if (parseInt(value, 10) < 0) {

docs/content/guides/cell-features/formatting-cells/javascript/example2.ts

@@ -1,13 +1,17 @@
 import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
+import Core from 'handsontable/core';
+import {BaseRenderer} from 'handsontable/renderers';
 
-Handsontable.renderers.registerRenderer('customStylesRenderer', (hotInstance, TD, ...rest) => {
+const customStylesRenderer: BaseRenderer = (hotInstance, TD, ...rest) => {
   Handsontable.renderers.TextRenderer(hotInstance, TD, ...rest);
 
   TD.style.fontWeight = 'bold';
   TD.style.color = 'green';
   TD.style.background = '#d7f1e1';
-});
+};
+
+Handsontable.renderers.registerRenderer('customStylesRenderer', customStylesRenderer);
 
 const container = document.querySelector('#example2');
 const hot: Core = new Handsontable(container, {

docs/content/guides/cell-functions/cell-renderer/javascript/example4.ts

@@ -1,5 +1,6 @@
 import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
+import { BaseRenderer } from 'handsontable/renderers';
 
 interface Book {
   title: string;
@@ -29,30 +30,13 @@ const data: Book[] = [
   }
 ];
 
-const container = document.querySelector('#example4');
-const hot: Core = new Handsontable(container, {
-  data,
-  colWidths: [200, 200, 200, 80],
-  colHeaders: ['Title', 'Description', 'Comments', 'Cover'],
-  height: 'auto',
-  columns: [
-    { data: 'title', renderer: 'html' },
-    { data: 'description', renderer: 'html' },
-    { data: 'comments', renderer: safeHtmlRenderer },
-    { data: 'cover', renderer: coverRenderer }
-  ],
-  autoWrapRow: true,
-  autoWrapCol: true,
-  licenseKey: 'non-commercial-and-evaluation'
-});
-
-function safeHtmlRenderer(instance, td, row, col, prop, value, cellProperties) {
+const safeHtmlRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {
   // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.
   // Sanitize the "value" before passing it to the innerHTML property.
   td.innerHTML = value;
-}
+};
 
-function coverRenderer(instance, td, row, col, prop, value, cellProperties) {
+const coverRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {
   const img = document.createElement('img');
 
   img.src = value;
@@ -65,4 +49,22 @@ function coverRenderer(instance, td, row, col, prop, value, cellProperties) {
   td.appendChild(img);
 
   return td;
-}
+};
+
+
+const container = document.querySelector('#example4');
+const hot: Core = new Handsontable(container, {
+  data,
+  colWidths: [200, 200, 200, 80],
+  colHeaders: ['Title', 'Description', 'Comments', 'Cover'],
+  height: 'auto',
+  columns: [
+    { data: 'title', renderer: 'html' },
+    { data: 'description', renderer: 'html' },
+    { data: 'comments', renderer: safeHtmlRenderer },
+    { data: 'cover', renderer: coverRenderer }
+  ],
+  autoWrapRow: true,
+  autoWrapCol: true,
+  licenseKey: 'non-commercial-and-evaluation'
+});

docs/content/guides/cell-functions/cell-renderer/javascript/example5.ts

@@ -1,19 +1,21 @@
 import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
+import Core from 'handsontable/core';
+import { BaseRenderer } from 'handsontable/renderers';
 
 let isChecked = false;
 const exampleContainer = document.querySelector('#exampleContainer5');
 const container = document.querySelector('#example5');
 
-function customRenderer(instance, td) {
-  Handsontable.renderers.TextRenderer.apply(this, arguments);
+const customRenderer: BaseRenderer = (instance, td, ...rest) => {
+  Handsontable.renderers.TextRenderer(instance, td, ...rest);
 
   if (isChecked) {
     td.style.backgroundColor = 'yellow';
   } else {
     td.style.backgroundColor = 'white';
   }
-}
+};
 
 const hot: Core = new Handsontable(container, {
   height: 'auto',

docs/content/guides/cell-types/cell-type/javascript/example1.ts

@@ -1,16 +1,18 @@
 import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
+import { BaseRenderer } from 'handsontable/renderers';
+import Core from 'handsontable/core'
 
 const container = document.querySelector('#example1');
 const colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];
 
-const yellowRenderer = function(instance, td, row, col, prop, value, cellProperties) {
-  Handsontable.renderers.TextRenderer.apply(this, arguments);
+const yellowRenderer: BaseRenderer = (instance, td, ...rest) =>{
+  Handsontable.renderers.TextRenderer(instance, td, ...rest);
   td.style.backgroundColor = 'yellow';
 };
 
-const greenRenderer = function(instance, td, row, col, prop, value, cellProperties) {
-  Handsontable.renderers.TextRenderer.apply(this, arguments);
+const greenRenderer: BaseRenderer = (instance, td, ...rest) => {
+  Handsontable.renderers.TextRenderer(instance, td, ...rest);
 
   td.style.backgroundColor = 'green';
 };
@@ -36,10 +38,12 @@ const hot: Core = new Handsontable(container, {
   cell: [
     { row: 1, col: 0, renderer: greenRenderer }
   ],
-  cells(row, col, prop) {
+  cells(row, col) {
     if (row === 0 && col === 0) {
       this.renderer = greenRenderer;
     }
+
+    return { renderer: this.renderer };
   },
   autoWrapRow: true,
   autoWrapCol: true,

docs/content/guides/rows/row-prepopulating/javascript/example1.ts

@@ -1,5 +1,8 @@
 import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
+import {CellProperties} from 'handsontable/settings';
+import Core from 'handsontable/core';
+import {BaseRenderer} from 'handsontable/renderers';
 
 const container = document.querySelector('#example1');
 const templateValues = ['one', 'two', 'three'];
@@ -22,18 +25,16 @@ function isEmptyRow(instance, row) {
   return true;
 }
 
-function defaultValueRenderer(instance, td, row, col, prop, value, cellProperties) {
-  const args = arguments;
-
-  if (args[5] === null && isEmptyRow(instance, row)) {
-    args[5] = templateValues[col];
+const defaultValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {
+  if (value === null && isEmptyRow(instance, row)) {
+    value = templateValues[col];
     td.style.color = '#999';
 
   } else {
     td.style.color = '';
   }
 
-  Handsontable.renderers.TextRenderer.apply(this, args);
+  Handsontable.renderers.TextRenderer(instance, td, row, col, prop, value, cellProperties);
 }
 
 const hot: Core = new Handsontable(container, {
@@ -44,7 +45,7 @@ const hot: Core = new Handsontable(container, {
   height: 'auto',
   licenseKey: 'non-commercial-and-evaluation',
   cells(row, col, prop) {
-    const cellProperties = {};
+    const cellProperties: Partial<CellProperties> = {};
 
     cellProperties.renderer = defaultValueRenderer;