Merge pull request #4579 from thematters/chore/tighten-types

src/common/utils/comment.ts

@@ -15,6 +15,10 @@ interface Comment {
   } | null
 }
 
+type Response = {
+  articleState?: string
+}
+
 const filterComment = (comment: Comment) => {
   // skip if comment's state is active or collapse
   if (
@@ -55,15 +59,17 @@ export function filterComments<T>(comments: Comment[]): T[] {
  *
  * @param responses
  */
-export function filterResponses<T>(responses: any[]): T[] {
-  return responses.filter((response) => {
+export function filterResponses<T extends Response | Comment>(
+  responses: T[]
+): T[] {
+  return responses.filter((response: T) => {
     // article
     if (_has(response, 'articleState')) {
       return true
     }
 
     // comment
-    return filterComment(response)
+    return filterComment(response as Comment)
   })
 }
 

src/common/utils/resolvers/clientPreference.ts

@@ -1,4 +1,4 @@
-const clientPreferenceResolver = (_: any) => {
+const clientPreferenceResolver = (_: unknown) => {
   return {
     __typename: 'ClientPreference',
     id: 'local',

src/common/utils/resolvers/lastFetchRandom.ts

@@ -1,4 +1,4 @@
-const lastFetchRandomResolver = (_: any) => {
+const lastFetchRandomResolver = (_: unknown) => {
   // time-based random for better homepage UX on SSR
   const minutes = new Date().getMinutes()
   const max = 10

src/common/utils/url.ts

@@ -2,6 +2,10 @@ export { default as isUrl } from 'validator/lib/isURL'
 
 import { URL_COLLECTION_DETAIL } from '../enums'
 
+type Sorter = {
+  [key: string]: string
+}
+
 export const parseURL = (url: string) => {
   const parser = document.createElement('a')
 
@@ -85,7 +89,7 @@ export const toSizedImageURL = ({
 }
 
 export const parseSorter = (sorterStr: string) => {
-  const sorter: { [key: string]: string } = {}
+  const sorter: Sorter = {}
   if (sorterStr === '') {
     return sorter
   }
@@ -101,7 +105,7 @@ export const parseSorter = (sorterStr: string) => {
   return sorter
 }
 
-export const stringifySorter = (sorter: any) => {
+export const stringifySorter = (sorter: Sorter) => {
   let sorterStr = ''
   const keys = Object.keys(sorter)
   keys.map((key, index) => {

src/components/Editor/Article/FloatingMenu/UploadAudioButton.tsx

@@ -17,7 +17,7 @@ import styles from './styles.module.css'
 export type UploadAudioButtonProps = {
   editor: Editor
   upload: (input: {
-    file?: any
+    file?: File
     url?: string
     type?: ASSET_TYPE.embed | ASSET_TYPE.embedaudio
   }) => Promise<{

src/components/Editor/Article/FloatingMenu/UploadImageButton.tsx

@@ -14,7 +14,7 @@ import styles from './styles.module.css'
 export type UploadImageButtonProps = {
   editor: Editor
   upload: (input: {
-    file?: any
+    file?: File
     url?: string
     type?: ASSET_TYPE.embed | ASSET_TYPE.embedaudio
     mime?: string

src/components/Error/index.tsx

@@ -10,7 +10,7 @@ import styles from './styles.module.css'
 const isProd = process.env.NEXT_PUBLIC_RUNTIME_ENV === 'production'
 
 interface ErrorProps {
-  error?: any
+  error?: Error
   type?: 'network' | 'server' | 'not_found'
   message?: string | React.ReactNode
 }

src/components/Form/AmountInput/index.tsx

@@ -27,7 +27,7 @@ type AmountInputProps = {
     HTMLInputElement
   >
 
-const AmountInput = forwardRef(
+const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
   (
     {
       name,
@@ -45,8 +45,8 @@ const AmountInput = forwardRef(
       spacingBottom,
 
       ...inputProps
-    }: AmountInputProps,
-    ref: any
+    },
+    ref
   ) => {
     const fieldId = `field-${name}`
     const fieldMsgId = `field-msg-${name}`

src/components/Forms/PaymentForm/ResetPassword/index.tsx

@@ -40,7 +40,10 @@ const PaymentResetPasswordForm = ({
     baseResetPasswordData
   )
 
-  const resetPasswordRequestCallback = ({ email, codeId }: any) => {
+  const resetPasswordRequestCallback = ({
+    email,
+    codeId,
+  }: ResetPasswordData) => {
     setResetPasswordData({ ...resetPasswordData, email, codeId })
     forward('resetPasswordConfirm')
   }

src/components/Hook/useCarousel.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
-export const useCarousel = (action: any, delay: number) => {
+export const useCarousel = (action: () => void, delay: number) => {
   const [running, setRunning] = useState(false)
   const savedAction = useRef(action)
   const stop = useCallback(() => setRunning(false), [setRunning])
@@ -15,19 +15,17 @@ export const useCarousel = (action: any, delay: number) => {
       return
     }
 
-    let instance = 0
+    let instance: ReturnType<typeof setTimeout>
     const tick = () => {
       if (!running) {
         return clearTimeout(instance)
       }
 
       savedAction.current()
 
-      // @ts-ignore
       requestAnimationFrame(() => (instance = setTimeout(tick, delay)))
     }
 
-    // @ts-ignore
     requestAnimationFrame(() => (instance = setTimeout(tick, delay)))
 
     return () => {

src/components/Hook/useColorThief.tsx

@@ -34,8 +34,8 @@ export const useColorThief = () => {
             hsl[1] * 100 + ''
           ).toFixed(2)}%, 30%, 1)`
         )
-      } catch (error: any) {
-        if (error.name === 'SecurityError') {
+      } catch (error) {
+        if (isSecurityError(error)) {
           // Throws this error in Firefox
           setTimeout(() => {
             if (tryGetColorTime > 0) {
@@ -48,6 +48,10 @@ export const useColorThief = () => {
     })
   }
 
+  function isSecurityError(error: unknown): error is DOMException {
+    return error instanceof DOMException && error.name === 'SecurityError'
+  }
+
   const getColor = () => {
     const $img = nodeRef.current?.querySelector('img') as HTMLImageElement
     if ($img?.complete) {

src/components/Hook/useNativeEventListener.ts

@@ -13,23 +13,23 @@ import { useEffect } from 'react'
  *
  */
 
-export function useNativeEventListener(
+export function useNativeEventListener<T extends Event>(
   event: string,
-  action: any,
-  element?: any
+  action: (evt: T) => void,
+  element?: EventTarget
 ) {
-  const eventAction = (eventInstance: Event) => action(eventInstance)
+  const eventAction = (eventInstance: T) => action(eventInstance)
 
   useEffect(() => {
     const target = element || window
     if (!target) {
       return
     }
 
-    target.addEventListener(event, eventAction)
+    target.addEventListener(event, eventAction as EventListener) // TSC is not smart enough here to know yet
 
     return () => {
-      target.removeEventListener(event, eventAction)
+      target.removeEventListener(event, eventAction as EventListener)
     }
   })
 }

src/components/Hook/useOutsideClick.ts

@@ -1,26 +1,26 @@
 import { useEffect } from 'react'
 
-export const useOutsideClick = (
+export const useOutsideClick = <T extends Event>(
   node: React.RefObject<HTMLElement>,
-  action: any
+  action: (event: T) => void
 ) => {
   useEffect(() => {
     if (!action) {
       return
     }
 
-    const listener = (event: any) => {
+    const listener = (event: T) => {
       if (!node.current || node.current.contains(event.target as Node)) {
         return
       }
       action(event)
     }
-    document.addEventListener('mousedown', listener)
-    document.addEventListener('touchstart', listener)
+    document.addEventListener('mousedown', listener as EventListener)
+    document.addEventListener('touchstart', listener as EventListener)
 
     return () => {
-      document.removeEventListener('mousedown', listener)
-      document.removeEventListener('touchstart', listener)
+      document.removeEventListener('mousedown', listener as EventListener)
+      document.removeEventListener('touchstart', listener as EventListener)
     }
   }, [node, action])
 }

src/components/Hook/useUnloadConfirm.tsx

@@ -33,14 +33,14 @@ export const useUnloadConfirm = ({
     throw "Abort route change by user's confirmation."
   }
 
-  const onBeforeUnload = (event: any) => {
+  const onBeforeUnload = (event: Event) => {
     if (!blockRef.current) {
       return null
     }
 
     // legacy browsers
     if (event) {
-      event.returnValue = hint
+      event.returnValue = !!hint
     }
 
     // modern browsers (ignore text)

src/components/SearchSelect/StagingArea/DraggableNodes.tsx

@@ -24,7 +24,7 @@ interface DraggableNodesProps {
   toggleSelectNode: (node: SelectNode) => void
 }
 
-const reorder = (list: any[], startIndex: number, endIndex: number) => {
+const reorder = (list: StagingNode[], startIndex: number, endIndex: number) => {
   const result = Array.from(list)
   const [removed] = result.splice(startIndex, 1)
   result.splice(endIndex, 0, removed)

src/components/Slides/index.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import useEmblaCarousel from 'embla-carousel-react'
-import { useEffect, useState } from 'react'
+import { type MouseEvent, useEffect, useState } from 'react'
 
 import { capitalizeFirstLetter } from '~/common/utils'
 
@@ -50,7 +50,7 @@ export const Slides: React.FC<React.PropsWithChildren<SlidesProps>> & {
     [styles[`bg-${bgColor}`]]: !!bgColor,
   })
 
-  const onCaptureClick = (event: any) => {
+  const onCaptureClick = (event: MouseEvent) => {
     if (scrolling) {
       event.preventDefault()
       event.stopPropagation()

src/components/TableView/Cell/index.tsx

@@ -16,10 +16,10 @@ type CellProps = {
   rightTextColor?: 'green' | 'greyDarker' | 'grey' | 'black'
   rightIcon?: React.ReactNode
 
-  ref?: any
+  ref?: React.Ref<HTMLDivElement>
 } & CardProps
 
-const Cell: React.FC<CellProps> = forwardRef(
+const Cell: React.FC<CellProps> = forwardRef<HTMLDivElement, CellProps>(
   (
     {
       title,

src/views/Circle/Analytics/FollowerAnalytics/index.tsx

@@ -5,6 +5,7 @@ import { FormattedMessage, useIntl } from 'react-intl'
 import { ReactComponent as IconAnalyticsFollower24 } from '@/public/static/icons/24px/analytics-follower.svg'
 import { CHART_COLOR } from '~/common/enums'
 import {
+  type Datum,
   QueryError,
   SpinnerBlock,
   StackedAreaChart,
@@ -127,7 +128,7 @@ const Content = () => {
                 />
                 <StackedAreaChart.Tooltip
                   {...props}
-                  formatter={(datum: any) =>
+                  formatter={(datum: Datum) =>
                     `<span>&nbsp;${datum.value}${intl.formatMessage({
                       defaultMessage: 'followers',
                       id: 'MDNaxs',