chore(many): replace any types and add tech debt tickets (#26293)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

angular/src/app-initialize.ts

@@ -6,6 +6,8 @@ import { Config } from './providers/config';
 import { IonicWindow } from './types/interfaces';
 import { raf } from './util/util';
 
+// TODO(FW-2827): types
+
 export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
   return (): any => {
     const win: IonicWindow | undefined = doc.defaultView as any;

angular/src/directives/control-value-accessors/boolean-value-accessor.ts

@@ -18,13 +18,13 @@ export class BooleanValueAccessorDirective extends ValueAccessor {
     super(injector, el);
   }
 
-  writeValue(value: any): void {
+  writeValue(value: boolean): void {
     this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
     setIonicClasses(this.el);
   }
 
   @HostListener('ionChange', ['$event.target'])
-  _handleIonChange(el: any): void {
+  _handleIonChange(el: HTMLIonCheckboxElement | HTMLIonToggleElement): void {
     this.handleChangeEvent(el, el.checked);
   }
 }

angular/src/directives/control-value-accessors/radio-value-accessor.ts

@@ -19,6 +19,7 @@ export class RadioValueAccessorDirective extends ValueAccessor {
     super(injector, el);
   }
 
+  // TODO(FW-2827): type (HTMLIonRadioElement and HTMLElement are both missing `checked`)
   @HostListener('ionSelect', ['$event.target'])
   _handleIonSelect(el: any): void {
     this.handleChangeEvent(el, el.checked);

angular/src/directives/control-value-accessors/select-value-accessor.ts

@@ -20,7 +20,14 @@ export class SelectValueAccessorDirective extends ValueAccessor {
   }
 
   @HostListener('ionChange', ['$event.target'])
-  _handleChangeEvent(el: any): void {
+  _handleChangeEvent(
+    el:
+      | HTMLIonRangeElement
+      | HTMLIonSelectElement
+      | HTMLIonRadioGroupElement
+      | HTMLIonSegmentElement
+      | HTMLIonDatetimeElement
+  ): void {
     this.handleChangeEvent(el, el.value);
   }
 }

angular/src/directives/control-value-accessors/text-value-accessor.ts

@@ -20,7 +20,7 @@ export class TextValueAccessorDirective extends ValueAccessor {
   }
 
   @HostListener('ionChange', ['$event.target'])
-  _handleInputEvent(el: any): void {
+  _handleInputEvent(el: HTMLIonInputElement | HTMLIonTextareaElement | HTMLIonSearchbarElement): void {
     this.handleChangeEvent(el, el.value);
   }
 }

angular/src/directives/control-value-accessors/value-accessor.ts

@@ -4,6 +4,8 @@ import { Subscription } from 'rxjs';
 
 import { raf } from '../../util/util';
 
+// TODO(FW-2827): types
+
 @Directive()
 export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDestroy {
   private onChange: (value: any) => void = () => {

angular/src/directives/navigation/ion-router-outlet.ts

@@ -30,6 +30,8 @@ import { isComponentFactoryResolver } from '../../util/util';
 import { StackController } from './stack-controller';
 import { RouteView, getUrl } from './stack-utils';
 
+// TODO(FW-2827): types
+
 @Directive({
   selector: 'ion-router-outlet',
   exportAs: 'outlet',

angular/src/directives/navigation/stack-controller.ts

@@ -17,6 +17,8 @@ import {
   toSegments,
 } from './stack-utils';
 
+// TODO(FW-2827): types
+
 export class StackController {
   private views: RouteView[] = [];
   private runningTask?: Promise<any>;

angular/src/directives/navigation/stack-utils.ts

@@ -86,6 +86,7 @@ export interface StackEvent {
   tabSwitch: boolean;
 }
 
+// TODO(FW-2827): types
 export interface RouteView {
   id: number;
   url: string;

angular/src/directives/overlays/modal.ts

@@ -108,6 +108,7 @@ export declare interface IonModal extends Components.IonModal {
   ],
 })
 export class IonModal {
+  // TODO(FW-2827): type
   @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
 
   isCmpOpen: boolean = false;

angular/src/directives/overlays/popover.ts

@@ -99,6 +99,7 @@ export declare interface IonPopover extends Components.IonPopover {
   ],
 })
 export class IonPopover {
+  // TODO(FW-2827): type
   @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
 
   isCmpOpen: boolean = false;

angular/src/providers/angular-delegate.ts

@@ -21,6 +21,8 @@ import { EnvironmentInjector } from '../di/r3_injector';
 import { NavParams } from '../directives/navigation/nav-params';
 import { isComponentFactoryResolver } from '../util/util';
 
+// TODO(FW-2827): types
+
 @Injectable()
 export class AngularDelegate {
   constructor(private zone: NgZone, private appRef: ApplicationRef) {}

angular/src/providers/platform.ts

@@ -3,6 +3,8 @@ import { NgZone, Inject, Injectable } from '@angular/core';
 import { BackButtonEventDetail, KeyboardEventDetail, Platforms, getPlatforms, isPlatform } from '@ionic/core';
 import { Subscription, Subject } from 'rxjs';
 
+// TODO(FW-2827): types
+
 export interface BackButtonEmitter extends Subject<BackButtonEventDetail> {
   subscribeWithPriority(
     priority: number,

angular/src/schematics/utils/config.ts

@@ -4,6 +4,8 @@ import { parse } from 'jsonc-parser';
 
 const CONFIG_PATH = 'angular.json';
 
+// TODO(FW-2827): types
+
 export function readConfig(host: Tree): any {
   const sourceText = host.read(CONFIG_PATH)?.toString('utf-8');
   return JSON.parse(sourceText);

angular/src/types/interfaces.ts

@@ -1,5 +1,5 @@
 export interface IonicGlobal {
-  config?: any;
+  config?: any; // TODO(FW-2827): type
   asyncQueue?: boolean;
 }
 

angular/src/util/overlay.ts

@@ -1,3 +1,5 @@
+// TODO(FW-2827): types
+
 interface ControllerShape<Opts, HTMLElm> {
   create(options: Opts): Promise<HTMLElm>;
   dismiss(data?: any, role?: string, id?: string): Promise<boolean>;

core/src/components/alert/alert-interface.ts

@@ -30,7 +30,7 @@ export interface AlertInput {
   type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
   name?: string;
   placeholder?: string;
-  value?: any;
+  value?: any; // TODO(FW-2832): type
   label?: string;
   checked?: boolean;
   disabled?: boolean;
@@ -60,5 +60,6 @@ export interface AlertButton {
   role?: 'cancel' | 'destructive' | string;
   cssClass?: string | string[];
   id?: string;
+  // TODO(FW-2832): type
   handler?: (value: any) => AlertButtonOverlayHandler | Promise<AlertButtonOverlayHandler>;
 }

core/src/components/alert/alert.tsx

@@ -25,6 +25,8 @@ import { iosLeaveAnimation } from './animations/ios.leave';
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
+// TODO(FW-2832): types
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */

core/src/components/app/app.tsx

@@ -10,7 +10,7 @@ import { isPlatform } from '../../utils/platform';
   styleUrl: 'app.scss',
 })
 export class App implements ComponentInterface {
-  private focusVisible?: any;
+  private focusVisible?: any; // TODO(FW-2832): type
 
   @Element() el!: HTMLElement;
 

core/src/components/checkbox/checkbox.tsx

@@ -114,7 +114,7 @@ export class Checkbox implements ComponentInterface {
     }
   }
 
-  private onClick = (ev: any) => {
+  private onClick = (ev: Event) => {
     ev.preventDefault();
 
     this.setFocus();

core/src/components/content/content.tsx

@@ -21,7 +21,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
   shadow: true,
 })
 export class Content implements ComponentInterface {
-  private watchDog: any;
+  private watchDog: ReturnType<typeof setInterval> | null = null;
   private isScrolling = false;
   private lastScroll = 0;
   private queued = false;
@@ -311,7 +311,7 @@ export class Content implements ComponentInterface {
   }
 
   private onScrollEnd() {
-    clearInterval(this.watchDog);
+    if (this.watchDog) clearInterval(this.watchDog);
     this.watchDog = null;
     if (this.isScrolling) {
       this.isScrolling = false;

core/src/components/datetime/datetime.tsx

@@ -95,6 +95,7 @@ export class Datetime implements ComponentInterface {
   private destroyCalendarListener?: () => void;
   private destroyKeyboardMO?: () => void;
 
+  // TODO(FW-2832): types (DatetimeParts causes some errors that need untangling)
   private minParts?: any;
   private maxParts?: any;
   private todayParts!: DatetimeParts;

core/src/components/footer/footer.tsx

@@ -20,7 +20,7 @@ import { handleFooterFade } from './footer.utils';
 })
 export class Footer implements ComponentInterface {
   private scrollEl?: HTMLElement;
-  private contentScrollCallback: any;
+  private contentScrollCallback?: () => void;
   private keyboardCtrl: KeyboardController | null = null;
 
   @State() private keyboardVisible = false;

core/src/components/header/header.tsx

@@ -29,8 +29,8 @@ import {
 })
 export class Header implements ComponentInterface {
   private scrollEl?: HTMLElement;
-  private contentScrollCallback?: any;
+  private contentScrollCallback?: () => void;
-  private intersectionObserver?: any;
+  private intersectionObserver?: IntersectionObserver;
   private collapsibleMainHeader?: HTMLElement;
   private inheritedAttributes: Attributes = {};
 
@@ -153,9 +153,9 @@ export class Header implements ComponentInterface {
     this.scrollEl = await getScrollElement(contentEl);
 
     const headers = pageEl.querySelectorAll('ion-header');
-    this.collapsibleMainHeader = Array.from(headers).find((header: any) => header.collapse !== 'condense') as
+    this.collapsibleMainHeader = Array.from(headers).find(
-      | HTMLElement
+      (header: HTMLIonHeaderElement) => header.collapse !== 'condense'
-      | undefined;
+    ) as HTMLElement | undefined;
 
     if (!this.collapsibleMainHeader) {
       return;
@@ -177,7 +177,7 @@ export class Header implements ComponentInterface {
      * as well as progressively showing/hiding the main header
      * border as the top-most toolbar collapses or expands.
      */
-    const toolbarIntersection = (ev: any) => {
+    const toolbarIntersection = (ev: IntersectionObserverEntry[]) => {
       handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex, this.scrollEl!);
     };
 

core/src/components/header/header.utils.ts

@@ -40,7 +40,7 @@ export const createHeaderIndex = (headerEl: HTMLElement | undefined): HeaderInde
 
   return {
     el: headerEl,
-    toolbars: Array.from(toolbars).map((toolbar: any) => {
+    toolbars: Array.from(toolbars).map((toolbar: HTMLIonToolbarElement) => {
       const ionTitleEl = toolbar.querySelector('ion-title');
       return {
         el: toolbar,
@@ -86,7 +86,11 @@ export const setToolbarBackgroundOpacity = (headerEl: HTMLIonHeaderElement, opac
   }
 };
 
-const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex, scrollTop: number) => {
+const handleToolbarBorderIntersection = (
+  ev: IntersectionObserverEntry[],
+  mainHeaderIndex: HeaderIndex,
+  scrollTop: number
+) => {
   if (!ev[0].isIntersecting) {
     return;
   }
@@ -113,7 +117,7 @@ const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
  * hide the primary toolbar content and show the scrollable toolbar content
  */
 export const handleToolbarIntersection = (
-  ev: any,
+  ev: any, // TODO(FW-2832): type (IntersectionObserverEntry[] triggers errors which should be sorted)
   mainHeaderIndex: HeaderIndex,
   scrollHeaderIndex: HeaderIndex,
   scrollEl: HTMLElement

core/src/components/item-options/item-options.tsx

@@ -24,7 +24,7 @@ export class ItemOptions implements ComponentInterface {
   /**
    * Emitted when the item has been fully swiped.
    */
-  @Event() ionSwipe!: EventEmitter<any>;
+  @Event() ionSwipe!: EventEmitter<any>; // TODO(FW-2832): type
 
   /** @internal */
   @Method()

core/src/components/item-sliding/item-sliding.tsx

@@ -39,7 +39,7 @@ export class ItemSliding implements ComponentInterface {
   private optsWidthRightSide = 0;
   private optsWidthLeftSide = 0;
   private sides = ItemSide.None;
-  private tmr: number | undefined;
+  private tmr?: ReturnType<typeof setTimeout>;
   private leftOptions?: HTMLIonItemOptionsElement;
   private rightOptions?: HTMLIonItemOptionsElement;
   private optsDirty = true;
@@ -418,7 +418,7 @@ export class ItemSliding implements ComponentInterface {
         if (this.gesture) {
           this.gesture.enable(!this.disabled);
         }
-      }, 600) as any;
+      }, 600);
 
       openSlidingItem = undefined;
       style.transform = '';

core/src/components/item/item.tsx

@@ -177,7 +177,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
 
     const tagName = (ev.target as HTMLElement).tagName;
     const updatedStyles = ev.detail;
-    const newStyles = {} as any;
+    const newStyles = {} as CssClassMap;
     const childStyles = this.itemStyles.get(tagName) || {};
 
     let hasStyleChange = false;
@@ -364,7 +364,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
       routerDirection,
       inheritedAriaAttributes,
     } = this;
-    const childStyles = {} as any;
+    const childStyles = {} as StyleEventDetail;
     const mode = getIonMode(this);
     const clickable = this.isClickable();
     const canActivate = this.canActivate();

core/src/components/loading/loading.tsx

@@ -20,6 +20,8 @@ import { iosLeaveAnimation } from './animations/ios.leave';
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
+// TODO(FW-2832): types
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
@@ -32,7 +34,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   scoped: true,
 })
 export class Loading implements ComponentInterface, OverlayInterface {
-  private durationTimeout: any;
+  private durationTimeout?: ReturnType<typeof setTimeout>;
 
   presented = false;
   lastFocus?: HTMLElement;

core/src/components/menu/menu.tsx

@@ -31,7 +31,7 @@ const focusableQueryString =
   shadow: true,
 })
 export class Menu implements ComponentInterface, MenuI {
-  private animation?: any;
+  private animation?: any; // TODO(FW-2832): type
   private lastOnEnd = 0;
   private gesture?: Gesture;
   private blocker = GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
@@ -257,6 +257,7 @@ export class Menu implements ComponentInterface, MenuI {
 
   @Listen('click', { capture: true })
   onBackdropClick(ev: any) {
+    // TODO(FW-2832): type (CustomEvent triggers errors which should be sorted)
     if (this._isOpen && this.lastOnEnd < ev.timeStamp - 100) {
       const shouldClose = ev.composedPath ? !ev.composedPath().includes(this.menuInnerEl) : false;
 

core/src/components/modal/modal.tsx

@@ -44,6 +44,8 @@ import { createSheetGesture } from './gestures/sheet';
 import { createSwipeToCloseGesture } from './gestures/swipe-to-close';
 import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
 
+// TODO(FW-2832): types
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *

core/src/components/nav/nav-interface.ts

@@ -9,6 +9,8 @@ import type {
 
 import { ViewController } from './view-controller';
 
+// TODO(FW-2832): types
+
 export type NavDirection = 'back' | 'forward';
 
 export type NavComponent = ComponentRef | ViewController;

core/src/components/nav/view-controller.ts

@@ -6,6 +6,8 @@ export const VIEW_STATE_NEW = 1;
 export const VIEW_STATE_ATTACHED = 2;
 export const VIEW_STATE_DESTROYED = 3;
 
+// TODO(FW-2832): types
+
 export class ViewController {
   state = VIEW_STATE_NEW;
   nav?: any;

core/src/components/picker-column-internal/picker-column-internal.tsx

@@ -111,6 +111,7 @@ export class PickerColumnInternal implements ComponentInterface {
 
     const parentEl = this.el.closest('ion-picker-internal') as HTMLIonPickerInternalElement | null;
     if (parentEl !== null) {
+      // TODO(FW-2832): type
       parentEl.addEventListener('ionInputModeChange', (ev: any) => this.inputModeChange(ev));
     }
   }
@@ -231,7 +232,7 @@ export class PickerColumnInternal implements ComponentInterface {
   private initializeScrollListener = () => {
     const { el } = this;
 
-    let timeout: any;
+    let timeout: ReturnType<typeof setTimeout> | undefined;
     let activeEl: HTMLElement | null = this.activeItem;
 
     const scrollCallback = () => {

core/src/components/picker-column/picker-column.tsx

@@ -28,8 +28,8 @@ export class PickerColumnCmp implements ComponentInterface {
   private y = 0;
   private optsEl?: HTMLElement;
   private gesture?: Gesture;
-  private rafId: any;
+  private rafId?: ReturnType<typeof requestAnimationFrame>;
-  private tmrId: any;
+  private tmrId?: ReturnType<typeof setTimeout>;
   private noAnimate = true;
 
   @Element() el!: HTMLElement;
@@ -90,8 +90,8 @@ export class PickerColumnCmp implements ComponentInterface {
   }
 
   disconnectedCallback() {
-    cancelAnimationFrame(this.rafId);
+    if (this.rafId !== undefined) cancelAnimationFrame(this.rafId);
-    clearTimeout(this.tmrId);
+    if (this.tmrId) clearTimeout(this.tmrId);
     if (this.gesture) {
       this.gesture.destroy();
       this.gesture = undefined;
@@ -110,7 +110,7 @@ export class PickerColumnCmp implements ComponentInterface {
     this.velocity = 0;
 
     // set what y position we're at
-    cancelAnimationFrame(this.rafId);
+    if (this.rafId !== undefined) cancelAnimationFrame(this.rafId);
     this.update(y, duration, true);
 
     this.emitColChange();
@@ -251,7 +251,7 @@ export class PickerColumnCmp implements ComponentInterface {
     hapticSelectionStart();
 
     // reset everything
-    cancelAnimationFrame(this.rafId);
+    if (this.rafId !== undefined) cancelAnimationFrame(this.rafId);
     const options = this.col.options;
     let minY = options.length - 1;
     let maxY = 0;

core/src/components/picker-internal/picker-internal.tsx

@@ -24,7 +24,7 @@ export class PickerInternal implements ComponentInterface {
   private highlightEl?: HTMLElement;
   private actionOnClick?: () => void;
   private destroyKeypressListener?: () => void;
-  private singleColumnSearchTimeout?: any;
+  private singleColumnSearchTimeout?: ReturnType<typeof setTimeout>;
 
   @Element() el!: HTMLIonPickerInternalElement;
 
@@ -76,6 +76,7 @@ export class PickerInternal implements ComponentInterface {
    * that focused means we are still in input mode.
    */
   private onFocusOut = (ev: any) => {
+    // TODO(FW-2832): type
     const { relatedTarget } = ev;
 
     if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
@@ -89,6 +90,7 @@ export class PickerInternal implements ComponentInterface {
    * whether to enter/exit input mode.
    */
   private onFocusIn = (ev: any) => {
+    // TODO(FW-2832): type
     const { target } = ev;
 
     /**

core/src/components/picker/picker.tsx

@@ -17,6 +17,8 @@ import { getClassMap } from '../../utils/theme';
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
 
+// TODO(FW-2832): types
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
@@ -29,7 +31,7 @@ import { iosLeaveAnimation } from './animations/ios.leave';
   scoped: true,
 })
 export class Picker implements ComponentInterface, OverlayInterface {
-  private durationTimeout: any;
+  private durationTimeout?: ReturnType<typeof setTimeout>;
   lastFocus?: HTMLElement;
 
   @Element() el!: HTMLIonPickerElement;

core/src/components/popover/animations/ios.enter.ts

@@ -14,6 +14,7 @@ const POPOVER_IOS_BODY_PADDING = 5;
 /**
  * iOS Popover Enter Animation
  */
+// TODO(FW-2832): types
 export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => {
   const { event: ev, size, trigger, reference, side, align } = opts;
   const doc = baseEl.ownerDocument as any;

core/src/components/popover/animations/md.enter.ts

@@ -8,6 +8,7 @@ const POPOVER_MD_BODY_PADDING = 12;
 /**
  * Md Popover Enter Animation
  */
+// TODO(FW-2832): types
 export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => {
   const { event: ev, size, trigger, reference, side, align } = opts;
   const doc = baseEl.ownerDocument as any;

core/src/components/popover/popover.tsx

@@ -29,6 +29,8 @@ import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 import { configureDismissInteraction, configureKeyboardInteraction, configureTriggerInteraction } from './utils';
 
+// TODO(FW-2832): types
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *

core/src/components/popover/utils.ts

@@ -3,7 +3,7 @@ import { getElementRoot, raf } from '../../utils/helpers';
 
 interface InteractionCallback {
   eventName: string;
-  callback: (ev: any) => void;
+  callback: (ev: any) => void; // TODO(FW-2832): type
 }
 
 export interface ReferenceCoordinates {
@@ -169,7 +169,7 @@ export const configureTriggerInteraction = (
    */
   switch (triggerAction) {
     case 'hover':
-      let hoverTimeout: any;
+      let hoverTimeout: ReturnType<typeof setTimeout> | undefined;
 
       triggerCallbacks = [
         {

core/src/components/radio-group/radio-group.tsx

@@ -105,6 +105,7 @@ export class RadioGroup implements ComponentInterface {
 
   @Listen('keydown', { target: 'document' })
   onKeydown(ev: any) {
+    // TODO(FW-2832): type
     const inSelectPopover = !!this.el.closest('ion-select-popover');
 
     if (ev.target && !this.el.contains(ev.target)) {

core/src/components/radio/radio.tsx

@@ -79,6 +79,7 @@ export class Radio implements ComponentInterface {
   /** @internal */
   @Method()
   async setFocus(ev: any) {
+    // TODO(FW-2832): type (using Event triggers a build error due to conflict with Stencil Event import)
     ev.stopPropagation();
     ev.preventDefault();
 

core/src/components/range/range.tsx

@@ -22,6 +22,8 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 
 import type { PinFormatter } from './range-interface';
 
+// TODO(FW-2832): types
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *

core/src/components/refresher/refresher.tsx

@@ -37,7 +37,7 @@ export class Refresher implements ComponentInterface {
   private progress = 0;
   private scrollEl?: HTMLElement;
   private backgroundContentEl?: HTMLElement;
-  private scrollListenerCallback?: any;
+  private scrollListenerCallback?: () => void;
   private gesture?: Gesture;
 
   private pointerDown = false;

core/src/components/refresher/refresher.utils.ts

@@ -26,6 +26,7 @@ export const createPullingAnimation = (
 };
 
 const createBaseAnimation = (pullingRefresherIcon: HTMLElement) => {
+  // TODO(FW-2832): add types/re-evaluate asserting so many things
   const spinner = pullingRefresherIcon.querySelector('ion-spinner') as HTMLElement;
   const circle = spinner!.shadowRoot!.querySelector('circle') as any;
   const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container') as HTMLElement;

core/src/components/reorder-group/reorder-group.tsx

@@ -7,6 +7,8 @@ import { findClosestIonContent, getScrollElement } from '../../utils/content';
 import { raf } from '../../utils/helpers';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
 
+// TODO(FW-2832): types
+
 const enum ReorderGroupState {
   Idle = 0,
   Active = 1,

core/src/components/route/route.tsx

@@ -3,6 +3,8 @@ import { Component, Event, Prop, Watch } from '@stencil/core';
 
 import type { NavigationHookCallback } from './route-interface';
 
+// TODO(FW-2832): types
+
 @Component({
   tag: 'ion-route',
 })

core/src/components/router-outlet/route-outlet.tsx

@@ -29,6 +29,7 @@ import { transition } from '../../utils/transition';
 })
 export class RouterOutlet implements ComponentInterface, NavOutlet {
   private activeEl: HTMLElement | undefined;
+  // TODO(FW-2832): types
   private activeComponent: any;
   private activeParams: any;
   private waitPromise?: Promise<void>;

core/src/components/segment/segment.tsx

@@ -26,7 +26,7 @@ export class Segment implements ComponentInterface {
   private checked?: HTMLIonSegmentButtonElement;
 
   // Value to be emitted when gesture ends
-  private valueAfterGesture?: any;
+  private valueAfterGesture?: string;
 
   @Element() el!: HTMLIonSegmentElement;
 

core/src/components/select-popover/select-popover.tsx

@@ -6,6 +6,8 @@ import type { SelectPopoverOption } from '../../interface';
 import { safeCall } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
 
+// TODO(FW-2832): types
+
 /**
  * @internal
  */

core/src/components/select/select.tsx

@@ -22,6 +22,8 @@ import { watchForOptions } from '../../utils/watch-options';
 
 import type { SelectCompareFn } from './select-interface';
 
+// TODO(FW-2832): types
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *

core/src/components/spinner/spinner-interface.ts

@@ -18,7 +18,7 @@ export interface SpinnerData {
   y2?: number;
   cx?: number;
   cy?: number;
-  style: any;
+  style: any; // TODO(FW-2832): type
   viewBox?: string;
   transform?: string;
 }

core/src/components/spinner/spinner.tsx

@@ -52,7 +52,7 @@ export class Spinner implements ComponentInterface {
     const spinnerName = self.getName();
     const spinner = SPINNERS[spinnerName] ?? SPINNERS['lines'];
     const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
-    const svgs: any[] = [];
+    const svgs: any[] = []; // TODO(FW-2832): type
 
     if (spinner.circles !== undefined) {
       for (let i = 0; i < spinner.circles; i++) {

core/src/components/split-pane/split-pane.tsx

@@ -3,6 +3,8 @@ import { Build, Component, Element, Event, Host, Prop, State, Watch, h } from '@
 
 import { getIonMode } from '../../global/ionic-global';
 
+// TODO(FW-2832): types
+
 const SPLIT_PANE_MAIN = 'split-pane-main';
 const SPLIT_PANE_SIDE = 'split-pane-side';
 const QUERY: { [key: string]: string } = {

core/src/components/toast/toast.tsx

@@ -22,6 +22,8 @@ import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 import type { ToastAttributes, ToastPosition } from './toast-interface';
 
+// TODO(FW-2832): types
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -40,7 +42,7 @@ import type { ToastAttributes, ToastPosition } from './toast-interface';
   shadow: true,
 })
 export class Toast implements ComponentInterface, OverlayInterface {
-  private durationTimeout: any;
+  private durationTimeout?: ReturnType<typeof setTimeout>;
 
   presented = false;
 

core/src/components/toolbar/toolbar.tsx

@@ -60,7 +60,7 @@ export class Toolbar implements ComponentInterface {
 
     const tagName = (ev.target as HTMLElement).tagName;
     const updatedStyles = ev.detail;
-    const newStyles = {} as any;
+    const newStyles = {} as CssClassMap;
     const childStyles = this.childrenStyles.get(tagName) || {};
 
     let hasStyleChange = false;

core/src/components/virtual-scroll/virtual-scroll-interface.ts

@@ -1,3 +1,5 @@
+// TODO(FW-2832): types
+
 export interface Cell {
   i: number;
   index: number;

core/src/components/virtual-scroll/virtual-scroll.tsx

@@ -42,6 +42,8 @@ import {
   updateVDom,
 } from './virtual-scroll-utils';
 
+// TODO(FW-2832): types
+
 @Component({
   tag: 'ion-virtual-scroll',
   styleUrl: 'virtual-scroll.scss',

core/src/global/config.ts

@@ -1,5 +1,7 @@
 import type { IonicConfig } from '../interface';
 
+// TODO(FW-2832): types
+
 export class Config {
   private m = new Map<keyof IonicConfig, any>();
 

core/src/global/ionic-global.ts

@@ -5,6 +5,8 @@ import { isPlatform, setupPlatforms } from '../utils/platform';
 
 import { config, configFromSession, configFromURL, saveConfig } from './config';
 
+// TODO(FW-2832): types
+
 declare const Context: any;
 
 let defaultMode: Mode;

core/src/utils/animation/animation-interface.ts

@@ -1,3 +1,5 @@
+// TODO(FW-2832): types
+
 export interface Animation {
   parentAnimation: Animation | undefined;
   elements: HTMLElement[];

core/src/utils/animation/animation-utils.ts

@@ -38,8 +38,8 @@ const convertCamelCaseToHypen = (str: string) => {
 
 export const getAnimationPrefix = (el: HTMLElement): string => {
   if (animationPrefix === undefined) {
-    const supportsUnprefixed = (el.style as any).animationName !== undefined;
+    const supportsUnprefixed = el.style.animationName !== undefined;
-    const supportsWebkitPrefix = (el.style as any).webkitAnimationName !== undefined;
+    const supportsWebkitPrefix = el.style.webkitAnimationName !== undefined;
     animationPrefix = !supportsUnprefixed && supportsWebkitPrefix ? '-webkit-' : '';
   }
   return animationPrefix;
@@ -57,7 +57,7 @@ export const removeStyleProperty = (element: HTMLElement, propertyName: string)
 
 export const animationEnd = (el: HTMLElement | null, callback: (ev?: TransitionEvent) => void) => {
   let unRegTrans: (() => void) | undefined;
-  const opts: any = { passive: true };
+  const opts: AddEventListenerOptions = { passive: true };
 
   const unregister = () => {
     if (unRegTrans) {
@@ -85,6 +85,7 @@ export const animationEnd = (el: HTMLElement | null, callback: (ev?: TransitionE
   return unregister;
 };
 
+// TODO(FW-2832): type
 export const generateKeyframeRules = (keyframes: any[] = []) => {
   return keyframes
     .map((keyframe) => {
@@ -115,6 +116,7 @@ export const generateKeyframeName = (keyframeRules: string) => {
 
 export const getStyleContainer = (element: HTMLElement) => {
   // getRootNode is not always available in SSR environments.
+  // TODO(FW-2832): types
   const rootNode = element.getRootNode !== undefined ? (element.getRootNode() as any) : element;
   return rootNode.head || rootNode;
 };

core/src/utils/animation/animation.ts

@@ -23,6 +23,8 @@ import {
   setStyleProperty,
 } from './animation-utils';
 
+// TODO(FW-2832): types
+
 interface AnimationOnFinishCallback {
   c: AnimationLifecycle;
   o?: AnimationCallbackOptions;

core/src/utils/config.ts

@@ -201,6 +201,7 @@ export interface IonicConfig {
   hideCaretOnScroll?: boolean;
 
   // INTERNAL configs
+  // TODO(FW-2832): types
   persistConfig?: boolean;
   _forceStatusbarPadding?: boolean;
   _testing?: boolean;

core/src/utils/content/index.ts

@@ -62,6 +62,7 @@ export const findClosestIonContent = (el: Element) => {
  * Scrolls to the top of the element. If an `ion-content` is found, it will scroll
  * using the public API `scrollToTop` with a duration.
  */
+// TODO(FW-2832): type
 export const scrollToTop = (el: HTMLElement, durationMs: number): Promise<any> => {
   if (isIonContent(el)) {
     const content = el as HTMLIonContentElement;

core/src/utils/focus-visible.ts

@@ -32,8 +32,8 @@ export const startFocusVisible = (rootEl?: HTMLElement) => {
     setFocus([]);
   };
 
-  const onKeydown = (ev: any) => {
+  const onKeydown = (ev: Event) => {
-    keyboardMode = FOCUS_KEYS.includes(ev.key);
+    keyboardMode = FOCUS_KEYS.includes((ev as KeyboardEvent).key);
     if (!keyboardMode) {
       setFocus([]);
     }
@@ -41,6 +41,7 @@ export const startFocusVisible = (rootEl?: HTMLElement) => {
   const onFocusin = (ev: Event) => {
     if (keyboardMode && ev.composedPath !== undefined) {
       const toFocus = ev.composedPath().filter((el: any) => {
+        // TODO(FW-2832): type
         if (el.classList) {
           return el.classList.contains(ION_FOCUSABLE);
         }

core/src/utils/framework-delegate.ts

@@ -2,6 +2,8 @@ import type { ComponentRef, FrameworkDelegate } from '../interface';
 
 import { componentOnReady } from './helpers';
 
+// TODO(FW-2832): types
+
 export const attachComponent = async (
   delegate: FrameworkDelegate | undefined,
   container: Element,

core/src/utils/gesture/index.ts

@@ -2,6 +2,8 @@ import { GESTURE_CONTROLLER } from './gesture-controller';
 import { createPointerEvents } from './pointer-events';
 import { createPanRecognizer } from './recognizers';
 
+// TODO(FW-2832): types
+
 export const createGesture = (config: GestureConfig): Gesture => {
   let hasCapturedPan = false;
   let hasStartedPan = false;

core/src/utils/gesture/listener.ts

@@ -1,5 +1,5 @@
 export const addEventListener = (
-  el: any,
+  el: any, // TODO(FW-2832): type
   eventName: string,
   callback: EventListenerOrEventListenerObject,
   opts: {

core/src/utils/gesture/pointer-events.ts

@@ -2,6 +2,7 @@ import { addEventListener } from './listener';
 
 const MOUSE_WAIT = 2000;
 
+// TODO(FW-2832): types
 export const createPointerEvents = (
   el: Node,
   pointerDown: any,

core/src/utils/hardware-back-button.ts

@@ -1,5 +1,6 @@
 import type { BackButtonEvent } from '../interface';
 
+// TODO(FW-2832): type
 type Handler = (processNextHandler: () => void) => Promise<any> | void | null;
 
 interface HandlerRegister {

core/src/utils/helpers.ts

@@ -2,6 +2,8 @@ import type { EventEmitter } from '@stencil/core';
 
 import type { Side } from '../interface';
 
+// TODO(FW-2832): types
+
 declare const __zone_symbol__requestAnimationFrame: any;
 declare const requestAnimationFrame: any;
 

core/src/utils/input-shims/hacks/common.ts

@@ -18,6 +18,7 @@ export const relocateInput = (
   }
 };
 
+// TODO(FW-2832): type
 export const isFocused = (input: HTMLInputElement | HTMLTextAreaElement): boolean => {
   return input === (input as any).getRootNode().activeElement;
 };

core/src/utils/input-shims/hacks/input-blurring.ts

@@ -15,7 +15,7 @@ export const enableInputBlurring = () => {
     focused = true;
   };
 
-  const onTouchend = (ev: any) => {
+  const onTouchend = (ev: TouchEvent) => {
     // if app did scroll return early
     if (didScroll) {
       didScroll = false;

core/src/utils/input-shims/hacks/scroll-assist.ts

@@ -12,7 +12,7 @@ export const enableScrollAssist = (
   keyboardHeight: number,
   disableClonedInput = false
 ) => {
-  let coord: any;
+  let coord: { x: number; y: number } | undefined;
   const touchStart = (ev: Event) => {
     coord = pointerCoord(ev);
   };
@@ -75,7 +75,7 @@ const jsSetFocus = async (
   raf(() => componentEl.click());
 
   if (typeof window !== 'undefined') {
-    let scrollContentTimeout: any;
+    let scrollContentTimeout: ReturnType<typeof setTimeout>;
     const scrollContent = async () => {
       // clean up listeners and timeouts
       if (scrollContentTimeout !== undefined) {

core/src/utils/input-shims/hacks/scroll-data.ts

@@ -13,7 +13,7 @@ export const getScrollData = (componentEl: HTMLElement, contentEl: HTMLElement,
     itemEl.getBoundingClientRect(),
     contentEl.getBoundingClientRect(),
     keyboardHeight,
-    (componentEl as any).ownerDocument.defaultView.innerHeight
+    (componentEl as any).ownerDocument.defaultView.innerHeight // TODO(FW-2832): type
   );
 };
 

core/src/utils/input-shims/hacks/scroll-padding.ts

@@ -5,6 +5,7 @@ const PADDING_TIMER_KEY = '$ionPaddingTimer';
 export const enableScrollPadding = (keyboardHeight: number) => {
   const doc = document;
 
+  // TODO(FW-2832): types
   const onFocusin = (ev: any) => {
     setScrollPadding(ev.target, keyboardHeight);
   };

core/src/utils/input-shims/input-shims.ts

@@ -101,6 +101,8 @@ export const startInputShims = (config: Config, platform: 'ios' | 'android') =>
     registerInput(input);
   }
 
+  // TODO(FW-2832): types
+
   doc.addEventListener('ionInputDidLoad', ((ev: InputEvent) => {
     registerInput(ev.detail);
   }) as any);

core/src/utils/keyboard/keyboard.ts

@@ -2,6 +2,8 @@ export const KEYBOARD_DID_OPEN = 'ionKeyboardDidShow';
 export const KEYBOARD_DID_CLOSE = 'ionKeyboardDidHide';
 const KEYBOARD_THRESHOLD = 150;
 
+// TODO(FW-2832): types
+
 let previousVisualViewport: any = {};
 let currentVisualViewport: any = {};
 

core/src/utils/menu-controller/index.ts

@@ -166,7 +166,7 @@ const createMenuController = () => {
   };
 
   const _createAnimation = (type: string, menuCmp: MenuI) => {
-    const animationBuilder = menuAnimations.get(type) as any;
+    const animationBuilder = menuAnimations.get(type) as any; // TODO(FW-2832): type
     if (!animationBuilder) {
       throw new Error('animation not registered');
     }
@@ -209,6 +209,7 @@ const createMenuController = () => {
 
   if (typeof document !== 'undefined') {
     document.addEventListener('ionBackButton', (ev: any) => {
+      // TODO(FW-2832): type
       const openMenu = _getOpenSync();
       if (openMenu) {
         (ev as BackButtonEvent).detail.register(MENU_BACK_BUTTON_PRIORITY, () => {

core/src/utils/platform.ts

@@ -2,6 +2,8 @@ import { config } from '../global/config';
 
 export type Platforms = keyof typeof PLATFORMS_MAP;
 
+// TODO(FW-2832): types
+
 interface IsPlatformSignature {
   (plt: Platforms): boolean;
   (win: Window, plt: Platforms): boolean;

core/src/utils/sanitization/index.ts

@@ -82,6 +82,7 @@ export const sanitizeDOMString = (untrustedString: IonicSafeString | string | un
  * and then recursively dig down into any child elements to
  * clean those up as well
  */
+// TODO(FW-2832): type (using Element triggers other type errors as well)
 const sanitizeElement = (element: any) => {
   // IE uses childNodes, so ignore nodes that are not elements
   if (element.nodeType && element.nodeType !== 1) {
@@ -123,6 +124,7 @@ const sanitizeElement = (element: any) => {
  * IE doesn't always support .children
  * so we revert to .childNodes instead
  */
+// TODO(FW-2832): type
 const getElementChildren = (el: any) => {
   return el.children != null ? el.children : el.childNodes;
 };

core/src/utils/tap-click/index.ts

@@ -7,7 +7,7 @@ export const startTapClick = (config: Config) => {
 
   let activatableEle: HTMLElement | undefined;
   let activeRipple: Promise<() => void> | undefined;
-  let activeDefer: any;
+  let activeDefer: ReturnType<typeof setTimeout> | undefined;
 
   const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
   const clearDefers = new WeakMap<HTMLElement, any>();
@@ -43,7 +43,7 @@ export const startTapClick = (config: Config) => {
   };
 
   const cancelActive = () => {
-    clearTimeout(activeDefer);
+    if (activeDefer) clearTimeout(activeDefer);
     activeDefer = undefined;
     if (activatableEle) {
       removeActivated(false);
@@ -67,7 +67,7 @@ export const startTapClick = (config: Config) => {
     if (el && el === activatableEle) {
       return;
     }
-    clearTimeout(activeDefer);
+    if (activeDefer) clearTimeout(activeDefer);
     activeDefer = undefined;
 
     const { x, y } = pointerCoord(ev);
@@ -163,6 +163,7 @@ export const startTapClick = (config: Config) => {
   doc.addEventListener('mouseup', onMouseUp, true);
 };
 
+// TODO(FW-2832): type
 const getActivatableTarget = (ev: UIEvent): any => {
   if (ev.composedPath !== undefined) {
     /**

core/src/utils/transition/index.ts

@@ -12,6 +12,8 @@ import { componentOnReady, raf } from '../helpers';
 const iosTransitionAnimation = () => import('./ios.transition');
 const mdTransitionAnimation = () => import('./md.transition');
 
+// TODO(FW-2832): types
+
 export const transition = (opts: TransitionOptions): Promise<TransitionResult> => {
   return new Promise((resolve, reject) => {
     writeTask(() => {

core/src/utils/transition/ios.transition.ts

@@ -5,6 +5,8 @@ import { getIonPageElement } from '../transition';
 
 const DURATION = 540;
 
+// TODO(FW-2832): types
+
 const getClonedElement = (tagName: string): any => {
   return document.querySelector(`${tagName}.ion-cloned-element`) as any;
 };

core/src/utils/watch-options.ts

@@ -1,3 +1,5 @@
+// TODO(FW-2832): types
+
 export const watchForOptions = <T extends HTMLElement>(
   containerEl: HTMLElement,
   tagName: string,

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -12,6 +12,8 @@ import { matchPath } from 'react-router-dom';
 
 import { clonePageElement } from './clonePageElement';
 
+// TODO(FW-2959): types
+
 interface StackManagerProps {
   routeInfo: RouteInfo;
 }

packages/react/src/components/CreateAnimation.tsx

@@ -9,6 +9,8 @@ import {
 } from '@ionic/core/components';
 import React, { PropsWithChildren } from 'react';
 
+// TODO(FW-2959): types
+
 interface PartialPropertyValue {
   property: string;
   value: any;

packages/react/src/components/IonActionSheet.tsx

@@ -21,6 +21,7 @@ export interface ActionSheetOptions extends Omit<ActionSheetOptionsCore, 'button
 }
 
 const actionSheetController = {
+  // TODO(FW-2959): type
   create: (options: ActionSheetOptions) => actionSheetControllerCore.create(options as any),
   dismiss: (data?: any, role?: string | undefined, id?: string | undefined) =>
     actionSheetControllerCore.dismiss(data, role, id),

packages/react/src/components/IonApp.tsx

@@ -15,7 +15,7 @@ type Props = LocalJSX.IonApp &
 
 export const IonApp = /*@__PURE__*/ (() =>
   class extends React.Component<Props> {
-    addOverlayCallback?: (id: string, overlay: any, containerElement: HTMLDivElement) => void;
+    addOverlayCallback?: (id: string, overlay: ReactComponentOrElement, containerElement: HTMLDivElement) => void;
     removeOverlayCallback?: (id: string) => void;
 
     constructor(props: Props) {

packages/react/src/components/IonOverlayManager.tsx

@@ -27,7 +27,7 @@ export const IonOverlayManager: React.FC<IonOverlayManagerProps> = ({
 }) => {
   type OverlaysList = {
     [key: string]: {
-      component: any;
+      component: any; // TODO(FW-2959): type
       containerElement: HTMLDivElement;
     };
   };

packages/react/src/components/IonRoute.tsx

@@ -6,7 +6,7 @@ export interface IonRouteProps {
   path?: string;
   exact?: boolean;
   show?: boolean;
-  render: (props?: any) => JSX.Element;
+  render: (props?: any) => JSX.Element; // TODO(FW-2959): type
   disableIonPageManagement?: boolean;
 }
 

packages/react/src/components/IonRouterContext.tsx

@@ -19,7 +19,7 @@ export interface IonRouterContextState {
 }
 
 export const IonRouterContext = React.createContext<IonRouterContextState>({
-  routeInfo: undefined as any,
+  routeInfo: undefined as any, // TODO(FW-2959): type
   push: () => {
     throw new Error('An Ionic Router is required for IonRouterContext');
   },

packages/react/src/components/createInlineOverlayComponent.tsx

@@ -10,6 +10,8 @@ import {
 } from './react-component-lib/utils';
 import { createForwardRef } from './utils';
 
+// TODO(FW-2959): types
+
 type InlineOverlayState = {
   isOpen: boolean;
 };

packages/react/src/components/createRoutingComponent.tsx

@@ -15,6 +15,8 @@ import {
 } from './react-component-lib/utils';
 import { createForwardRef } from './utils';
 
+// TODO(FW-2959): types
+
 interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
   forwardedRef?: React.ForwardedRef<ElementType>;
   href?: string;

packages/react/src/components/navigation/IonTabBar.tsx

@@ -35,6 +35,8 @@ interface IonTabBarState {
   tabs: { [key: string]: TabUrls };
 }
 
+// TODO(FW-2959): types
+
 class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarState> {
   context!: React.ContextType<typeof NavContext>;
 

packages/react/src/components/navigation/IonTabButton.tsx

@@ -9,7 +9,7 @@ type Props = LocalJSX.IonTabButton &
   IonicReactProps & {
     routerOptions?: RouterOptions;
     ref?: React.Ref<HTMLIonTabButtonElement>;
-    onClick?: (e: any) => void;
+    onClick?: (e: Event) => void;
   };
 
 export const IonTabButton = /*@__PURE__*/ (() =>

packages/react/src/components/navigation/IonTabs.tsx

@@ -15,6 +15,8 @@ class IonTabsElement extends HTMLElementSSR {
   }
 }
 
+// TODO(FW-2959): types
+
 if (typeof (window as any) !== 'undefined' && window.customElements) {
   const element = window.customElements.get('ion-tabs');
   if (!element) {

packages/react/src/components/utils/index.tsx

@@ -13,7 +13,7 @@ export type IonicReactExternalProps<PropType, ElementType> = PropType &
   IonicReactProps;
 
 export const createForwardRef = <PropType, ElementType>(
-  ReactComponent: any,
+  ReactComponent: any, // TODO(FW-2959): type
   displayName: string
 ) => {
   const forwardRef = (