TypeScript .d.ts type definitions improvement

package.json

@@ -75,6 +75,7 @@
     "data-spreadsheet"
   ],
   "dependencies": {
+    "@types/pikaday": "1.6.0",
     "hot-formula-parser": "^3.0.0",
     "moment": "2.20.1",
     "numbro": "^2.0.6",
@@ -130,7 +131,7 @@
     "style-loader": "^0.18.2",
     "supports-color": "^4.2.1",
     "tree-kill": "^1.2.1",
-    "typescript": "^2.4.2",
+    "typescript": "^3.3.3",
     "uglifyjs-webpack-plugin": "^1.3.0",
     "webpack": "^3.5.6"
   },

test/types/cellTypes.types.ts

@@ -0,0 +1,70 @@
+import Handsontable from 'handsontable';
+
+const elem = document.createElement('div');
+const hot = new Handsontable(elem, {});
+
+const cellProperties: Handsontable.CellProperties = { 
+  row: 0,
+  col: 0,
+  instance: {} as Handsontable,
+  visualRow: 0,
+  visualCol: 0,
+  prop: 'foo'
+};
+
+const TD = document.createElement('td');
+
+// Verify the built-in cellTypes exist and have the correct shape
+new Handsontable.cellTypes.autocomplete.editor(hot, 0, 0, 'prop', TD, cellProperties);
+Handsontable.cellTypes.autocomplete.renderer(hot, TD, 0, 0, 'prop', 'foo', cellProperties);
+Handsontable.cellTypes.autocomplete.validator.apply(cellProperties, ['', (valid: boolean) => {}]);
+
+new Handsontable.cellTypes.checkbox.editor(hot, 0, 0, 'prop', TD, cellProperties);
+Handsontable.cellTypes.checkbox.renderer(hot, TD, 0, 0, 'prop', 'foo', cellProperties);
+
+new Handsontable.cellTypes.date.editor(hot, 0, 0, 'prop', TD, cellProperties);
+Handsontable.cellTypes.date.renderer(hot, TD, 0, 0, 'prop', 'foo', cellProperties);
+Handsontable.cellTypes.date.validator.apply(cellProperties, ['', (valid: boolean) => {}]);
+
+new Handsontable.cellTypes.dropdown.editor(hot, 0, 0, 'prop', TD, cellProperties);
+Handsontable.cellTypes.dropdown.renderer(hot, TD, 0, 0, 'prop', 'foo', cellProperties);
+Handsontable.cellTypes.dropdown.validator.apply(cellProperties, ['', (valid: boolean) => {}]);
+
+new Handsontable.cellTypes.handsontable.editor(hot, 0, 0, 'prop', TD, cellProperties);
+Handsontable.cellTypes.handsontable.renderer(hot, TD, 0, 0, 'prop', 'foo', cellProperties);
+
+new Handsontable.cellTypes.numeric.editor(hot, 0, 0, 'prop', TD, cellProperties);
+Handsontable.cellTypes.numeric.renderer(hot, TD, 0, 0, 'prop', 'foo', cellProperties);
+Handsontable.cellTypes.numeric.validator.apply(cellProperties, ['', (valid: boolean) => {}]);
+
+new Handsontable.cellTypes.password.editor(hot, 0, 0, 'prop', TD, cellProperties);
+Handsontable.cellTypes.password.renderer(hot, TD, 0, 0, 'prop', 'foo', cellProperties);
+
+new Handsontable.cellTypes.text.editor(hot, 0, 0, 'prop', TD, cellProperties);
+Handsontable.cellTypes.text.renderer(hot, TD, 0, 0, 'prop', 'foo', cellProperties);
+
+new Handsontable.cellTypes.time.editor(hot, 0, 0, 'prop', TD, cellProperties);
+Handsontable.cellTypes.time.renderer(hot, TD, 0, 0, 'prop', 'foo', cellProperties);
+Handsontable.cellTypes.time.validator.apply(cellProperties, ['', (valid: boolean) => {}]);
+
+// Verify top-level cellTypes API
+const autocomplete = Handsontable.cellTypes.getCellType('autocomplete') as Handsontable.cellTypes.Autocomplete;
+new autocomplete.editor(hot, 0, 0, 'prop', TD, cellProperties);
+autocomplete.renderer(hot, TD, 0, 0, 'prop', 'foo', cellProperties);
+autocomplete.validator.apply(cellProperties, ['', (valid: boolean) => {}]);
+
+class CustomEditor extends Handsontable.editors.BaseEditor {
+  open(){}
+  close(){}
+  getValue(){}
+  setValue(value: any){}
+  focus(){}
+}
+Handsontable.cellTypes.registerCellType('custom', {
+  editor: CustomEditor,
+  renderer: (hot: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: number | string, value: any, cellProperties: Handsontable.CellProperties) => TD,
+  validator: (value: any, callback: (valid: boolean) => void) => {},
+  className: 'my-cell',
+  allowInvalid: true,
+  myCustomCellState: 'complete',
+});

