Improve typing (plotly#354)

- turn on strictPropertyInitialization
- turn on strictBindCallApply

Author: Marc-Andre-Rivet

packages/dash-table/src/core/Logger/index.ts

@@ -25,12 +25,14 @@ __highlightPrefix = __isChrome;
 __highlightPrefix = false;
 /*#endif*/
 
-function logFn(level: LogLevel | DebugLevel, currentLevel: LogLevel | DebugLevel): (...args: any[]) => void {
+type LoggerFn = (...args: any[]) => void;
+
+function logFn(level: LogLevel | DebugLevel, currentLevel: LogLevel | DebugLevel): LoggerFn {
     if (level < currentLevel) {
         return () => { };
     }
 
-    let fn: any;
+    let fn: LoggerFn;
     let fnStyle: string = '';
 
     switch (level) {
@@ -49,6 +51,8 @@ function logFn(level: LogLevel | DebugLevel, currentLevel: LogLevel | DebugLevel
             fn = window.console.error;
             fnStyle = 'color: white; background-color: #FF0000;';
             break;
+        default:
+            throw new Error(`Unknown log ${level}`);
     }
 
     let prefix = `${fnStyle && __highlightPrefix ? '%c' : ''}[${LogString[level].toUpperCase()}]`;
@@ -60,12 +64,12 @@ function logFn(level: LogLevel | DebugLevel, currentLevel: LogLevel | DebugLevel
 }
 
 interface ILogger {
-    trace: (...args: any[]) => void;
-    info: (...args: any[]) => void;
-    warning: (...args: any[]) => void;
-    error: (...args: any[]) => void;
-    fatal: (...args: any[]) => void;
-    debug: (...args: any[]) => void;
+    trace: LoggerFn;
+    info: LoggerFn;
+    warning: LoggerFn;
+    error: LoggerFn;
+    fatal: LoggerFn;
+    debug: LoggerFn;
 
     setDebugLevel(level: DebugLevel): void;
     setLogLevel(level: LogLevel): void;

packages/dash-table/src/core/Stylesheet.ts

@@ -38,7 +38,7 @@ class StylesheetFacade {
             { rule: rules[index], index };
     }
 
-    private __stylesheet: HTMLStyleElement;
+    private __stylesheet: HTMLStyleElement | undefined;
 
     private get sheet() {
         return (this.__stylesheet = this.__stylesheet || (() => {

packages/dash-table/src/core/cache/memoizer.ts

@@ -5,7 +5,7 @@ export default <TKey extends CacheKeyFragment[]>() => {
     return <TEntryFn extends (...a: any[]) => any>(fn: TEntryFn) => {
         const cache = new Map<CacheKeyFragment, any>();
 
-        function get(...key: TKey) {
+        function get(...key: TKey): TEntryFn {
             const lastKey = key.slice(-1)[0];
 
             const nestedCache = getCache(cache, ...key);

packages/dash-table/src/core/cache/value.ts

@@ -4,7 +4,7 @@ export default <TKey extends CacheKeyFragment[]>() =>
     <TEntry>(fn: (...a: TKey) => TEntry) => {
         const cache = new Map<CacheKeyFragment, any>();
 
-        function get(...key: TKey) {
+        function get(...key: TKey): TEntry {
             const lastKey = key.slice(-1)[0];
 
             const nestedCache = getCache(cache, ...key);

packages/dash-table/src/dash-table/components/ControlledTable/index.tsx

@@ -33,8 +33,8 @@ const DEFAULT_STYLE = {
 };
 
 export default class ControlledTable extends PureComponent<ControlledTableProps> {
-    private readonly stylesheet: Stylesheet;
-    private readonly tableFn: () => JSX.Element[][];
+    private readonly stylesheet: Stylesheet = new Stylesheet(`#${this.props.id}`);
+    private readonly tableFn = derivedTable(() => this.props);
     private readonly tableStyle = derivedTableStyle();
 
     private calculateTableStyle = memoizeOne((style: Partial<IStyle>) => R.mergeAll(
@@ -44,8 +44,6 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
     constructor(props: ControlledTableProps) {
         super(props);
 
-        this.stylesheet = new Stylesheet(`#${props.id}`);
-        this.tableFn = derivedTable(() => this.props);
         this.updateStylesheet();
     }
 

packages/dash-table/src/dash-table/components/Table/index.tsx

@@ -32,8 +32,6 @@ import Logger from 'core/Logger';
 const DERIVED_REGEX = /^derived_/;
 
 export default class Table extends Component<PropsWithDefaultsAndDerived, StandaloneState> {
-    private controlled: ControlledTableProps;
-
     constructor(props: PropsWithDefaultsAndDerived) {
         super(props);
 
@@ -54,10 +52,10 @@ export default class Table extends Component<PropsWithDefaultsAndDerived, Standa
     }
 
     render() {
-        this.controlled = this.getControlledProps();
-        this.updateDerivedProps();
+        let controlled = this.getControlledProps();
+        this.updateDerivedProps(controlled);
 
-        return (<ControlledTable {...this.controlled} />);
+        return (<ControlledTable {...controlled} />);
     }
 
     private getControlledProps(): ControlledTableProps {
@@ -143,7 +141,7 @@ export default class Table extends Component<PropsWithDefaultsAndDerived, Standa
         ]);
     }
 
-    private updateDerivedProps() {
+    private updateDerivedProps(controlled: ControlledTableProps) {
         const {
             filtering,
             filtering_settings,
@@ -155,7 +153,7 @@ export default class Table extends Component<PropsWithDefaultsAndDerived, Standa
             viewport_selected_rows,
             virtual,
             virtual_selected_rows
-        } = this.controlled;
+        } = controlled;
 
         const viewportCached = this.viewportCache(viewport).cached;
         const virtualCached = this.virtualCache(virtual).cached;

packages/dash-table/src/dash-table/derived/cell/eventHandler.ts

@@ -3,8 +3,6 @@ import valueCache from 'core/cache/value';
 import { ICellFactoryProps } from 'dash-table/components/Table/props';
 import { handleChange, handleClick, handleDoubleClick, handleOnMouseUp, handlePaste } from 'dash-table/handlers/cellEvents';
 
-type CacheArgs = [Handler, number, number];
-
 export enum Handler {
     Change = 'change',
     Click = 'click',
@@ -13,32 +11,32 @@ export enum Handler {
     Paste = 'paste'
 }
 
-export type CacheFn = (...args: CacheArgs) => Function;
-export type HandlerFn = (...args: any[]) => any;
-
 export default (propsFn: () => ICellFactoryProps) => new EventHandler(propsFn).get;
 
 class EventHandler {
     constructor(private readonly propsFn: () => ICellFactoryProps) {
 
     }
 
-    private readonly handlers = new Map<Handler, HandlerFn>([
-        [Handler.Change, handleChange.bind(undefined, this.propsFn)],
-        [Handler.Click, handleClick.bind(undefined, this.propsFn)],
-        [Handler.DoubleClick, handleDoubleClick.bind(undefined, this.propsFn)],
-        [Handler.MouseUp, handleOnMouseUp.bind(undefined, this.propsFn)],
-        [Handler.Paste, handlePaste.bind(undefined, this.propsFn)]
-    ]);
-
     private readonly cache = valueCache<[Handler, number, number]>()((
         handler: Handler,
         columnIndex: number,
         rowIndex: number
     ) => {
-        let handlerFn = this.handlers.get(handler);
-
-        return handlerFn && handlerFn.bind(undefined, rowIndex, columnIndex);
+        switch (handler) {
+            case Handler.Change:
+                return handleChange.bind(undefined, this.propsFn, rowIndex, columnIndex);
+            case Handler.Click:
+                return handleClick.bind(undefined, this.propsFn, rowIndex, columnIndex);
+            case Handler.DoubleClick:
+                return handleDoubleClick.bind(undefined, this.propsFn, rowIndex, columnIndex);
+            case Handler.MouseUp:
+                return handleOnMouseUp.bind(undefined, this.propsFn, rowIndex, columnIndex);
+            case Handler.Paste:
+                return handlePaste.bind(undefined, this.propsFn, rowIndex, columnIndex);
+            default:
+                throw new Error(`unexpected handler ${handler}`);
+        }
     });
 
     get = (

packages/dash-table/src/dash-table/derived/cell/eventHandlerProps.ts

@@ -1,4 +1,3 @@
-
 import {
     ChangeEvent,
     ClipboardEvent,
@@ -9,33 +8,25 @@ import { memoizeOneFactory } from 'core/memoizer';
 import { ICellFactoryProps } from 'dash-table/components/Table/props';
 import cellEventHandler, { Handler } from 'dash-table/derived/cell/eventHandler';
 
-type CacheArgs = [number, number];
-
-export type CacheFn = (...args: CacheArgs) => {
+interface IFunctionCache {
     onChange: (e: ChangeEvent) => void;
     onClick: (e: MouseEvent) => void;
     onDoubleClick: (e: MouseEvent) => void;
     onMouseUp: (e: MouseEvent) => void;
     onPaste: (e: ClipboardEvent<Element>) => void;
-};
-export type HandlerFn = (...args: any[]) => any;
+}
 
-const getter = (propsFn: () => ICellFactoryProps): CacheFn => {
+const getter = (propsFn: () => ICellFactoryProps) => {
     const derivedHandlers = cellEventHandler(propsFn);
 
-    return (...args: CacheArgs) => {
-        const [
-            rowIndex,
-            columnIndex
-        ] = args;
-
+    return (rowIndex: number, columnIndex: number): IFunctionCache => {
         return {
             onChange: derivedHandlers(Handler.Change, columnIndex, rowIndex),
             onClick: derivedHandlers(Handler.Click, columnIndex, rowIndex),
             onDoubleClick: derivedHandlers(Handler.DoubleClick, columnIndex, rowIndex),
             onMouseUp: derivedHandlers(Handler.MouseUp, columnIndex, rowIndex),
             onPaste: derivedHandlers(Handler.Paste, columnIndex, rowIndex)
-        } as any;
+        };
     };
 };
 

packages/dash-table/src/dash-table/derived/table/index.tsx

@@ -58,7 +58,7 @@ function getter(
     return cells;
 }
 
-export default (propsFn: () => ControlledTableProps): (() => JSX.Element[][]) => {
+export default (propsFn: () => ControlledTableProps) => {
     const cellFactory = new CellFactory(propsFn);
     const filterFactory = new FilterFactory(() => filterPropsFn(propsFn));
     const headerFactory = new HeaderFactory(propsFn);

packages/dash-table/src/dash-table/handlers/cellEvents.ts

@@ -133,6 +133,6 @@ export const handleOnMouseUp = (propsFn: () => ICellFactoryProps, idx: number, i
     }
 };
 
-export const handlePaste = (_propsFn: () => ICellFactoryProps, _idx: number, _i: number, e: ClipboardEvent) => {
+export const handlePaste = (_propsFn: () => ICellFactoryProps, _idx: number, _i: number, e: any) => {
     e.preventDefault();
 };

packages/dash-table/tsconfig.base.json

@@ -13,8 +13,9 @@
         "noUnusedParameters": true,
         "sourceMap": false,
         "strict": true,
+        "strictBindCallApply": true,
         "strictNullChecks": true,
-        "strictPropertyInitialization": false,
+        "strictPropertyInitialization": true,
         "target": "esnext",
         "traceResolution": false
     }