diff --git a/config/tsconfig.base.json b/config/tsconfig.base.json
index 859e6caaedc..ab876e606cc 100644
--- a/config/tsconfig.base.json
+++ b/config/tsconfig.base.json
@@ -18,6 +18,7 @@
         "pretty": true,
         "removeComments": false,
         "sourceMap": true,
+        "strict": true,
         "stripInternal": true,
         "target": "es5",
         "typeRoots": ["../node_modules/@types"]
diff --git a/packages/core/src/common/utils/domUtils.ts b/packages/core/src/common/utils/domUtils.ts
index 87cf7efae2e..3b511ad0c13 100644
--- a/packages/core/src/common/utils/domUtils.ts
+++ b/packages/core/src/common/utils/domUtils.ts
@@ -43,19 +43,19 @@ export interface IThrottledReactEventOptions {
  * the throttled function.
  * @see https://www.html5rocks.com/en/tutorials/speed/animations/
  */
-export function throttleReactEventCallback(
-    callback: (event: React.SyntheticEvent<any>, ...otherArgs: any[]) => any,
+export function throttleReactEventCallback<E extends React.SyntheticEvent = React.SyntheticEvent>(
+    callback: (event: E, ...otherArgs: any[]) => any,
     options: IThrottledReactEventOptions = {},
 ) {
     const throttledFunc = throttleImpl(
         callback,
-        (event2: React.SyntheticEvent<any>) => {
+        (event2: E) => {
             if (options.preventDefault) {
                 event2.preventDefault();
             }
         },
         // prevent React from reclaiming the event object before we reference it
-        (event2: React.SyntheticEvent<any>) => event2.persist(),
+        (event2: E) => event2.persist(),
     );
     return throttledFunc;
 }
diff --git a/packages/core/src/common/utils/reactUtils.ts b/packages/core/src/common/utils/reactUtils.ts
index 59fa00c50ac..1dcc0f5d966 100644
--- a/packages/core/src/common/utils/reactUtils.ts
+++ b/packages/core/src/common/utils/reactUtils.ts
@@ -114,5 +114,6 @@ export function createReactRef<T>() {
 /**
  * Replacement type for { polyfill } from "react-lifecycles-compat" useful in some places where
  * the correct type is not inferred automatically. This should be removed once Blueprint depends on React >= 16.
+ * HACKHACK part of https://github.com/palantir/blueprint/issues/4342
  */
 export type LifecycleCompatPolyfill<P, T extends React.ComponentClass<P>> = (Comp: T) => T & { [K in keyof T]: T[K] };
diff --git a/packages/core/src/components/overlay/overlay.tsx b/packages/core/src/components/overlay/overlay.tsx
index c96793c810b..d266a7cb957 100644
--- a/packages/core/src/components/overlay/overlay.tsx
+++ b/packages/core/src/components/overlay/overlay.tsx
@@ -173,6 +173,7 @@ export interface IOverlayState {
     hasEverOpened?: boolean;
 }
 
+// HACKHACK: https://github.com/palantir/blueprint/issues/4342
 @(polyfill as LifecycleCompatPolyfill<IOverlayProps, any>)
 export class Overlay extends AbstractPureComponent2<IOverlayProps, IOverlayState> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Overlay`;
diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
index ca8b6d1c434..5c3c667b495 100644
--- a/packages/core/src/components/tabs/tabs.tsx
+++ b/packages/core/src/components/tabs/tabs.tsx
@@ -91,6 +91,7 @@ export interface ITabsState {
     selectedTabId?: TabId;
 }
 
+// HACKHACK: https://github.com/palantir/blueprint/issues/4342
 @(polyfill as Utils.LifecycleCompatPolyfill<ITabsProps, any>)
 export class Tabs extends AbstractPureComponent2<ITabsProps, ITabsState> {
     /** Insert a `Tabs.Expander` between any two children to right-align all subsequent children. */
diff --git a/packages/core/src/tsconfig.json b/packages/core/src/tsconfig.json
index 2a33efefb5f..b4fa3674bf5 100644
--- a/packages/core/src/tsconfig.json
+++ b/packages/core/src/tsconfig.json
@@ -1,7 +1,6 @@
 {
     "extends": "../../../config/tsconfig.base",
     "compilerOptions": {
-        "outDir": "../lib/esm",
-        "strict": true
+        "outDir": "../lib/esm"
     }
 }
diff --git a/packages/datetime/src/dateRangeInput.tsx b/packages/datetime/src/dateRangeInput.tsx
index 4755453b52b..1cc7002eee8 100644
--- a/packages/datetime/src/dateRangeInput.tsx
+++ b/packages/datetime/src/dateRangeInput.tsx
@@ -534,33 +534,39 @@ export class DateRangeInput extends AbstractPureComponent2<IDateRangeInputProps,
     };
 
     private handleInputEvent = (e: InputEvent, boundary: Boundary) => {
+        const inputProps = this.getInputProps(boundary);
+
         switch (e.type) {
             case "blur":
                 this.handleInputBlur(e, boundary);
+                inputProps.onBlur?.(e as React.FocusEvent<HTMLInputElement>);
                 break;
             case "change":
                 this.handleInputChange(e, boundary);
+                inputProps.onChange?.(e as React.ChangeEvent<HTMLInputElement>);
                 break;
             case "click":
-                this.handleInputClick(e as React.MouseEvent<HTMLInputElement>);
+                e = e as React.MouseEvent<HTMLInputElement>;
+                this.handleInputClick(e);
+                inputProps.onClick?.(e);
                 break;
             case "focus":
                 this.handleInputFocus(e, boundary);
+                inputProps.onFocus?.(e as React.FocusEvent<HTMLInputElement>);
                 break;
             case "keydown":
-                this.handleInputKeyDown(e as React.KeyboardEvent<HTMLInputElement>);
+                e = e as React.KeyboardEvent<HTMLInputElement>;
+                this.handleInputKeyDown(e);
+                inputProps.onKeyDown?.(e);
                 break;
             case "mousedown":
+                e = e as React.MouseEvent<HTMLInputElement>;
                 this.handleInputMouseDown();
+                inputProps.onMouseDown?.(e);
                 break;
             default:
                 break;
         }
-
-        const inputProps = this.getInputProps(boundary);
-        const callbackFn = this.getInputGroupCallbackForEvent(e, inputProps);
-
-        callbackFn?.(e);
     };
 
     // add a keydown listener to persistently change focus when tabbing:
@@ -812,29 +818,6 @@ export class DateRangeInput extends AbstractPureComponent2<IDateRangeInputProps,
         }) as DateRange;
     };
 
-    private getInputGroupCallbackForEvent: (
-        e: React.SyntheticEvent<HTMLInputElement>,
-        inputProps: HTMLInputProps & IInputGroupProps,
-    ) => ((event: InputEvent) => void) | undefined = (e, inputProps) => {
-        // use explicit switch cases to ensure callback function names remain grep-able in the codebase.
-        switch (e.type) {
-            case "blur":
-                return inputProps.onBlur;
-            case "change":
-                return inputProps.onChange;
-            case "click":
-                return inputProps.onClick;
-            case "focus":
-                return inputProps.onFocus;
-            case "keydown":
-                return inputProps.onKeyDown;
-            case "mousedown":
-                return inputProps.onMouseDown;
-            default:
-                return undefined;
-        }
-    };
-
     private getInputDisplayString = (boundary: Boundary) => {
         const { values } = this.getStateKeysAndValuesForBoundary(boundary);
         const { isInputFocused, inputString, selectedValue, hoverString } = values;
diff --git a/packages/datetime/src/tsconfig.json b/packages/datetime/src/tsconfig.json
index b4fa3674bf5..69c7c4a2184 100644
--- a/packages/datetime/src/tsconfig.json
+++ b/packages/datetime/src/tsconfig.json
@@ -1,6 +1,7 @@
 {
     "extends": "../../../config/tsconfig.base",
     "compilerOptions": {
-        "outDir": "../lib/esm"
+        "outDir": "../lib/esm",
+        "strictNullChecks": false
     }
 }
diff --git a/packages/datetime/test/dateRangeInputTests.tsx b/packages/datetime/test/dateRangeInputTests.tsx
index 6e386493c2e..23b052a376a 100644
--- a/packages/datetime/test/dateRangeInputTests.tsx
+++ b/packages/datetime/test/dateRangeInputTests.tsx
@@ -2631,11 +2631,11 @@ describe("<DateRangeInput>", () => {
     });
 
     function getStartInput(root: WrappedComponentRoot): WrappedComponentInput {
-        return root.find(InputGroup).first().find("input");
+        return root.find(InputGroup).first().find("input") as WrappedComponentInput;
     }
 
     function getEndInput(root: WrappedComponentRoot): WrappedComponentInput {
-        return root.find(InputGroup).last().find("input");
+        return root.find(InputGroup).last().find("input") as WrappedComponentInput;
     }
 
     function getInputText(input: WrappedComponentInput) {
diff --git a/packages/docs-app/src/components/blueprintDocs.tsx b/packages/docs-app/src/components/blueprintDocs.tsx
index 77898fa766a..f2842c8ccd9 100644
--- a/packages/docs-app/src/components/blueprintDocs.tsx
+++ b/packages/docs-app/src/components/blueprintDocs.tsx
@@ -164,7 +164,7 @@ export class BlueprintDocs extends React.Component<IBlueprintDocsProps, { themeN
     // run non-React code on the newly rendered sections.
     private handleComponentUpdate = () => {
         // indeterminate checkbox styles must be applied via JavaScript.
-        Array.from(document.querySelectorAll(`.${Classes.CHECKBOX} input[indeterminate]`)).forEach(
+        Array.from(document.querySelectorAll<HTMLInputElement>(`.${Classes.CHECKBOX} input[indeterminate]`)).forEach(
             (el: HTMLInputElement) => (el.indeterminate = true),
         );
     };
diff --git a/packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx b/packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx
index 2d9f10a9d3c..8ecc5474f62 100644
--- a/packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx
@@ -59,7 +59,9 @@ export class BreadcrumbsExample extends React.PureComponent<IExampleProps, IBrea
         width: 50,
     };
 
-    private handleChangeCollapse = handleStringChange((collapseFrom: Boundary) => this.setState({ collapseFrom }));
+    private handleChangeCollapse = handleStringChange(collapseFrom =>
+        this.setState({ collapseFrom: collapseFrom as Boundary }),
+    );
 
     public render() {
         const options = (
diff --git a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
index c5d9ac81207..63930751500 100644
--- a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
@@ -53,7 +53,7 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
     private handleLoadingChange = handleBooleanChange(loading => this.setState({ loading }));
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
     private handleOutlinedChange = handleBooleanChange(outlined => this.setState({ outlined }));
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = handleStringChange(intent => this.setState({ intent: intent as Intent }));
 
     private wiggleTimeoutId: number;
 
diff --git a/packages/docs-app/src/examples/core-examples/calloutExample.tsx b/packages/docs-app/src/examples/core-examples/calloutExample.tsx
index 5b3ce0e17bf..28ca5716fd0 100644
--- a/packages/docs-app/src/examples/core-examples/calloutExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/calloutExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Callout, Code, H5, Intent, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IDocsExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IDocsExampleProps } from "@blueprintjs/docs-theme";
 import { IconName } from "@blueprintjs/icons";
 import { IconSelect } from "./common/iconSelect";
 import { IntentSelect } from "./common/intentSelect";
@@ -32,7 +32,7 @@ export class CalloutExample extends React.PureComponent<IDocsExampleProps, ICall
     public state: ICalloutExampleState = { showHeader: true };
 
     private handleHeaderChange = handleBooleanChange((showHeader: boolean) => this.setState({ showHeader }));
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
 
     public render() {
         const { showHeader, ...calloutProps } = this.state;
diff --git a/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx b/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx
index 5ebb4ed8f2e..08a041b9be4 100644
--- a/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx
@@ -28,7 +28,7 @@ import {
     RadioGroup,
     Slider,
 } from "@blueprintjs/core";
-import { Example, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 
 export interface ICollapsibleListExampleState {
     collapseFrom?: Boundary;
@@ -46,7 +46,7 @@ export class CollapsibleListExample extends React.PureComponent<IExampleProps, I
         visibleItemCount: 3,
     };
 
-    private handleChangeCollapse = handleStringChange((collapseFrom: Boundary) => this.setState({ collapseFrom }));
+    private handleChangeCollapse = handleValueChange((collapseFrom: Boundary) => this.setState({ collapseFrom }));
 
     public render() {
         const options = (
diff --git a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
index 2d2300a3c32..75663e3329c 100644
--- a/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/iconSelect.tsx
@@ -26,7 +26,7 @@ export interface IIconSelectProps {
 
 const NONE = "(none)";
 type IconType = IconName | typeof NONE;
-const ICON_NAMES = Object.keys(IconNames).map<IconType>((name: keyof typeof IconNames) => IconNames[name]);
+const ICON_NAMES = Object.keys(IconNames).map<IconType>((name: string) => IconNames[name as keyof typeof IconNames]);
 ICON_NAMES.push(NONE);
 
 const TypedSelect = Select.ofType<IconType>();
@@ -58,11 +58,19 @@ export class IconSelect extends React.PureComponent<IIconSelectProps> {
         );
     }
 
-    private renderIconItem: ItemRenderer<IconName> = (icon, { handleClick, modifiers }) => {
+    private renderIconItem: ItemRenderer<IconName | typeof NONE> = (icon, { handleClick, modifiers }) => {
         if (!modifiers.matchesPredicate) {
             return null;
         }
-        return <MenuItem active={modifiers.active} icon={icon} key={icon} onClick={handleClick} text={icon} />;
+        return (
+            <MenuItem
+                active={modifiers.active}
+                icon={icon === NONE ? undefined : icon}
+                key={icon}
+                onClick={handleClick}
+                text={icon}
+            />
+        );
     };
 
     private filterIconName = (query: string, iconName: IconName | typeof NONE) => {
diff --git a/packages/docs-app/src/examples/core-examples/drawerExample.tsx b/packages/docs-app/src/examples/core-examples/drawerExample.tsx
index 8a30994d448..fd09a5dc2b2 100644
--- a/packages/docs-app/src/examples/core-examples/drawerExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/drawerExample.tsx
@@ -29,7 +29,13 @@ import {
     Position,
     Switch,
 } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import {
+    Example,
+    handleBooleanChange,
+    handleStringChange,
+    handleValueChange,
+    IExampleProps,
+} from "@blueprintjs/docs-theme";
 import { IBlueprintExampleData } from "../../tags/types";
 
 export interface IDrawerExampleState {
@@ -61,7 +67,7 @@ export class DrawerExample extends React.PureComponent<IExampleProps<IBlueprintE
     private handleEnforceFocusChange = handleBooleanChange(enforceFocus => this.setState({ enforceFocus }));
     private handleEscapeKeyChange = handleBooleanChange(canEscapeKeyClose => this.setState({ canEscapeKeyClose }));
     private handleUsePortalChange = handleBooleanChange(usePortal => this.setState({ usePortal }));
-    private handlePositionChange = handleStringChange((position: Position) => this.setState({ position }));
+    private handlePositionChange = handleValueChange((position: Position) => this.setState({ position }));
     private handleOutsideClickChange = handleBooleanChange(val => this.setState({ canOutsideClickClose: val }));
     private handleSizeChange = handleStringChange(size => this.setState({ size }));
 
diff --git a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx b/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
index 02f715f5024..24fddcf97e4 100644
--- a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Classes, EditableText, FormGroup, H1, H5, Intent, NumericInput, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 
 import { IntentSelect } from "./common/intentSelect";
 
@@ -40,7 +40,7 @@ export class EditableTextExample extends React.PureComponent<IExampleProps, IEdi
         selectAllOnFocus: false,
     };
 
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
     private toggleSelectAll = handleBooleanChange(selectAllOnFocus => this.setState({ selectAllOnFocus }));
     private toggleSwap = handleBooleanChange(confirmOnEnterKey => this.setState({ confirmOnEnterKey }));
     private toggleAlwaysRenderInput = handleBooleanChange(alwaysRenderInput => this.setState({ alwaysRenderInput }));
diff --git a/packages/docs-app/src/examples/core-examples/formGroupExample.tsx b/packages/docs-app/src/examples/core-examples/formGroupExample.tsx
index 5c9e0f0da19..d80e3d1fea8 100644
--- a/packages/docs-app/src/examples/core-examples/formGroupExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/formGroupExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { FormGroup, H5, InputGroup, Intent, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 import { IntentSelect } from "./common/intentSelect";
 
 export interface IFormGroupExampleState {
@@ -44,7 +44,7 @@ export class FormGroupExample extends React.PureComponent<IExampleProps, IFormGr
     private handleInlineChange = handleBooleanChange(inline => this.setState({ inline }));
     private handleLabelChange = handleBooleanChange(label => this.setState({ label }));
     private handleRequiredLabelChange = handleBooleanChange(requiredLabel => this.setState({ requiredLabel }));
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
 
     public render() {
         const { disabled, helperText, inline, intent, label, requiredLabel } = this.state;
diff --git a/packages/docs-app/src/examples/core-examples/iconExample.tsx b/packages/docs-app/src/examples/core-examples/iconExample.tsx
index 231453786bc..909db9880e6 100644
--- a/packages/docs-app/src/examples/core-examples/iconExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/iconExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { H5, Icon, Intent, Label, Slider } from "@blueprintjs/core";
-import { Example, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 import { IconName } from "@blueprintjs/icons";
 import { IconSelect } from "./common/iconSelect";
 import { IntentSelect } from "./common/intentSelect";
@@ -35,6 +35,10 @@ export class IconExample extends React.PureComponent<IExampleProps, IIconExample
         intent: Intent.NONE,
     };
 
+    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIconSizeChange = (iconSize: number) => this.setState({ iconSize });
+    private handleIconNameChange = (icon: IconName) => this.setState({ icon });
+
     public render() {
         const { icon, iconSize, intent } = this.state;
 
@@ -61,11 +65,6 @@ export class IconExample extends React.PureComponent<IExampleProps, IIconExample
             </Example>
         );
     }
-
-    // eslint-disable-line @typescript-eslint/member-ordering
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
-    private handleIconSizeChange = (iconSize: number) => this.setState({ iconSize });
-    private handleIconNameChange = (icon: IconName) => this.setState({ icon });
 }
 
 const MAX_ICON_SIZE = 100;
diff --git a/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx b/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx
index 2c35639848c..bbdde8467d6 100644
--- a/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { H5, HandleInteractionKind, Intent, MultiSlider, Radio, RadioGroup, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 
 interface ISliderValues {
     dangerStart: number;
@@ -54,10 +54,10 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
 
     private toggleTrackFill = handleBooleanChange(showTrackFill => this.setState({ showTrackFill }));
     private toggleVertical = handleBooleanChange(vertical => this.setState({ vertical }));
-    private handleInteractionKindChange = handleStringChange((interactionKind: HandleInteractionKind) =>
+    private handleInteractionKindChange = handleValueChange((interactionKind: HandleInteractionKind) =>
         this.setState({ interactionKind }),
     );
-    private handleShownIntentsChange = handleStringChange((shownIntents: ShownIntents) =>
+    private handleShownIntentsChange = handleValueChange((shownIntents: ShownIntents) =>
         this.setState({ shownIntents }),
     );
 
@@ -139,7 +139,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
     private handleChange = (rawValues: number[]) => {
         // newValues is always in sorted order, and handled cannot be unsorted by dragging with lock/push interactions.
         const newValuesMap = { ...this.state.values, ...this.getUpdatedHandles(rawValues) };
-        const newValues = Object.keys(newValuesMap).map((key: keyof ISliderValues) => newValuesMap[key]);
+        const newValues = Object.keys(newValuesMap).map((key: string) => newValuesMap[key as keyof ISliderValues]);
         newValues.sort((a, b) => a - b);
         const [dangerStart, warningStart, warningEnd, dangerEnd] = newValues;
         this.setState({ values: { dangerStart, warningStart, warningEnd, dangerEnd } });
diff --git a/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx b/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx
index af74941c979..20b98169660 100644
--- a/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx
@@ -30,7 +30,7 @@ import {
     Example,
     handleBooleanChange,
     handleNumberChange,
-    handleStringChange,
+    handleValueChange,
     IExampleProps,
 } from "@blueprintjs/docs-theme";
 
@@ -76,8 +76,8 @@ export class NumericInputBasicExample extends React.PureComponent<IExampleProps,
 
     private handleMaxChange = handleNumberChange(max => this.setState({ max }));
     private handleMinChange = handleNumberChange(min => this.setState({ min }));
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
-    private handleButtonPositionChange = handleStringChange((buttonPosition: INumericInputProps["buttonPosition"]) =>
+    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleButtonPositionChange = handleValueChange((buttonPosition: INumericInputProps["buttonPosition"]) =>
         this.setState({ buttonPosition }),
     );
 
diff --git a/packages/docs-app/src/examples/core-examples/panelStackExample.tsx b/packages/docs-app/src/examples/core-examples/panelStackExample.tsx
index 94596e69ca9..c4228d8ef06 100644
--- a/packages/docs-app/src/examples/core-examples/panelStackExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/panelStackExample.tsx
@@ -23,12 +23,12 @@ import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-t
 
 export interface IPanelStackExampleState {
     activePanelOnly: boolean;
-    currentPanelStack: IPanel[];
+    currentPanelStack: Array<IPanel<IPanelExampleProps>>;
     showHeader: boolean;
 }
 
 export class PanelStackExample extends React.PureComponent<IExampleProps, IPanelStackExampleState> {
-    public initialPanel: IPanel = {
+    public initialPanel: IPanel<IPanelExampleProps> = {
         component: PanelExample,
         props: {
             panelNumber: 1,
@@ -77,7 +77,10 @@ export class PanelStackExample extends React.PureComponent<IExampleProps, IPanel
     }
 
     private addToPanelStack = (newPanel: IPanel) => {
-        this.setState(state => ({ currentPanelStack: [newPanel, ...state.currentPanelStack] }));
+        this.setState(state => ({
+            // HACKHACK: https://github.com/palantir/blueprint/issues/4272
+            currentPanelStack: [(newPanel as unknown) as IPanel<IPanelExampleProps>, ...state.currentPanelStack],
+        }));
     };
 
     private removeFromPanelStack = (_lastPanel: IPanel) => {
@@ -87,7 +90,7 @@ export class PanelStackExample extends React.PureComponent<IExampleProps, IPanel
     };
 }
 
-interface IPanelExampleProps extends IPanelProps {
+interface IPanelExampleProps {
     panelNumber: number;
 }
 
@@ -95,7 +98,7 @@ interface IPanelExampleState {
     counter: number;
 }
 
-class PanelExample extends React.PureComponent<IPanelExampleProps> {
+class PanelExample extends React.PureComponent<IPanelExampleProps & IPanelProps> {
     public state: IPanelExampleState = {
         counter: 0,
     };
diff --git a/packages/docs-app/src/examples/core-examples/popoverExample.tsx b/packages/docs-app/src/examples/core-examples/popoverExample.tsx
index 8865399cbe9..3eecf6db342 100644
--- a/packages/docs-app/src/examples/core-examples/popoverExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/popoverExample.tsx
@@ -42,7 +42,7 @@ import {
     Example,
     handleBooleanChange,
     handleNumberChange,
-    handleStringChange,
+    handleValueChange,
     IExampleProps,
 } from "@blueprintjs/docs-theme";
 
@@ -110,12 +110,12 @@ export class PopoverExample extends React.PureComponent<IExampleProps, IPopoverE
     };
 
     private handleExampleIndexChange = handleNumberChange(exampleIndex => this.setState({ exampleIndex }));
-    private handleInteractionChange = handleStringChange((interactionKind: PopoverInteractionKind) => {
+    private handleInteractionChange = handleValueChange((interactionKind: PopoverInteractionKind) => {
         const hasBackdrop = this.state.hasBackdrop && interactionKind === PopoverInteractionKind.CLICK;
         this.setState({ interactionKind, hasBackdrop });
     });
-    private handlePositionChange = handleStringChange((position: PopoverPosition) => this.setState({ position }));
-    private handleBoundaryChange = handleStringChange((boundary: PopperBoundary) => this.setState({ boundary }));
+    private handlePositionChange = handleValueChange((position: PopoverPosition) => this.setState({ position }));
+    private handleBoundaryChange = handleValueChange((boundary: PopperBoundary) => this.setState({ boundary }));
 
     private toggleEscapeKey = handleBooleanChange(canEscapeKeyClose => this.setState({ canEscapeKeyClose }));
     private toggleIsOpen = handleBooleanChange(isOpen => this.setState({ isOpen }));
diff --git a/packages/docs-app/src/examples/core-examples/progressExample.tsx b/packages/docs-app/src/examples/core-examples/progressExample.tsx
index f4d0e54a2e1..92f7eef84f0 100644
--- a/packages/docs-app/src/examples/core-examples/progressExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/progressExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { H5, Intent, ProgressBar, Slider, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 
 import { IntentSelect } from "./common/intentSelect";
 
@@ -34,7 +34,7 @@ export class ProgressExample extends React.PureComponent<IExampleProps, IProgres
     };
 
     private handleIndeterminateChange = handleBooleanChange(hasValue => this.setState({ hasValue }));
-    private handleModifierChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleModifierChange = handleValueChange((intent: Intent) => this.setState({ intent }));
 
     public render() {
         const { hasValue, intent, value } = this.state;
diff --git a/packages/docs-app/src/examples/core-examples/spinnerExample.tsx b/packages/docs-app/src/examples/core-examples/spinnerExample.tsx
index 830e8679508..4358a58f792 100644
--- a/packages/docs-app/src/examples/core-examples/spinnerExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/spinnerExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { H5, Intent, Label, Slider, Spinner, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 import { IntentSelect } from "./common/intentSelect";
 
 export interface ISpinnerExampleState {
@@ -35,7 +35,7 @@ export class SpinnerExample extends React.PureComponent<IExampleProps, ISpinnerE
     };
 
     private handleIndeterminateChange = handleBooleanChange(hasValue => this.setState({ hasValue }));
-    private handleModifierChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleModifierChange = handleValueChange((intent: Intent) => this.setState({ intent }));
 
     public render() {
         const { size, hasValue, intent, value } = this.state;
diff --git a/packages/docs-app/src/examples/core-examples/tagExample.tsx b/packages/docs-app/src/examples/core-examples/tagExample.tsx
index fd3beb59ca1..f97d00d32c3 100644
--- a/packages/docs-app/src/examples/core-examples/tagExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/tagExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Button, H5, Intent, Switch, Tag } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 import { IntentSelect } from "./common/intentSelect";
 
 export interface ITagExampleState {
@@ -49,7 +49,7 @@ export class TagExample extends React.PureComponent<IExampleProps, ITagExampleSt
 
     private handleFillChange = handleBooleanChange(fill => this.setState({ fill }));
     private handleIconChange = handleBooleanChange(icon => this.setState({ icon }));
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
     private handleInteractiveChange = handleBooleanChange(interactive => this.setState({ interactive }));
     private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
diff --git a/packages/docs-app/src/examples/core-examples/tagInputExample.tsx b/packages/docs-app/src/examples/core-examples/tagInputExample.tsx
index c34dd07a611..f98d9aa31de 100644
--- a/packages/docs-app/src/examples/core-examples/tagInputExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/tagInputExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Button, H5, Intent, ITagProps, Switch, TagInput } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 import { IntentSelect } from "./common/intentSelect";
 
 const INTENTS = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.DANGER, Intent.WARNING];
@@ -64,7 +64,7 @@ export class TagInputExample extends React.PureComponent<IExampleProps, ITagInpu
     private handleAddOnPasteChange = handleBooleanChange(addOnPaste => this.setState({ addOnPaste }));
     private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled }));
     private handleFillChange = handleBooleanChange(fill => this.setState({ fill }));
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
     private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
     private handleLeftIconChange = handleBooleanChange(leftIcon => this.setState({ leftIcon }));
     private handleTagIntentsChange = handleBooleanChange(tagIntents => this.setState({ tagIntents }));
@@ -85,7 +85,7 @@ export class TagInputExample extends React.PureComponent<IExampleProps, ITagInpu
         // define a new function every time so switch changes will cause it to re-render
         // NOTE: avoid this pattern in your app (use this.getTagProps instead); this is only for
         // example purposes!!
-        const getTagProps = (_v: string, index: number): ITagProps => ({
+        const getTagProps = (_v: React.ReactNode, index: number): ITagProps => ({
             intent: tagIntents ? INTENTS[index % INTENTS.length] : Intent.NONE,
             large: props.large,
             minimal: tagMinimal,
diff --git a/packages/docs-app/src/examples/core-examples/toastExample.tsx b/packages/docs-app/src/examples/core-examples/toastExample.tsx
index 79104d5be40..ac42397b527 100644
--- a/packages/docs-app/src/examples/core-examples/toastExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/toastExample.tsx
@@ -33,7 +33,7 @@ import {
     Toaster,
     ToasterPosition,
 } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 import { IBlueprintExampleData } from "../../tags/types";
 
 type IToastDemo = IToastProps & { button: string };
@@ -114,7 +114,7 @@ export class ToastExample extends React.PureComponent<IExampleProps<IBlueprintEx
     };
     private progressToastInterval?: number;
 
-    private handlePositionChange = handleStringChange((position: ToasterPosition) => this.setState({ position }));
+    private handlePositionChange = handleValueChange((position: ToasterPosition) => this.setState({ position }));
     private toggleAutoFocus = handleBooleanChange(autoFocus => this.setState({ autoFocus }));
     private toggleEscapeKey = handleBooleanChange(canEscapeKeyClear => this.setState({ canEscapeKeyClear }));
 
diff --git a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
index 4ee46c7a7dd..c011ae370e7 100644
--- a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
+++ b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
@@ -16,7 +16,7 @@
 
 import { H5, Position, Switch } from "@blueprintjs/core";
 import { DateInput, IDateFormatProps, TimePrecision } from "@blueprintjs/datetime";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 import * as React from "react";
 
 import { FORMATS, FormatSelect } from "./common/formatSelect";
@@ -53,7 +53,7 @@ export class DateInputExample extends React.PureComponent<IExampleProps, IDateIn
     private toggleDisabled = handleBooleanChange(disabled => this.setState({ disabled }));
     private toggleFill = handleBooleanChange(fill => this.setState({ fill }));
     private toggleReverseMenus = handleBooleanChange(reverse => this.setState({ reverseMonthAndYearMenus: reverse }));
-    private toggleTimePrecision = handleStringChange((timePrecision: TimePrecision | "none") =>
+    private toggleTimePrecision = handleValueChange((timePrecision: TimePrecision | "none") =>
         this.setState({ timePrecision: timePrecision === "none" ? undefined : timePrecision }),
     );
     private toggleTimepickerArrowButtons = handleBooleanChange(showTimeArrowButtons =>
diff --git a/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx b/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx
index f457452cb44..53b285795da 100644
--- a/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx
+++ b/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx
@@ -15,7 +15,7 @@
  */
 
 import { Classes, H5, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 import * as React from "react";
 
 import { DatePicker, TimePrecision } from "@blueprintjs/datetime";
@@ -47,7 +47,7 @@ export class DatePickerExample extends React.PureComponent<IExampleProps, IDateP
     private toggleActionsBar = handleBooleanChange(showActionsBar => this.setState({ showActionsBar }));
     private toggleShortcuts = handleBooleanChange(shortcuts => this.setState({ shortcuts }));
     private toggleReverseMenus = handleBooleanChange(reverse => this.setState({ reverseMonthAndYearMenus: reverse }));
-    private handlePrecisionChange = handleStringChange((p: TimePrecision | "none") =>
+    private handlePrecisionChange = handleValueChange((p: TimePrecision | "none") =>
         this.setState({ timePrecision: p === "none" ? undefined : p }),
     );
     private toggleTimepickerArrowButtons = handleBooleanChange(showTimeArrowButtons =>
diff --git a/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx
index 335c07ee0dd..3cc6eccb4f9 100644
--- a/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx
+++ b/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx
@@ -19,7 +19,7 @@ import {
     Example,
     handleBooleanChange,
     handleNumberChange,
-    handleStringChange,
+    handleValueChange,
     IExampleProps,
 } from "@blueprintjs/docs-theme";
 import moment from "moment";
@@ -84,7 +84,7 @@ export class DateRangePickerExample extends React.PureComponent<IExampleProps, I
 
     private handleMaxDateIndexChange = handleNumberChange(maxDateIndex => this.setState({ maxDateIndex }));
     private handleMinDateIndexChange = handleNumberChange(minDateIndex => this.setState({ minDateIndex }));
-    private handlePrecisionChange = handleStringChange((timePrecision: TimePrecision | undefined) =>
+    private handlePrecisionChange = handleValueChange((timePrecision: TimePrecision | undefined) =>
         this.setState({ timePrecision }),
     );
 
diff --git a/packages/docs-app/src/examples/datetime-examples/timePickerExample.tsx b/packages/docs-app/src/examples/datetime-examples/timePickerExample.tsx
index 9b60a4a578f..10ba9566243 100644
--- a/packages/docs-app/src/examples/datetime-examples/timePickerExample.tsx
+++ b/packages/docs-app/src/examples/datetime-examples/timePickerExample.tsx
@@ -15,7 +15,7 @@
  */
 
 import { Classes, H5, HTMLSelect, Switch } from "@blueprintjs/core";
-import { Example, handleNumberChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleNumberChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 import * as React from "react";
 import { PrecisionSelect } from "./common/precisionSelect";
 
@@ -56,7 +56,7 @@ export class TimePickerExample extends React.PureComponent<IExampleProps, ITimeP
         useAmPm: false,
     };
 
-    private handlePrecisionChange = handleStringChange((precision: TimePrecision) => this.setState({ precision }));
+    private handlePrecisionChange = handleValueChange((precision: TimePrecision) => this.setState({ precision }));
 
     public render() {
         return (
diff --git a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
index 07efcb6de3a..7b662160931 100644
--- a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
@@ -75,7 +75,7 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
 
     public render() {
         const { allowCreate, films, hasInitialContent, tagMinimal, popoverMinimal, ...flags } = this.state;
-        const getTagProps = (_value: string, index: number): ITagProps => ({
+        const getTagProps = (_value: React.ReactNode, index: number): ITagProps => ({
             intent: this.state.intent ? INTENTS[index % INTENTS.length] : Intent.NONE,
             minimal: tagMinimal,
         });
diff --git a/packages/docs-app/src/examples/table-examples/tableFormatsExample.tsx b/packages/docs-app/src/examples/table-examples/tableFormatsExample.tsx
index 15a52daac49..44480c037db 100644
--- a/packages/docs-app/src/examples/table-examples/tableFormatsExample.tsx
+++ b/packages/docs-app/src/examples/table-examples/tableFormatsExample.tsx
@@ -27,7 +27,7 @@ interface ITimezone {
 
 const LOCAL_TIMEZONE_OFFSET_MSEC = new Date().getTimezoneOffset() * 60 * 1000;
 
-const TIME_ZONES: ITimezone[] = [
+const TIME_ZONES: ITimezone[] = ([
     ["-12:00", -12.0, "Etc/GMT+12"],
     ["-11:00", -11.0, "Pacific/Midway"],
     ["-10:00", -10.0, "Pacific/Honolulu"],
@@ -67,7 +67,7 @@ const TIME_ZONES: ITimezone[] = [
     ["+12:45", 12.75, "Pacific/Chatham"],
     ["+13:00", 13.0, "Pacific/Tongatapu"],
     ["+14:00", 14.0, "Pacific/Kiritimati"],
-].map((arr: [string, number, string]) => {
+] as Array<[string, number, string]>).map(arr => {
     return {
         name: arr[2],
         offsetMsec: (arr[1] as number) * 60 * 60 * 1000 + LOCAL_TIMEZONE_OFFSET_MSEC,
diff --git a/packages/docs-app/src/examples/timezone-examples/timezonePickerExample.tsx b/packages/docs-app/src/examples/timezone-examples/timezonePickerExample.tsx
index e482caae8a5..22b7234d818 100644
--- a/packages/docs-app/src/examples/timezone-examples/timezonePickerExample.tsx
+++ b/packages/docs-app/src/examples/timezone-examples/timezonePickerExample.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { H5, Position, Radio, RadioGroup, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 import { TimezoneDisplayFormat, TimezonePicker } from "@blueprintjs/timezone";
 import { CustomTimezonePickerTarget } from "./components";
 
@@ -41,7 +41,7 @@ export class TimezonePickerExample extends React.PureComponent<IExampleProps, IT
     private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled }));
     private handleShowLocalChange = handleBooleanChange(showLocalTimezone => this.setState({ showLocalTimezone }));
     private handleCustomChildChange = handleBooleanChange(showCustomTarget => this.setState({ showCustomTarget }));
-    private handleFormatChange = handleStringChange((targetDisplayFormat: TimezoneDisplayFormat) =>
+    private handleFormatChange = handleValueChange((targetDisplayFormat: TimezoneDisplayFormat) =>
         this.setState({ targetDisplayFormat }),
     );
 
diff --git a/packages/docs-app/src/tsconfig.json b/packages/docs-app/src/tsconfig.json
index e5eca5905fb..2026b8816bb 100644
--- a/packages/docs-app/src/tsconfig.json
+++ b/packages/docs-app/src/tsconfig.json
@@ -4,6 +4,7 @@
         "declaration": false,
         "lib": ["dom", "es5", "es6"],
         "outDir": "../dist",
-        "sourceMap": false
+        "sourceMap": false,
+        "strictNullChecks": false
     }
 }
diff --git a/packages/docs-theme/src/common/context.ts b/packages/docs-theme/src/common/context.ts
index a32fdc2bfab..8ee4d6b4cdd 100644
--- a/packages/docs-theme/src/common/context.ts
+++ b/packages/docs-theme/src/common/context.ts
@@ -97,7 +97,7 @@ export const DocumentationContextTypes = {
 // simple alternative to prop-types dependency
 function assertFunctionProp<T>(obj: T, key: keyof T) {
     if (obj[key] != null && Utils.isFunction(obj[key])) {
-        return undefined;
+        return null;
     }
     return new Error(`[Blueprint] Documentation context ${key} must be function.`);
 }
diff --git a/packages/docs-theme/src/components/baseExample.tsx b/packages/docs-theme/src/components/baseExample.tsx
index 4ee2c3ab652..bc2564a195c 100644
--- a/packages/docs-theme/src/components/baseExample.tsx
+++ b/packages/docs-theme/src/components/baseExample.tsx
@@ -33,7 +33,7 @@ export interface IBaseExampleProps {
 // eslint-disable-next-line @typescript-eslint/ban-types
 export class BaseExample<S extends {}> extends React.Component<IBaseExampleProps, S> {
     /** Define this prop to add a className to the example container */
-    protected className: string;
+    protected className: string | undefined;
 
     // Can't put this in state, because the state typing is generic.
     private hasDelayedBeforeInitialRender = false;
@@ -127,6 +127,11 @@ export function handleStringChange(handler: (value: string) => void) {
     return (event: React.FormEvent<HTMLElement>) => handler((event.target as HTMLInputElement).value);
 }
 
+/** Event handler that exposes the target element's value as an inferred generic type. */
+export function handleValueChange<T>(handler: (value: T) => void) {
+    return (event: React.FormEvent<HTMLElement>) => handler(((event.target as HTMLInputElement).value as unknown) as T);
+}
+
 /** Event handler that exposes the target element's value as a number. */
 export function handleNumberChange(handler: (value: number) => void) {
     return handleStringChange(value => handler(+value));
diff --git a/packages/docs-theme/src/tags/css.tsx b/packages/docs-theme/src/tags/css.tsx
index dac9199388b..7e3a59b0daf 100644
--- a/packages/docs-theme/src/tags/css.tsx
+++ b/packages/docs-theme/src/tags/css.tsx
@@ -29,12 +29,12 @@ export class CssExample extends React.PureComponent<ITag> {
     public static contextTypes = DocumentationContextTypes;
     public static displayName = "Docs2.CssExample";
 
-    public context: IDocumentationContext;
+    public context: IDocumentationContext | undefined;
     public state: ICssExampleState = { modifiers: new Set<string>() };
 
     public render() {
         const { value } = this.props;
-        const { css } = this.context.getDocsData() as IKssPluginData;
+        const { css } = this.context?.getDocsData() as IKssPluginData;
         if (css == null || css[value] == null) {
             return null;
         }
diff --git a/packages/docs-theme/src/tags/defaults.ts b/packages/docs-theme/src/tags/defaults.ts
index 4a489804f56..9eed67591df 100644
--- a/packages/docs-theme/src/tags/defaults.ts
+++ b/packages/docs-theme/src/tags/defaults.ts
@@ -25,7 +25,8 @@ import { TypescriptExample } from "./typescript";
 export function createDefaultRenderers(): Record<string, React.ComponentType<ITag>> {
     return {
         css: CssExample,
-        heading: Heading,
+        // HACKHACK https://github.com/palantir/blueprint/issues/4342
+        heading: Heading as React.ComponentType<ITag>,
         interface: TypescriptExample,
         method: Method,
         page: () => null,
diff --git a/packages/docs-theme/src/tsconfig.json b/packages/docs-theme/src/tsconfig.json
index b4fa3674bf5..69c7c4a2184 100644
--- a/packages/docs-theme/src/tsconfig.json
+++ b/packages/docs-theme/src/tsconfig.json
@@ -1,6 +1,7 @@
 {
     "extends": "../../../config/tsconfig.base",
     "compilerOptions": {
-        "outDir": "../lib/esm"
+        "outDir": "../lib/esm",
+        "strictNullChecks": false
     }
 }
diff --git a/packages/eslint-plugin/src/tsconfig.json b/packages/eslint-plugin/src/tsconfig.json
index 48aa2e7dd07..3847bd21429 100644
--- a/packages/eslint-plugin/src/tsconfig.json
+++ b/packages/eslint-plugin/src/tsconfig.json
@@ -4,7 +4,6 @@
         "lib": ["es6", "dom"],
         "module": "commonjs",
         "outDir": "../lib",
-        "strict": true,
         "target": "ES2015"
     }
 }
diff --git a/packages/landing-app/src/logo.ts b/packages/landing-app/src/logo.ts
index 04e3740869f..ca07d0938bb 100644
--- a/packages/landing-app/src/logo.ts
+++ b/packages/landing-app/src/logo.ts
@@ -726,8 +726,7 @@ export class CanvasBuffer {
         if (bounds == null) {
             bounds = [0, 0, this.ctx.canvas.width, this.ctx.canvas.height];
         }
-        const args = [].concat([this.ctx.canvas]).concat(bounds).concat(bounds);
-        ctx.drawImage.apply(ctx, args);
+        ctx.drawImage(this.ctx.canvas, ...bounds, ...bounds);
     }
 }
 
diff --git a/packages/landing-app/src/tsconfig.json b/packages/landing-app/src/tsconfig.json
index e2678c48c96..732dea6f83e 100644
--- a/packages/landing-app/src/tsconfig.json
+++ b/packages/landing-app/src/tsconfig.json
@@ -4,6 +4,7 @@
         "declaration": false,
         "lib": ["dom", "es5", "es6"],
         "outDir": "../dist",
-        "sourceMap": true
+        "sourceMap": true,
+        "strictNullChecks": false
     }
 }
diff --git a/packages/select/src/tsconfig.json b/packages/select/src/tsconfig.json
index 2a33efefb5f..b4fa3674bf5 100644
--- a/packages/select/src/tsconfig.json
+++ b/packages/select/src/tsconfig.json
@@ -1,7 +1,6 @@
 {
     "extends": "../../../config/tsconfig.base",
     "compilerOptions": {
-        "outDir": "../lib/esm",
-        "strict": true
+        "outDir": "../lib/esm"
     }
 }
diff --git a/packages/select/test/tsconfig.json b/packages/select/test/tsconfig.json
index f5cc21b2a29..b32f37bea56 100644
--- a/packages/select/test/tsconfig.json
+++ b/packages/select/test/tsconfig.json
@@ -3,7 +3,6 @@
     "compilerOptions": {
         "declaration": false,
         "module": "commonjs",
-        "noEmit": true,
-        "strict": true
+        "noEmit": true
     }
 }
diff --git a/packages/table-dev-app/src/tsconfig.json b/packages/table-dev-app/src/tsconfig.json
index 4d61d7ff89e..d8d215881d4 100644
--- a/packages/table-dev-app/src/tsconfig.json
+++ b/packages/table-dev-app/src/tsconfig.json
@@ -2,6 +2,7 @@
     "extends": "../../../config/tsconfig.base.json",
     "compilerOptions": {
         "lib": ["dom", "es5", "es6"],
-        "outDir": "../dist"
+        "outDir": "../dist",
+        "strictNullChecks": false
     }
 }
diff --git a/packages/table/src/common/clipboard.ts b/packages/table/src/common/clipboard.ts
index 4e2d2932c93..65150fa558b 100644
--- a/packages/table/src/common/clipboard.ts
+++ b/packages/table/src/common/clipboard.ts
@@ -100,7 +100,7 @@ export const Clipboard = {
             if (plaintext != null) {
                 // add plaintext fallback
                 // http://stackoverflow.com/questions/23211018/copy-to-clipboard-with-jquery-js-in-chrome
-                elem.addEventListener("copy", (e: UIEvent) => {
+                elem.addEventListener("copy", (e: ClipboardEvent) => {
                     e.preventDefault();
                     const clipboardData = (e as any).clipboardData || (window as any).clipboardData;
                     if (clipboardData != null) {
diff --git a/packages/table/src/interactions/resizable.tsx b/packages/table/src/interactions/resizable.tsx
index fd20e976cb9..5e4609e207e 100644
--- a/packages/table/src/interactions/resizable.tsx
+++ b/packages/table/src/interactions/resizable.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { AbstractPureComponent2, IProps } from "@blueprintjs/core";
+import { AbstractPureComponent2, IProps, Utils as CoreUtils } from "@blueprintjs/core";
 import * as React from "react";
 import { polyfill } from "react-lifecycles-compat";
 import { Utils } from "../common/index";
@@ -83,7 +83,8 @@ export interface IResizeableState {
     unclampedSize?: number;
 }
 
-@polyfill
+// HACKHACK: https://github.com/palantir/blueprint/issues/4342
+@(polyfill as CoreUtils.LifecycleCompatPolyfill<IResizableProps, any>)
 export class Resizable extends AbstractPureComponent2<IResizableProps, IResizeableState> {
     public static defaultProps = {
         isResizable: true,
diff --git a/packages/table/src/quadrants/tableQuadrantStack.tsx b/packages/table/src/quadrants/tableQuadrantStack.tsx
index a336b48be8f..a98c96729ed 100644
--- a/packages/table/src/quadrants/tableQuadrantStack.tsx
+++ b/packages/table/src/quadrants/tableQuadrantStack.tsx
@@ -437,7 +437,14 @@ export class TableQuadrantStack extends AbstractComponent2<ITableQuadrantStackPr
             agg[key] = (ref: HTMLElement) => (this.quadrantRefs[quadrantType][key] = ref);
             return agg;
         };
-        return ["columnHeader", "menu", "quadrant", "rowHeader", "scrollContainer"].reduce(reducer, {});
+        const refHandlers: Array<keyof IQuadrantRefHandlers> = [
+            "columnHeader",
+            "menu",
+            "quadrant",
+            "rowHeader",
+            "scrollContainer",
+        ];
+        return refHandlers.reduce(reducer, {});
     }
 
     // Quadrant-specific renderers
diff --git a/packages/table/src/table.tsx b/packages/table/src/table.tsx
index bca0b7b26fc..55e838f0468 100644
--- a/packages/table/src/table.tsx
+++ b/packages/table/src/table.tsx
@@ -2213,7 +2213,9 @@ export class Table extends AbstractComponent2<ITableProps, ITableState, ITableSn
         rowIndex: number,
         columnIndex: number,
     ) {
-        const optionKeys = Object.keys(Table.resizeRowsByApproximateHeightDefaults);
+        const optionKeys = Object.keys(Table.resizeRowsByApproximateHeightDefaults) as Array<
+            keyof IResizeRowsByApproximateHeightOptions
+        >;
         const optionReducer = (
             agg: IResizeRowsByApproximateHeightResolvedOptions,
             key: keyof IResizeRowsByApproximateHeightOptions,
diff --git a/packages/table/src/tsconfig.json b/packages/table/src/tsconfig.json
index eac6c113770..7bcafdafd01 100644
--- a/packages/table/src/tsconfig.json
+++ b/packages/table/src/tsconfig.json
@@ -2,6 +2,7 @@
     "extends": "../../../config/tsconfig.base",
     "compilerOptions": {
         "lib": ["dom", "es5", "es6"],
-        "outDir": "../lib/esm"
+        "outDir": "../lib/esm",
+        "strictNullChecks": false
     }
 }
diff --git a/packages/test-commons/src/utils.ts b/packages/test-commons/src/utils.ts
index 1cdc34721f6..5d69194483c 100644
--- a/packages/test-commons/src/utils.ts
+++ b/packages/test-commons/src/utils.ts
@@ -102,12 +102,26 @@ function detectBrowser() {
 // tl;dr PhantomJS sucks so we have to manually create click events
 export function createMouseEvent(eventType = "click", clientX = 0, clientY = 0) {
     const event = document.createEvent("MouseEvent");
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+    let detailArg = 0;
+    switch (eventType) {
+        case "click":
+        case "dblclick":
+            detailArg = 1;
+            break;
+        case "mouseup":
+        case "mousedown":
+            detailArg = 2;
+            break;
+    }
+
     event.initMouseEvent(
         eventType,
         true /* bubble */,
         true /* cancelable */,
-        window,
-        null,
+        window /* viewArg */,
+        detailArg,
         0,
         0,
         clientX,
diff --git a/packages/timezone/src/tsconfig.json b/packages/timezone/src/tsconfig.json
index b4fa3674bf5..69c7c4a2184 100644
--- a/packages/timezone/src/tsconfig.json
+++ b/packages/timezone/src/tsconfig.json
@@ -1,6 +1,7 @@
 {
     "extends": "../../../config/tsconfig.base",
     "compilerOptions": {
-        "outDir": "../lib/esm"
+        "outDir": "../lib/esm",
+        "strictNullChecks": false
     }
 }
diff --git a/packages/tslint-config/src/tsconfig.json b/packages/tslint-config/src/tsconfig.json
index 3d66540a0bb..6a43a09527e 100644
--- a/packages/tslint-config/src/tsconfig.json
+++ b/packages/tslint-config/src/tsconfig.json
@@ -3,7 +3,6 @@
     "compilerOptions": {
         "lib": ["es6", "dom"],
         "module": "commonjs",
-        "outDir": "../lib/rules",
-        "strict": true
+        "outDir": "../lib/rules"
     }
 }