test/types/editors.types.ts

@@ -0,0 +1,69 @@
+import Handsontable from 'handsontable';
+
+const elem = document.createElement('div');
+const hot = new Handsontable(elem, {});
+
+const cellProperties: Handsontable.CellProperties = { 
+  row: 0,
+  col: 0,
+  instance: {} as Handsontable,
+  visualRow: 0,
+  visualCol: 0,
+  prop: 'foo'
+};
+
+const TD = document.createElement('td');
+
+// Verify the built-in editors exist and have the right class types -- spot check a couple class methods on each
+const autocomplete = new Handsontable.editors.AutocompleteEditor(hot, 0, 0, 'prop', TD, cellProperties);
+autocomplete.isOpened();
+autocomplete.flipDropdown(100);
+
+const checkbox = new Handsontable.editors.CheckboxEditor(hot, 0, 0, 'prop', TD, cellProperties);
+checkbox.getValue();
+checkbox.setValue('foo');
+
+const date = new Handsontable.editors.DateEditor(hot, 0, 0, 'prop', TD, cellProperties);
+date.getDatePickerConfig();
+date.showDatepicker();
+date.hideDatepicker();
+
+const dropdown = new Handsontable.editors.DropdownEditor(hot, 0, 0, 'prop', TD, cellProperties);
+dropdown.flipDropdownIfNeeded();
+dropdown.updateChoicesList([]);
+
+const hansontable = new Handsontable.editors.HandsontableEditor(hot, 0, 0, 'prop', TD, cellProperties);
+hansontable.beginEditing('');
+
+const mobile = new Handsontable.editors.MobileEditor(hot, 0, 0, 'prop', TD, cellProperties);
+mobile.hideCellPointer();
+mobile.scrollToView();
+
+const numeric = new Handsontable.editors.NumericEditor(hot, 0, 0, 'prop', TD, cellProperties);
+numeric.checkEditorSection();
+numeric.close();
+
+const password = new Handsontable.editors.PasswordEditor(hot, 0, 0, 'prop', TD, cellProperties);
+password.open();
+password.isWaiting();
+
+const select = new Handsontable.editors.SelectEditor(hot, 0, 0, 'prop', TD, cellProperties);
+select.prepareOptions([]);
+
+const text = new Handsontable.editors.TextEditor(hot, 0, 0, 'prop', TD, cellProperties);
+text.focus();
+text.finishEditing();
+
+const time = new Handsontable.editors.TimeEditor(hot, 0, 0, 'prop', TD, cellProperties);
+time.discardEditor();
+
+
+// Verify top-level editors API
+class CustomEditor extends Handsontable.editors.getEditor('text') {
+  open(){}
+  close(){}
+  getValue(){}
+  setValue(value: any){}
+  focus(){}
+}
+Handsontable.editors.registerEditor('custom', CustomEditor);

test/types/editors/password.types.ts

