From 4fde5f07f624f0e1818ac57e896d6936353693da Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 8 Jan 2024 10:22:34 -0500 Subject: [PATCH] chore: add strong types in several places (#28781) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Issue number: Internal --------- ## What is the current behavior? 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? - 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. ## Other information --- core/src/components/menu/menu.tsx | 2 +- .../components/spinner/spinner-interface.ts | 2 +- core/src/components/spinner/spinner.tsx | 2 +- core/src/components/split-pane/split-pane.tsx | 8 ++++---- core/src/utils/helpers.ts | 8 ++++---- core/src/utils/transition/ios.transition.ts | 18 +++++++++--------- 6 files changed, 20 insertions(+), 20 deletions(-) diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 4925051837..9fbb4a3bff 100644 --- a/core/src/components/menu/menu.tsx +++ b/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'); } diff --git a/core/src/components/spinner/spinner-interface.ts b/core/src/components/spinner/spinner-interface.ts index 0037163378..f2ab24691e 100644 --- a/core/src/components/spinner/spinner-interface.ts +++ b/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; } diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx index d937f4fb0a..61439f6021 100644 --- a/core/src/components/spinner/spinner.tsx +++ b/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++) { diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx index decd5d7a59..bd251864b5 100644 --- a/core/src/components/split-pane/split-pane.tsx +++ b/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); - this.rmL = () => (mediaList as any).removeListener(callback as any); + mediaList.addListener(callback as any); + this.rmL = () => mediaList.removeListener(callback as any); this.visible = mediaList.matches; } } diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts index ee5d8bcd10..1d92c55a58 100644 --- a/core/src/utils/helpers.ts +++ b/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 requestAnimationFrame: any; +declare const __zone_symbol__requestAnimationFrame: typeof window.requestAnimationFrame; +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); } diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index 107e305334..6d7da125fa 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -7,8 +7,8 @@ const DURATION = 540; // TODO(FW-2832): types -const getClonedElement = (tagName: string): any => { - return document.querySelector(`${tagName}.ion-cloned-element`) as any; +const getClonedElement = (tagName: string) => { + return document.querySelector(`${tagName}.ion-cloned-element`); }; export const shadow = (el: T): ShadowRoot | T => { @@ -59,8 +59,8 @@ const createLargeTitleTransition = ( rootAnimation: Animation, rtl: boolean, backDirection: boolean, - enteringEl: any, - leavingEl: any + enteringEl: HTMLElement, + 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('ion-back-button')!; - const clonedBackButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text'); - const clonedBackButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon'); + const clonedBackButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text')!; + 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('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%';