Convert helpers.extra to TS (#10728)

Co-authored-by: Chart.js <>

Author: etimberg

src/helpers/helpers.extras.js renamed to src/helpers/helpers.extras.ts

@@ -1,7 +1,9 @@
+import {type ChartMeta, type PointElement} from '../../types';
+
 import {_limitValue} from './helpers.math';
 import {_lookupByKey} from './helpers.collection';
 
-export function fontString(pixelSize, fontStyle, fontFamily) {
+export function fontString(pixelSize: number, fontStyle: string, fontFamily: string) {
   return fontStyle + ' ' + pixelSize + 'px ' + fontFamily;
 }
 
@@ -20,18 +22,14 @@ export const requestAnimFrame = (function() {
 /**
  * Throttles calling `fn` once per animation frame
  * Latest arguments are used on the actual call
- * @param {function} fn
- * @param {*} thisArg
- * @param {function} [updateFn]
  */
-export function throttled(fn, thisArg, updateFn) {
-  const updateArgs = updateFn || ((args) => Array.prototype.slice.call(args));
+export function throttled<TArgs extends Array<any>>(
+  fn: (...args: TArgs) => void,
+  thisArg: any,
+) {
   let ticking = false;
-  let args = [];
-
-  return function(...rest) {
-    args = updateArgs(rest);
 
+  return function(...args: TArgs) {
     if (!ticking) {
       ticking = true;
       requestAnimFrame.call(window, () => {
@@ -44,61 +42,46 @@ export function throttled(fn, thisArg, updateFn) {
 
 /**
  * Debounces calling `fn` for `delay` ms
- * @param {function} fn - Function to call.
- * @param {number} delay - Delay in ms. 0 = immediate invocation.
- * @returns {function}
  */
-export function debounce(fn, delay) {
+export function debounce<TArgs extends Array<any>>(fn: (...args: TArgs) => void, delay: number) {
   let timeout;
-  return function(...args) {
+  return function(...args: TArgs) {
     if (delay) {
       clearTimeout(timeout);
       timeout = setTimeout(fn, delay, args);
     } else {
-      fn.apply(this, args);
+      fn.apply<any, TArgs, void>(this, args);
     }
     return delay;
   };
 }
 
 /**
  * Converts 'start' to 'left', 'end' to 'right' and others to 'center'
- * @param {string} align start, end, center
  * @private
  */
-export const _toLeftRightCenter = (align) => align === 'start' ? 'left' : align === 'end' ? 'right' : 'center';
+export const _toLeftRightCenter = (align: 'start' | 'end' | 'center') => align === 'start' ? 'left' : align === 'end' ? 'right' : 'center';
 
 /**
  * Returns `start`, `end` or `(start + end) / 2` depending on `align`. Defaults to `center`
- * @param {string} align start, end, center
- * @param {number} start value for start
- * @param {number} end value for end
  * @private
  */
-export const _alignStartEnd = (align, start, end) => align === 'start' ? start : align === 'end' ? end : (start + end) / 2;
+export const _alignStartEnd = (align: 'start' | 'end' | 'center', start: number, end: number) => align === 'start' ? start : align === 'end' ? end : (start + end) / 2;
 
 /**
  * Returns `left`, `right` or `(left + right) / 2` depending on `align`. Defaults to `left`
- * @param {string} align start, end, center
- * @param {number} left value for start
- * @param {number} right value for end
- * @param {boolean} rtl Is this an RTL draw
  * @private
  */
-export const _textX = (align, left, right, rtl) => {
+export const _textX = (align: 'left' | 'right' | 'center', left: number, right: number, rtl: boolean) => {
   const check = rtl ? 'left' : 'right';
   return align === check ? right : align === 'center' ? (left + right) / 2 : left;
 };
 
 /**
  * Return start and count of visible points.
- * @param {object} meta - dataset meta.
- * @param {array} points - array of point elements.
- * @param {boolean} animationsDisabled - if true animation is disabled.
- * @returns {{start: number; count: number}}
  * @private
  */
-export function _getStartAndCountOfVisiblePoints(meta, points, animationsDisabled) {
+export function _getStartAndCountOfVisiblePoints(meta: ChartMeta<'line' | 'scatter'>, points: PointElement[], animationsDisabled: boolean) {
   const pointCount = points.length;
 
   let start = 0;
@@ -111,13 +94,17 @@ export function _getStartAndCountOfVisiblePoints(meta, points, animationsDisable
 
     if (minDefined) {
       start = _limitValue(Math.min(
+        // @ts-expect-error Need to type _parsed
         _lookupByKey(_parsed, iScale.axis, min).lo,
+        // @ts-expect-error Need to fix types on _lookupByKey
         animationsDisabled ? pointCount : _lookupByKey(points, axis, iScale.getPixelForValue(min)).lo),
       0, pointCount - 1);
     }
     if (maxDefined) {
       count = _limitValue(Math.max(
+        // @ts-expect-error Need to type _parsed
         _lookupByKey(_parsed, iScale.axis, max, true).hi + 1,
+        // @ts-expect-error Need to fix types on _lookupByKey
         animationsDisabled ? 0 : _lookupByKey(points, axis, iScale.getPixelForValue(max), true).hi + 1),
       start, pointCount) - start;
     } else {

src/helpers/types.ts

@@ -8,6 +8,7 @@ export * from './helpers.color';
 export * from './helpers.collection';
 export * from './helpers.core';
 export * from './helpers.easing';
+export * from './helpers.extras';
 export * from './helpers.interpolation';
 export * from './helpers.intl';
 export * from './helpers.math';

src/platform/platform.dom.js

@@ -242,10 +242,7 @@ function createProxyAndListen(chart, type, listener) {
     if (chart.ctx !== null) {
       listener(fromNativeEvent(event, chart));
     }
-  }, chart, (args) => {
-    const event = args[0];
-    return [event, event.offsetX, event.offsetY];
-  });
+  }, chart);
 
   addListener(canvas, type, proxy);
 

types/helpers/helpers.extras.d.ts

@@ -1,7 +1,6 @@
 export * from './helpers.canvas';
 export * from './helpers.curve';
 export * from './helpers.dom';
-export * from './helpers.extras';
 export * from './helpers.options';
 export * from './helpers.canvas';
 export * from './helpers.segment';