@@ -3,7 +3,7 @@ import Handsontable from 'handsontable';
 class PasswordEditor extends Handsontable.editors.TextEditor {
   createElements() {
     // Call the original createElements method
-    super.createElements.apply(this, arguments);
+    super.createElements();
 
     // Create password input and update relevant properties
     this.TEXTAREA = document.createElement('input');

test/types/editors/text.types.ts

@@ -5,7 +5,7 @@ class TextEditor extends Handsontable.editors.TextEditor {
     super.init();
   }
 
-  prepare(row: number, col: number, prop: string | number, td: HTMLElement, originalValue: any, cellProperties: Handsontable.GridSettings) {
+  prepare(row: number, col: number, prop: string | number, td: HTMLTableCellElement, originalValue: any, cellProperties: Handsontable.CellProperties) {
     super.prepare(row, col, prop, td, originalValue, cellProperties);
   }
 

test/types/helpers/helpers.types.ts

@@ -1,9 +1,6 @@
 import Handsontable from 'handsontable';
 
-const gridSettings: Handsontable.GridSettings = {
-  valid: true,
-  className: 'foo'
-};
+const gridSettings: Handsontable.GridSettings = { };
 
 Handsontable.helper.arrayAvg([1, 3, 4]);
 Handsontable.helper.arrayEach([1, 2, 3], (value, index, array) => {});

test/types/index.types.ts

@@ -1,8 +1,21 @@
-import Handsontable from '../../handsontable';
+import Handsontable from 'handsontable';
 
-const baseVersion = Handsontable.baseVersion;
-const buildDate = Handsontable.buildDate;
-const packageName = Handsontable.packageName;
-const version = Handsontable.version;
-const Core = Handsontable.Core;
-const DefaultSettings = Handsontable.DefaultSettings;
+const elem = document.createElement('div');
+
+// Verify the various top-level namespace APIs exist
+Handsontable.baseVersion.toUpperCase();
+Handsontable.buildDate.toUpperCase();
+Handsontable.packageName == 'handsontable';
+Handsontable.version.split('');
+Handsontable.cellTypes;
+Handsontable.languages;
+Handsontable.dom;
+Handsontable.editors;
+Handsontable.helper;
+Handsontable.hooks;
+Handsontable.plugins;
+Handsontable.renderers;
+Handsontable.validators;
+new Handsontable.Core(elem, {});
+const defaultSettings: Handsontable.GridSettings = new Handsontable.DefaultSettings();
+new Handsontable.EventManager({});

test/types/methods.types.ts

@@ -3,78 +3,83 @@ import Handsontable from 'handsontable';
 const elem = document.createElement('div');
 const hot = new Handsontable(elem, {});
 
-hot.addHook('foo', [() => {}]);
-hot.addHook('foo', () => {});
-hot.addHookOnce('foo', [() => {}]);
-hot.addHookOnce('foo', () => {});
+hot.addHook('afterChange', [(changes: any[] | null, source: string) => {}]);
+hot.addHook('afterChange', (changes: any[] | null, source: string) => {});
+hot.addHookOnce('afterChange', [(changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {}]);
+hot.addHookOnce('afterChange', (changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {});
 hot.alter('insert_row', 123, 123, 'foo', true);
+hot.alter('insert_row', [[0, 0], [1, 2]], 123, 'foo', true);
 hot.alter('insert_row');
 hot.clear();
-hot.colOffset();
-hot.colToProp(123);
-hot.countCols();
-hot.countEmptyCols(true);
-hot.countEmptyRows(true);
-hot.countRenderedCols();
-hot.countRenderedRows();
-hot.countRows();
-hot.countSourceRows();
-hot.countVisibleCols();
-hot.countVisibleRows();
+hot.colOffset() === 123;
+hot.colToProp(123) === 'foo';
+hot.countCols() === 123;
+hot.countEmptyCols(true) === 123;
+hot.countEmptyRows(true) === 123;
+hot.countRenderedCols() === 123;
+hot.countRenderedRows() === 123;
+hot.countRows() === 123;
+hot.countSourceRows() === 123;
+hot.countVisibleCols() === 123;
+hot.countVisibleRows() === 123;
 hot.deselectCell();
 hot.destroy();
-hot.destroyEditor(true);
+hot.destroyEditor(true, true);
 hot.emptySelectedCells();
 hot.getActiveEditor();
-hot.getCell(123, 123, true);
+hot.getCell(123, 123, true)!.focus();
 hot.getCellEditor(123, 123);
-hot.getCellMeta(123, 123);
-hot.getCellRenderer(123, 123);
+hot.getCellMeta(123, 123).type === "text";
+hot.getCellMetaAtRow(123).forEach(meta => meta.type === "text");
+hot.getCellRenderer(123, 123)(hot, {} as any as HTMLTableCellElement, 1, 2, 'prop', '', {} as any as Handsontable.CellProperties);
 hot.getCellValidator(123, 123);
-hot.getColHeader(123);
-hot.getColWidth(123);
-hot.getCoords(elem.querySelector('td'));
-hot.getCopyableData(123, 123);
-hot.getCopyableText(123, 123, 123, 123);
-hot.getData(123, 123, 123, 123);
-hot.getDataAtCell(123, 123);
-hot.getDataAtCol(123);
-hot.getDataAtProp(123);
-hot.getDataAtRow(123);
-hot.getDataAtRowProp(123, 'foo');
-hot.getDataType(123, 123, 123, 123);
-hot.getInstance();
-hot.getRowHeader(123);
-hot.getRowHeight(123);
-hot.getSchema();
-hot.getSelected();
-hot.getSelectedLast();
-hot.getSelectedRange();
-hot.getSelectedRangeLast();
-hot.getSettings();
-hot.getSourceData(123, 123, 123, 123);
-hot.getSourceDataAtCell(123, 123);
-hot.getSourceDataAtCol(123);
-hot.getSourceDataAtRow(123);
-hot.getTranslatedPhrase('foo', 123);
-hot.getValue();
-hot.hasColHeaders();
-hot.hasHook('foo');
-hot.hasRowHeaders();
-hot.isColumnModificationAllowed();
-hot.isEmptyCol(123);
-hot.isEmptyRow(123);
-hot.isListening();
+hot.getColHeader().forEach((header: number | string) => {});
+hot.getColHeader(123).toString();
+hot.getColWidth(123) === 123;
+hot.getCoords(elem.querySelector('td')).row === 0;
+hot.getCopyableData(123, 123).toUpperCase();
+hot.getCopyableText(123, 123, 123, 123).toUpperCase();
+hot.getData(123, 123, 123, 123).forEach(v => v === '');
+hot.getDataAtCell(123, 123) === '';
+hot.getDataAtCol(123).forEach(v => v === '');
+hot.getDataAtProp(123).forEach(v => v === '');
+hot.getDataAtRow(123).forEach(v => v === '');
+hot.getDataAtRowProp(123, 'foo') === '';
+hot.getDataType(123, 123, 123, 123) === 'text';
+hot.getInstance() === hot;
+hot.getRowHeader().forEach(header => header.toString());
+hot.getRowHeader(123) === '';
+hot.getRowHeight(123) === 123;
+hot.getSchema()['foo'];
+hot.getSelected()![0][0] === 123;
+hot.getSelectedLast()![0] === 123;
+hot.getSelectedRange()![0].from.row === 123;
+hot.getSelectedRangeLast()!.to.col === 123;
+hot.getSettings().type === 'text';
+hot.getSourceData(123, 123, 123, 123)[0];
+hot.getSourceDataAtCell(123, 123) === '';
+hot.getSourceDataAtCol(123)[0] === '';
+hot.getSourceDataAtRow(123) as any[];
+hot.getTranslatedPhrase('foo', 123)!.toLowerCase();
+hot.getValue() === '';
+hot.hasColHeaders() === true;
+hot.hasHook('afterChange') === true;
+hot.hasRowHeaders() === true;
+hot.isColumnModificationAllowed() === true;
+hot.isEmptyCol(123) === true;
+hot.isEmptyRow(123) === true;
+hot.isListening() === true;
 hot.listen();
-hot.loadData([]);
-hot.populateFromArray(123, 123, [], 123, 123, 'foo', 'foo', 'foo', []);
-hot.propToCol('foo');
-hot.propToCol(123);
+hot.loadData([[1,2,3], [1,2,3]]);
+hot.loadData([{a:'a',b:2,c:''}, {a:'a',b:2,c:''}]);
+hot.populateFromArray(123, 123, [], 123, 123, 'foo', 'shift_down', 'left', []);
+hot.propToCol('foo') === 123;
+hot.propToCol(123) === 123;
 hot.removeCellMeta(123, 123, 'foo');
-hot.removeHook('foo', function() {});
+hot.removeHook('afterChange', function() {});
 hot.render();
-hot.rowOffset();
-hot.runHooks('foo', 123, 'foo', true, {}, [], function() {});
+hot.rowOffset() === 123;
+hot.runHooks('afterChange', 123, 'foo', true, {}, [], function() {});
 hot.selectAll();
 hot.selectCell(123, 123, 123, 123, true, true);
 hot.selectCellByProp(123, 'foo', 123, 'foo', true);
@@ -93,11 +98,16 @@ hot.setDataAtRowProp(123, 'foo', 'foo', 'foo');
 hot.setDataAtRowProp([[123, 'foo', 'foo'], [123, 'foo', 'foo']], 'foo');
 hot.spliceCol(123, 123, 123, 'foo');
 hot.spliceRow(123, 123, 123, 'foo');
+hot.toPhysicalColumn(123) == 123;
+hot.toPhysicalRow(123) === 123;
+hot.toVisualColumn(123) === 123;
+hot.toVisualRow(123) === 123;
 hot.unlisten();
-hot.updateSettings({}, true);
-hot.validateCells(function() {});
-hot.validateColumns([1, 2, 3], function() {});
-hot.validateRows([1, 2, 3], function() {});
+hot.updateSettings({} as Handsontable.GridSettings, true);
+hot.validateCells((valid: boolean) => {});
+hot.validateColumns([1, 2, 3], (valid: boolean) => {});
+hot.validateRows([1, 2, 3], (valid: boolean) => {});
+hot.isDestroyed === false;
 
 const autoColumnSize: Handsontable.plugins.AutoColumnSize = hot.getPlugin('autoColumnSize');
 const autoRowSize: Handsontable.plugins.AutoRowSize = hot.getPlugin('autoRowSize');