chore: add strong types in several places (#28781)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

As part of FW-2832 the team has an initiative to remove much of the
`any` usage in favor of stronger types. This will make modifications to
this codebase safer as we will have access to proper type checking.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removed several `any` usages in favor of stronger types.

Note that not all of the `any` types within these files have been
removed. I mainly stuck to the low hanging fruit 😄

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

I intentionally made type changes that do not impact public APIs. Any
incorrect type changes would cause our CI checks to fail.

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

core/src/components/menu/menu.tsx

@@ -190,7 +190,7 @@ export class Menu implements ComponentInterface, MenuI {
   async connectedCallback() {
     // TODO: connectedCallback is fired in CE build
     // before WC is defined. This needs to be fixed in Stencil.
-    if (typeof (customElements as any) !== 'undefined' && (customElements as any) != null) {
+    if (typeof customElements !== 'undefined' && customElements != null) {
       await customElements.whenDefined('ion-menu');
     }
 

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

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

core/src/components/spinner/spinner.tsx

@@ -54,7 +54,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[] = []; // TODO(FW-2832): type
+    const svgs: SVGElement[] = [];
 
     if (spinner.circles !== undefined) {
       for (let i = 0; i < spinner.circles; i++) {

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

@@ -25,7 +25,7 @@ const QUERY: { [key: string]: string } = {
   shadow: true,
 })
 export class SplitPane implements ComponentInterface {
-  private rmL: any;
+  private rmL?: () => void;
 
   @Element() el!: HTMLElement;
   @State() visible = false;
@@ -65,7 +65,7 @@ export class SplitPane implements ComponentInterface {
   async connectedCallback() {
     // TODO: connectedCallback is fired in CE build
     // before WC is defined. This needs to be fixed in Stencil.
-    if (typeof (customElements as any) !== 'undefined' && (customElements as any) != null) {
+    if (typeof customElements !== 'undefined' && customElements != null) {
       await customElements.whenDefined('ion-split-pane');
     }
     this.styleChildren();
@@ -119,8 +119,8 @@ export class SplitPane implements ComponentInterface {
       };
 
       const mediaList = window.matchMedia(mediaQuery);
-      (mediaList as any).addListener(callback as any);
+      mediaList.addListener(callback as any);
-      this.rmL = () => (mediaList as any).removeListener(callback as any);
+      this.rmL = () => mediaList.removeListener(callback as any);
       this.visible = mediaList.matches;
     }
   }

core/src/utils/helpers.ts

@@ -4,8 +4,8 @@ import type { Side } from '../components/menu/menu-interface';
 
 // TODO(FW-2832): types
 
-declare const __zone_symbol__requestAnimationFrame: any;
+declare const __zone_symbol__requestAnimationFrame: typeof window.requestAnimationFrame;
-declare const requestAnimationFrame: any;
+declare const requestAnimationFrame: typeof window.requestAnimationFrame;
 
 export const transitionEndAsync = (el: HTMLElement | null, expectedDuration = 0) => {
   return new Promise((resolve) => {
@@ -23,7 +23,7 @@ export const transitionEndAsync = (el: HTMLElement | null, expectedDuration = 0)
 const transitionEnd = (el: HTMLElement | null, expectedDuration = 0, callback: (ev?: TransitionEvent) => void) => {
   let unRegTrans: (() => void) | undefined;
   let animationTimeout: any;
-  const opts: any = { passive: true };
+  const opts: AddEventListenerOptions = { passive: true };
   const ANIMATION_FALLBACK_TIMEOUT = 500;
 
   const unregister = () => {
@@ -240,7 +240,7 @@ export const getElementRoot = (el: HTMLElement, fallback: HTMLElement = el) => {
  * Patched version of requestAnimationFrame that avoids ngzone
  * Use only when you know ngzone should not run
  */
-export const raf = (h: any) => {
+export const raf = (h: FrameRequestCallback) => {
   if (typeof __zone_symbol__requestAnimationFrame === 'function') {
     return __zone_symbol__requestAnimationFrame(h);
   }

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

@@ -7,8 +7,8 @@ const DURATION = 540;
 
 // TODO(FW-2832): types
 
-const getClonedElement = (tagName: string): any => {
+const getClonedElement = <T extends HTMLIonBackButtonElement | HTMLIonTitleElement>(tagName: string) => {
-  return document.querySelector(`${tagName}.ion-cloned-element`) as any;
+  return document.querySelector<T>(`${tagName}.ion-cloned-element`);
 };
 
 export const shadow = <T extends Element>(el: T): ShadowRoot | T => {
@@ -59,8 +59,8 @@ const createLargeTitleTransition = (
   rootAnimation: Animation,
   rtl: boolean,
   backDirection: boolean,
-  enteringEl: any,
+  enteringEl: HTMLElement,
-  leavingEl: any
+  leavingEl: HTMLElement | undefined
 ) => {
   const enteringBackButton = getBackButton(enteringEl, backDirection);
   const leavingLargeTitle = getLargeTitle(leavingEl);
@@ -268,10 +268,10 @@ const animateBackButton = (
   const enteringBackButtonIconAnimation = createAnimation();
   const enteringBackButtonAnimation = createAnimation();
 
-  const clonedBackButtonEl = getClonedElement('ion-back-button');
+  const clonedBackButtonEl = getClonedElement<HTMLIonBackButtonElement>('ion-back-button')!;
 
-  const clonedBackButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text');
+  const clonedBackButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text')!;
-  const clonedBackButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
+  const clonedBackButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon')!;
 
   clonedBackButtonEl.text = backButtonEl.text;
   clonedBackButtonEl.mode = backButtonEl.mode;
@@ -424,7 +424,7 @@ const animateLargeTitle = (
 
   const KEYFRAMES = backDirection ? BACKWARDS_KEYFRAMES : FORWARDS_KEYFRAMES;
 
-  const clonedTitleEl = getClonedElement('ion-title');
+  const clonedTitleEl = getClonedElement<HTMLIonTitleElement>('ion-title')!;
   const clonedLargeTitleAnimation = createAnimation();
 
   clonedTitleEl.innerText = largeTitleEl.innerText;
@@ -468,7 +468,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
     const CENTER = '0%';
     const OFF_OPACITY = 0.8;
 
-    const isRTL = (navEl.ownerDocument as any).dir === 'rtl';
+    const isRTL = navEl.ownerDocument.dir === 'rtl';
     const OFF_RIGHT = isRTL ? '-99.5%' : '99.5%';
     const OFF_LEFT = isRTL ? '33%' : '-33%';