From 65bbfcf3daef5ac6cc31517144aefa8f51d7461a Mon Sep 17 00:00:00 2001
From: Mark Rickert <mjar81@gmail.com>
Date: Sun, 4 Feb 2024 11:40:53 -0700
Subject: [PATCH] Lots of typescript improvements.

---
 @types/global.d.ts                            |  8 ++
 src/components/common/BinaryDownload.tsx      |  3 +-
 .../common/CompletedFilesCounter.tsx          |  4 +-
 src/components/common/Diff/Diff.tsx           |  1 +
 src/components/common/Diff/DiffComment.tsx    |  9 ++-
 src/components/common/Diff/DiffHeader.tsx     | 48 +++++++++---
 src/components/common/Diff/DiffSection.tsx    | 21 ++++--
 .../common/Diff/DiffViewStyleOptions.tsx      |  6 +-
 src/components/common/DiffViewer.tsx          | 53 +++++++++----
 src/components/common/DownloadFileButton.tsx  | 16 +++-
 src/components/common/Select.tsx              |  2 +-
 src/components/common/Settings.tsx            | 19 ++++-
 .../common/TroubleshootingGuidesButton.tsx    |  4 +-
 src/components/common/UpgradeButton.tsx       | 11 ++-
 src/components/common/UpgradeSupportAlert.tsx |  1 -
 .../common/UsefulContentSection.tsx           |  2 +-
 src/components/common/VersionSelector.tsx     | 74 +++++++++++++++----
 src/components/common/ViewFileButton.tsx      | 10 ++-
 src/components/pages/Home.tsx                 | 34 ++++++---
 src/hooks/fetch-diff.ts                       |  4 +-
 src/hooks/fetch-release-versions.ts           | 12 ++-
 src/releases/react-native/0.68.tsx            | 25 ++++---
 src/utils/test-utils.ts                       |  6 +-
 src/utils/update-url.ts                       |  8 +-
 tsconfig.json                                 | 12 ++-
 yarn.lock                                     | 27 +++++--
 26 files changed, 308 insertions(+), 112 deletions(-)
 create mode 100644 @types/global.d.ts

diff --git a/@types/global.d.ts b/@types/global.d.ts
new file mode 100644
index 00000000..054694fb
--- /dev/null
+++ b/@types/global.d.ts
@@ -0,0 +1,8 @@
+interface Window {}
+
+interface Process {
+  env: {
+    PUBLIC_URL: string
+    NODE_ENV: 'development' | 'production'
+  }
+}
diff --git a/src/components/common/BinaryDownload.tsx b/src/components/common/BinaryDownload.tsx
index 9754b534..8b97f76b 100644
--- a/src/components/common/BinaryDownload.tsx
+++ b/src/components/common/BinaryDownload.tsx
@@ -5,6 +5,7 @@ import styled from '@emotion/styled'
 import DownloadFileButton from './DownloadFileButton'
 import { removeAppPathPrefix } from '../../utils'
 import type { Theme } from '../../theme'
+import type { File } from 'gitdiff-parser'
 
 const Container = styled.div`
   padding-right: 10px;
@@ -41,7 +42,7 @@ const Popover = styled(({ className, ...props }: PopoverProps) => (
 `
 
 interface BinaryListProps {
-  binaryFiles: { newPath: string }[]
+  binaryFiles: File[]
   toVersion: string
   appName: string
   packageName: string
diff --git a/src/components/common/CompletedFilesCounter.tsx b/src/components/common/CompletedFilesCounter.tsx
index 13e249f6..ed40affd 100644
--- a/src/components/common/CompletedFilesCounter.tsx
+++ b/src/components/common/CompletedFilesCounter.tsx
@@ -32,8 +32,8 @@ interface CompletedFilesCounterProps
   completed: number
   total: number
   popoverContent: string
-  popoverCursorType: string
-  theme: Theme
+  popoverCursorType: React.CSSProperties['cursor']
+  theme?: Theme
 }
 
 const CompletedFilesCounter = styled(
diff --git a/src/components/common/Diff/Diff.tsx b/src/components/common/Diff/Diff.tsx
index c9ee2f94..7eb1fe44 100644
--- a/src/components/common/Diff/Diff.tsx
+++ b/src/components/common/Diff/Diff.tsx
@@ -331,6 +331,7 @@ const Diff = ({
                   <Hunk
                     key={hunk.content}
                     hunk={hunk}
+                    // @ts-ignore-next-line
                     gutterEvents={{ onClick: onToggleChangeSelection }}
                   />,
                 ])}
diff --git a/src/components/common/Diff/DiffComment.tsx b/src/components/common/Diff/DiffComment.tsx
index ce3496d8..b0d46154 100644
--- a/src/components/common/Diff/DiffComment.tsx
+++ b/src/components/common/Diff/DiffComment.tsx
@@ -118,7 +118,12 @@ const getLineNumberWithType = ({
 }: {
   lineChangeType: LineChangeT
   lineNumber: number
-}) => `${LINE_CHANGE_TYPES[lineChangeType.toUpperCase()]}${lineNumber}`
+}) =>
+  `${
+    LINE_CHANGE_TYPES[
+      lineChangeType.toUpperCase() as keyof typeof LINE_CHANGE_TYPES
+    ]
+  }${lineNumber}`
 
 const getComments = ({
   packageName,
@@ -178,7 +183,7 @@ const DiffComment = ({
   content: any
   lineChangeType: LineChangeT
 }) => {
-  const [isCommentOpen, setIsCommentOpen] = useState(true)
+  const [isCommentOpen, setIsCommentOpen] = useState<boolean>(true)
 
   return (
     <Container
diff --git a/src/components/common/Diff/DiffHeader.tsx b/src/components/common/Diff/DiffHeader.tsx
index f172b306..433059fe 100644
--- a/src/components/common/Diff/DiffHeader.tsx
+++ b/src/components/common/Diff/DiffHeader.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from '@emotion/styled'
 import { Tag, Button, Popover } from 'antd'
-import type { ButtonProps } from 'antd'
+import type { ButtonProps, TagProps } from 'antd'
 import {
   CheckOutlined,
   DownOutlined,
@@ -17,6 +17,8 @@ import DownloadFileButton from '../DownloadFileButton'
 import ViewFileButton from '../ViewFileButton'
 import CopyFileButton from '../CopyFileButton'
 import type { Theme } from '../../../theme'
+import type { LineChangeT } from '../../../releases/types'
+import type { DiffType } from 'react-diff-view'
 
 export const testIDs = {
   collapseClickableArea: 'collapseClickableArea',
@@ -47,7 +49,15 @@ const FileRenameArrow = styled(RightOutlined)({
   color: '#f78206',
 })
 
-const FileName = ({ oldPath, newPath, type, appName }) => {
+const FileName = ({
+  oldPath,
+  newPath,
+  type,
+}: {
+  oldPath: string
+  newPath: string
+  type: LineChangeT
+}) => {
   if (type === 'delete') {
     return <span>{oldPath}</span>
   }
@@ -63,7 +73,7 @@ const FileName = ({ oldPath, newPath, type, appName }) => {
   return <span>{newPath}</span>
 }
 
-function generatePathId(oldPath, newPath) {
+function generatePathId(oldPath: string, newPath: string) {
   const isMoved = oldPath !== newPath
   if (newPath === '/dev/null') {
     newPath = 'deleted'
@@ -72,7 +82,12 @@ function generatePathId(oldPath, newPath) {
   return encodeURIComponent(path.replace(/[/\\]/g, '-'))
 }
 
-const FileStatus = ({ type, ...props }) => {
+const FileStatus = ({
+  type,
+  ...props
+}: {
+  type: DiffType
+} & TagProps) => {
   const colors = {
     add: 'blue',
     modify: 'green',
@@ -88,13 +103,16 @@ const FileStatus = ({ type, ...props }) => {
   }
 
   return (
-    <Tag {...props} color={colors[type]}>
-      {labels[type]}
+    <Tag {...props} color={colors[type as keyof typeof colors]}>
+      {labels[type as keyof typeof labels]}
     </Tag>
   )
 }
 
-const BinaryBadge = ({ open, ...props }) =>
+interface BinaryBadgeProps extends TagProps {
+  open: boolean
+}
+const BinaryBadge = ({ open, ...props }: BinaryBadgeProps) =>
   open ? (
     <Tag {...props} color="cyan">
       BINARY
@@ -206,7 +224,7 @@ const CopyAnchorLinksToClipboardButton = styled(
     const onCopyContent = () => setContent(copyAnchorLinks.copied)
 
     const url = React.useMemo(() => {
-      const url = new URL(window.location)
+      const url = new URL(window.location.toString())
       url.hash = id
       url.searchParams.set('from', fromVersion)
       url.searchParams.set('to', toVersion)
@@ -244,8 +262,15 @@ const CollapseClickableArea = styled.div`
   }
 `
 
-const CollapseDiffButton = styled(({ open, isDiffCollapsed, ...props }) =>
-  open ? <Button {...props} type="link" icon={<DownOutlined />} /> : null
+interface CollapseDiffButtonProps extends ButtonProps {
+  open: boolean
+  isDiffCollapsed: boolean
+  theme?: Theme
+}
+
+const CollapseDiffButton = styled(
+  ({ open, isDiffCollapsed, ...props }: CollapseDiffButtonProps) =>
+    open ? <Button {...props} type="link" icon={<DownOutlined />} /> : null
 )`
   color: ${({ theme }) => theme.text};
   margin-right: 2px;
@@ -266,7 +291,7 @@ interface DiffHeaderProps extends WrapperProps {
   newPath: string
   fromVersion: string
   toVersion: string
-  type: string
+  type: DiffType
   diffKey: string
   hasDiff: boolean
   isDiffCollapsed: boolean
@@ -330,7 +355,6 @@ const DiffHeader = ({
             oldPath={sanitizedFilePaths.oldPath}
             newPath={sanitizedFilePaths.newPath}
             type={type}
-            appName={appName}
           />{' '}
           <FileStatus type={type} />
           <BinaryBadge open={!hasDiff} />
diff --git a/src/components/common/Diff/DiffSection.tsx b/src/components/common/Diff/DiffSection.tsx
index 228f1d7e..eaacadc5 100644
--- a/src/components/common/Diff/DiffSection.tsx
+++ b/src/components/common/Diff/DiffSection.tsx
@@ -3,6 +3,8 @@ import { Typography } from 'antd'
 import styled from '@emotion/styled'
 import semver from 'semver'
 import Diff from './Diff'
+import type { File } from 'gitdiff-parser'
+import type { ViewType } from 'react-diff-view'
 
 export const testIDs = {
   diffSection: 'diffSection',
@@ -15,19 +17,19 @@ const Title = styled(Typography.Title)`
 interface DiffSectionProps {
   packageName: string
   diff: any
-  getDiffKey: (diffFile: any) => string
-  title: string
+  getDiffKey: (file: File) => string
+  title?: string
   completedDiffs: string[]
   isDoneSection: boolean
   fromVersion: string
   toVersion: string
   handleCompleteDiff: (diffKey: string) => void
   selectedChanges: string[]
-  onToggleChangeSelection: (diffKey: string, isSelected: boolean) => void
-  diffViewStyle: string
+  onToggleChangeSelection: (diffKey: string) => void
+  diffViewStyle: ViewType
   appName: string
   appPackage: string
-  doneTitleRef: React.RefObject<HTMLHeadingElement>
+  doneTitleRef?: React.RefObject<HTMLHeadingElement>
 }
 
 const DiffSection = ({
@@ -47,7 +49,9 @@ const DiffSection = ({
   appPackage,
   doneTitleRef,
 }: DiffSectionProps) => {
-  const [areAllCollapsed, setAllCollapsed] = useState(undefined)
+  const [areAllCollapsed, setAllCollapsed] = useState<boolean | undefined>(
+    undefined
+  )
 
   const getIsUpgradingFrom61To62 = useCallback(() => {
     const isUpgradingFrom61 = semver.satisfies(
@@ -70,7 +74,7 @@ const DiffSection = ({
         </Title>
       )}
 
-      {diff.map((diffFile) => {
+      {diff.map((diffFile: File) => {
         const diffKey = getDiffKey(diffFile)
         const isDiffCompleted = completedDiffs.includes(diffKey)
 
@@ -92,10 +96,11 @@ const DiffSection = ({
 
         return (
           <Diff
-            key={`${diffFile.oldRevision}${diffFile.newRevision}`}
+            key={diffKey}
             {...diffFile}
             packageName={packageName}
             // otakustay/react-diff-view#49
+            // @ts-ignore-next-line
             type={diffFile.type === 'new' ? 'add' : diffFile.type}
             diffKey={diffKey}
             diffViewStyle={diffViewStyle}
diff --git a/src/components/common/Diff/DiffViewStyleOptions.tsx b/src/components/common/Diff/DiffViewStyleOptions.tsx
index a1a2f147..cb57c413 100644
--- a/src/components/common/Diff/DiffViewStyleOptions.tsx
+++ b/src/components/common/Diff/DiffViewStyleOptions.tsx
@@ -2,11 +2,11 @@ import React from 'react'
 import styled from '@emotion/styled'
 import { Radio } from 'antd'
 import type { Theme } from '../../../theme'
+import type { ViewType } from 'react-diff-view'
 
-export type DiffViewStyle = 'split' | 'unified'
 interface DiffViewStyleOptionsProps {
-  handleViewStyleChange: (style: DiffViewStyle) => void
-  diffViewStyle: DiffViewStyle
+  handleViewStyleChange: (style: ViewType) => void
+  diffViewStyle: ViewType
   theme?: Theme
 }
 const DiffViewStyleOptions = styled(
diff --git a/src/components/common/DiffViewer.tsx b/src/components/common/DiffViewer.tsx
index 6969119e..2367e232 100644
--- a/src/components/common/DiffViewer.tsx
+++ b/src/components/common/DiffViewer.tsx
@@ -2,17 +2,18 @@ import React, { useState, useEffect, useRef, useReducer } from 'react'
 import styled from '@emotion/styled'
 import { Alert } from 'antd'
 import { motion, AnimatePresence, LayoutGroup } from 'framer-motion'
-import { withChangeSelect } from 'react-diff-view'
+import { type ViewType, withChangeSelect } from 'react-diff-view'
 import 'react-diff-view/style/index.css'
 import { getTransitionDuration, getChangelogURL } from '../../utils'
 import DiffSection from './Diff/DiffSection'
 import DiffLoading from './Diff/DiffLoading'
 import UsefulContentSection from './UsefulContentSection'
 import BinaryDownload from './BinaryDownload'
-import ViewStyleOptions, { DiffViewStyle } from './Diff/DiffViewStyleOptions'
+import ViewStyleOptions from './Diff/DiffViewStyleOptions'
 import CompletedFilesCounter from './CompletedFilesCounter'
 import { useFetchDiff } from '../../hooks/fetch-diff'
 import type { Theme } from '../../theme'
+import type { File } from 'gitdiff-parser'
 
 const Container = styled.div`
   width: 90%;
@@ -32,14 +33,20 @@ const Link = styled.a<{ theme?: Theme }>`
   color: ${({ theme }) => theme.link};
 `
 
-const getDiffKey = ({ oldRevision, newRevision }) =>
-  `${oldRevision}${newRevision}`
+const getDiffKey = ({
+  oldRevision,
+  newRevision,
+}: {
+  oldRevision: string
+  newRevision: string
+}) => `${oldRevision}${newRevision}`
 
-const scrollToRef = (ref) => ref.current.scrollIntoView({ behavior: 'smooth' })
+const scrollToRef = (ref?: React.RefObject<HTMLElement>) =>
+  ref?.current?.scrollIntoView({ behavior: 'smooth' })
 
 // Lazy loaded content won't respect anchor links in the URL, so we have to help
 // the viewport once we know our diff has loaded.
-const jumpToAnchor = (stopScrolling) => {
+const jumpToAnchor = (stopScrolling: boolean) => {
   if (!window.location.hash || stopScrolling) {
     return true
   }
@@ -51,6 +58,17 @@ const jumpToAnchor = (stopScrolling) => {
   return true
 }
 
+interface DiffViewerProps {
+  packageName: string
+  language: string
+  fromVersion: string
+  toVersion: string
+  shouldShowDiff: boolean
+  selectedChanges: string[]
+  onToggleChangeSelection: (change: string) => void
+  appName: string
+  appPackage: string
+}
 const DiffViewer = ({
   packageName,
   language,
@@ -61,7 +79,7 @@ const DiffViewer = ({
   onToggleChangeSelection,
   appName,
   appPackage,
-}) => {
+}: DiffViewerProps) => {
   const { isLoading, isDone, diff } = useFetchDiff({
     shouldShowDiff,
     packageName,
@@ -69,8 +87,8 @@ const DiffViewer = ({
     fromVersion,
     toVersion,
   })
-  const [completedDiffs, setCompletedDiffs] = useState([])
-  const [isGoToDoneClicked, setIsGoToDoneClicked] = useState(false)
+  const [completedDiffs, setCompletedDiffs] = useState<string[]>([])
+  const [isGoToDoneClicked, setIsGoToDoneClicked] = useState<boolean>(false)
   const donePopoverPossibleOpts = {
     done: {
       content: 'Scroll to Done section',
@@ -100,7 +118,7 @@ const DiffViewer = ({
     }
   }
 
-  const handleCompleteDiff = (diffKey) => {
+  const handleCompleteDiff = (diffKey: string) => {
     if (completedDiffs.includes(diffKey)) {
       return setCompletedDiffs((prevCompletedDiffs) =>
         prevCompletedDiffs.filter((completedDiff) => completedDiff !== diffKey)
@@ -110,7 +128,13 @@ const DiffViewer = ({
     setCompletedDiffs((prevCompletedDiffs) => [...prevCompletedDiffs, diffKey])
   }
 
-  const renderUpgradeDoneMessage = ({ diff, completedDiffs }) =>
+  const renderUpgradeDoneMessage = ({
+    diff,
+    completedDiffs,
+  }: {
+    diff: File[]
+    completedDiffs: string[]
+  }) =>
     diff.length === completedDiffs.length && (
       <Alert
         style={{ marginTop: 16 }}
@@ -123,11 +147,11 @@ const DiffViewer = ({
 
   const resetCompletedDiffs = () => setCompletedDiffs([])
 
-  const [diffViewStyle, setViewStyle] = useState<DiffViewStyle>(
-    (localStorage.getItem('viewStyle') || 'split') as DiffViewStyle
+  const [diffViewStyle, setViewStyle] = useState<ViewType>(
+    (localStorage.getItem('viewStyle') || 'split') as ViewType
   )
 
-  const handleViewStyleChange = (newViewStyle: DiffViewStyle) => {
+  const handleViewStyleChange = (newViewStyle: ViewType) => {
     setViewStyle(newViewStyle)
     localStorage.setItem('viewStyle', newViewStyle)
   }
@@ -199,7 +223,6 @@ const DiffViewer = ({
               fromVersion={fromVersion}
               toVersion={toVersion}
               appName={appName}
-              appPackage={appPackage}
               packageName={packageName}
             />
 
diff --git a/src/components/common/DownloadFileButton.tsx b/src/components/common/DownloadFileButton.tsx
index e163ac55..a2d5a54f 100644
--- a/src/components/common/DownloadFileButton.tsx
+++ b/src/components/common/DownloadFileButton.tsx
@@ -1,9 +1,21 @@
 import React from 'react'
-import { Button } from 'antd'
+import { Button, ButtonProps } from 'antd'
 import { DownloadOutlined } from '@ant-design/icons'
 import { getBinaryFileURL } from '../../utils'
 
-const DownloadFileButton = ({ open, version, path, packageName, ...props }) => {
+interface DownloadFileButtonProps extends ButtonProps {
+  open: boolean
+  version: string
+  path: string
+  packageName: string
+}
+const DownloadFileButton = ({
+  open,
+  version,
+  path,
+  packageName,
+  ...props
+}: DownloadFileButtonProps) => {
   return open ? (
     <Button
       {...props}
diff --git a/src/components/common/Select.tsx b/src/components/common/Select.tsx
index 886eb659..c787ea25 100644
--- a/src/components/common/Select.tsx
+++ b/src/components/common/Select.tsx
@@ -12,7 +12,7 @@ const SelectBox = styled(AntdSelect)`
   width: 100%;
 `
 
-export interface SelectProps extends AntdSelectProps {
+export interface SelectProps extends AntdSelectProps<any, {}> {
   title: string
   options: string[]
 }
diff --git a/src/components/common/Settings.tsx b/src/components/common/Settings.tsx
index e093f9d3..1c66e5e5 100644
--- a/src/components/common/Settings.tsx
+++ b/src/components/common/Settings.tsx
@@ -4,12 +4,15 @@ import { SHOW_LATEST_RCS } from '../../utils'
 import styled from '@emotion/styled'
 import { WindowsFilled } from '@ant-design/icons'
 import { PACKAGE_NAMES, LANGUAGE_NAMES } from '../../constants'
+import { CheckboxValueType } from 'antd/es/checkbox/Group'
 
 const SettingsButton = styled(Button)`
   color: initial;
 `
 
-const SettingsIcon = styled((props) => <span {...props}>⚙️</span>)`
+const SettingsIcon = styled((props: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span {...props}>⚙️</span>
+))`
   font-family: initial;
 `
 
@@ -31,12 +34,20 @@ const Settings = ({
   packageName,
   language,
   onChangePackageNameAndLanguage,
+}: {
+  handleSettingsChange: (checkboxValues: CheckboxValueType[]) => void
+  packageName: string
+  language: string
+  onChangePackageNameAndLanguage: (params: {
+    newPackageName?: string
+    newLanguage: string
+  }) => void
 }) => {
-  const [popoverVisibility, setVisibility] = useState(false)
+  const [popoverVisibility, setVisibility] = useState<boolean>(false)
   const [newPackageName, setNewPackageName] = useState(packageName)
   const [newLanguage, setNewLanguage] = useState(language)
 
-  const handleClickChange = (visibility) => {
+  const handleClickChange = (visibility: boolean) => {
     setVisibility(visibility)
 
     const processedNewLanguage =
@@ -56,7 +67,7 @@ const Settings = ({
     }
   }
 
-  const updateCheckboxValues = (checkboxValues) =>
+  const updateCheckboxValues = (checkboxValues: CheckboxValueType[]) =>
     handleSettingsChange(checkboxValues)
 
   return (
diff --git a/src/components/common/TroubleshootingGuidesButton.tsx b/src/components/common/TroubleshootingGuidesButton.tsx
index c2504c9b..03706ffd 100644
--- a/src/components/common/TroubleshootingGuidesButton.tsx
+++ b/src/components/common/TroubleshootingGuidesButton.tsx
@@ -18,8 +18,8 @@ const Button = styled(AntdButton)`
 `
 
 const TroubleshootingGuidesButton = () => {
-  const [showContent, setShowContent] = useState(false)
-  const hasHandledClick = useRef(false)
+  const [showContent, setShowContent] = useState<boolean>(false)
+  const hasHandledClick = useRef<boolean>(false)
 
   const handlePopoverVisibilityChange = () => {
     if (hasHandledClick.current) {
diff --git a/src/components/common/UpgradeButton.tsx b/src/components/common/UpgradeButton.tsx
index e97d9325..27b379b6 100644
--- a/src/components/common/UpgradeButton.tsx
+++ b/src/components/common/UpgradeButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { Button as AntdButton } from 'antd'
+import { Button as AntdButton, ButtonProps } from 'antd'
 
 export const testIDs = {
   upgradeButton: 'upgradeButton',
@@ -18,7 +18,14 @@ const Button = styled(AntdButton)`
   border-radius: 3px;
 `
 
-const UpgradeButton = React.forwardRef(({ onShowDiff, ...props }, ref) => (
+interface UpgradeButtonProps extends React.PropsWithRef<ButtonProps> {
+  onShowDiff: () => void
+}
+
+const UpgradeButton = React.forwardRef<
+  HTMLElement,
+  UpgradeButtonProps & React.RefAttributes<HTMLElement>
+>(({ onShowDiff, ...props }, ref) => (
   <Container>
     <Button
       {...props}
diff --git a/src/components/common/UpgradeSupportAlert.tsx b/src/components/common/UpgradeSupportAlert.tsx
index 3a2ae24f..d46ea2d9 100644
--- a/src/components/common/UpgradeSupportAlert.tsx
+++ b/src/components/common/UpgradeSupportAlert.tsx
@@ -19,7 +19,6 @@ const UpgradeSupportAlert = styled((props: UpgradeSupportAlertProps) => (
           href="https://github.com/react-native-community/upgrade-support"
           target="_blank"
           rel="noopener noreferrer"
-          {...props}
         >
           Upgrade Support
         </a>
diff --git a/src/components/common/UsefulContentSection.tsx b/src/components/common/UsefulContentSection.tsx
index 88c351bd..b60b7024 100644
--- a/src/components/common/UsefulContentSection.tsx
+++ b/src/components/common/UsefulContentSection.tsx
@@ -182,7 +182,7 @@ class UsefulContentSection extends Component<
       isContentOpen: !isContentOpen,
     }))
 
-  getChangelog = ({ version }) => {
+  getChangelog = ({ version }: { version: string }) => {
     const { packageName, toVersion } = this.props
 
     if (
diff --git a/src/components/common/VersionSelector.tsx b/src/components/common/VersionSelector.tsx
index 69badaf9..0c54d2cc 100644
--- a/src/components/common/VersionSelector.tsx
+++ b/src/components/common/VersionSelector.tsx
@@ -40,6 +40,7 @@ interface ToVersionSelectorProps extends SelectProps {
 const ToVersionSelector = styled(
   ({ popover, ...props }: ToVersionSelectorProps) =>
     popover ? (
+      // @ts-ignore-next-line
       React.cloneElement(popover, {
         children: <Select {...props} />,
       })
@@ -75,12 +76,18 @@ const stripAnchorInUrl = () => {
   return true
 }
 
-const compareReleaseCandidateVersions = ({ version, versionToCompare }) =>
+const compareReleaseCandidateVersions = ({
+  version,
+  versionToCompare,
+}: {
+  version: string | semver.SemVer
+  versionToCompare: string | semver.SemVer
+}) =>
   ['prerelease', 'prepatch', null].includes(
     semver.diff(version, versionToCompare)
   )
 
-const getLatestMajorReleaseVersion = (releasedVersions) =>
+const getLatestMajorReleaseVersion = (releasedVersions: string[]) =>
   semver.valid(
     semver.coerce(
       releasedVersions.find(
@@ -92,7 +99,13 @@ const getLatestMajorReleaseVersion = (releasedVersions) =>
   )
 
 // Check if `from` rc version is one of the latest major release (ie. 0.60.0)
-const checkIfVersionIsALatestRC = ({ version, latestVersion }) =>
+const checkIfVersionIsALatestRC = ({
+  version,
+  latestVersion,
+}: {
+  version: string
+  latestVersion: string
+}) =>
   semver.prerelease(version) &&
   compareReleaseCandidateVersions({
     version: latestVersion,
@@ -106,6 +119,11 @@ const getReleasedVersionsWithCandidates = ({
   toVersion,
   latestVersion,
   showReleaseCandidates,
+}: {
+  releasedVersions: string[]
+  toVersion: string
+  latestVersion: string
+  showReleaseCandidates: boolean
 }) => {
   const isToVersionAReleaseCandidate = semver.prerelease(toVersion) !== null
   const isLatestAReleaseCandidate = semver.prerelease(latestVersion) !== null
@@ -136,11 +154,19 @@ const getReleasedVersionsWithCandidates = ({
   })
 }
 
-const getReleasedVersions = ({ releasedVersions, minVersion, maxVersion }) => {
+const getReleasedVersions = ({
+  releasedVersions,
+  minVersion,
+  maxVersion,
+}: {
+  releasedVersions: string[]
+  minVersion?: string
+  maxVersion?: string
+}) => {
   const latestMajorReleaseVersion =
     getLatestMajorReleaseVersion(releasedVersions)
 
-  const isVersionAReleaseAndOfLatest = (version) =>
+  const isVersionAReleaseAndOfLatest = (version: string) =>
     version.includes('rc') &&
     semver.valid(semver.coerce(version)) === latestMajorReleaseVersion
 
@@ -155,7 +181,13 @@ const getReleasedVersions = ({ releasedVersions, minVersion, maxVersion }) => {
 }
 
 // Finds the first minor release (which in react-native is the major) when compared to another version
-const getFirstMajorRelease = ({ releasedVersions, versionToCompare }) =>
+const getFirstMajorRelease = ({
+  releasedVersions,
+  versionToCompare,
+}: {
+  releasedVersions: string[]
+  versionToCompare: string
+}) =>
   releasedVersions.find(
     (releasedVersion) =>
       semver.lt(releasedVersion, versionToCompare) &&
@@ -166,7 +198,15 @@ const getFirstMajorRelease = ({ releasedVersions, versionToCompare }) =>
   )
 
 // Return if version exists in the ones returned from GitHub
-const doesVersionExist = ({ version, allVersions, minVersion }) => {
+const doesVersionExist = ({
+  version,
+  allVersions,
+  minVersion,
+}: {
+  version: string
+  allVersions: string[]
+  minVersion?: string
+}) => {
   try {
     return (
       version &&
@@ -186,19 +226,25 @@ const VersionSelector = ({
   isPackageNameDefinedInURL,
   showDiff,
   showReleaseCandidates,
+}: {
+  packageName: string
+  language: string
+  isPackageNameDefinedInURL: boolean
+  showDiff: (args: { fromVersion: string; toVersion: string }) => void
+  showReleaseCandidates: boolean
 }) => {
   const { isLoading, isDone, releaseVersions } = useFetchReleaseVersions({
     packageName,
   })
-  const [allVersions, setAllVersions] = useState([])
+  const [allVersions, setAllVersions] = useState<string[]>([])
   const [fromVersionList, setFromVersionList] = useState([])
   const [toVersionList, setToVersionList] = useState([])
-  const [hasVersionsFromURL, setHasVersionsFromURL] = useState(false)
+  const [hasVersionsFromURL, setHasVersionsFromURL] = useState<boolean>(false)
 
-  const [localFromVersion, setLocalFromVersion] = useState('')
-  const [localToVersion, setLocalToVersion] = useState('')
+  const [localFromVersion, setLocalFromVersion] = useState<string>('')
+  const [localToVersion, setLocalToVersion] = useState<string>('')
 
-  const upgradeButtonEl = useRef(null)
+  const upgradeButtonEl = useRef<HTMLElement>(null)
 
   useEffect(() => {
     const versionsInURL = getVersionsInURL()
@@ -258,7 +304,7 @@ const VersionSelector = ({
 
       const doesHaveVersionsInURL = hasFromVersionInURL && hasToVersionInURL
 
-      setHasVersionsFromURL(doesHaveVersionsInURL)
+      setHasVersionsFromURL(!!doesHaveVersionsInURL)
     }
 
     if (isDone) {
@@ -291,7 +337,7 @@ const VersionSelector = ({
     )
 
     if (hasVersionsFromURL) {
-      upgradeButtonEl.current.click()
+      upgradeButtonEl?.current?.click()
     }
   }, [
     isLoading,
diff --git a/src/components/common/ViewFileButton.tsx b/src/components/common/ViewFileButton.tsx
index c6500bd5..e1a746f1 100644
--- a/src/components/common/ViewFileButton.tsx
+++ b/src/components/common/ViewFileButton.tsx
@@ -1,10 +1,16 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { Button } from 'antd'
+import { Button, ButtonProps } from 'antd'
 import { getBinaryFileURL } from '../../utils'
 
+interface ViewFileButtonProps extends ButtonProps {
+  open: boolean
+  version: string
+  path: string
+  packageName: string
+}
 const ViewFileButton = styled(
-  ({ open, version, path, packageName, ...props }) => {
+  ({ open, version, path, packageName, ...props }: ViewFileButtonProps) => {
     if (!open) {
       return null
     }
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
index 0efc5807..8fcc1d4f 100644
--- a/src/components/pages/Home.tsx
+++ b/src/components/pages/Home.tsx
@@ -8,6 +8,7 @@ import createPersistedState from 'use-persisted-state'
 import VersionSelector from '../common/VersionSelector'
 import DiffViewer from '../common/DiffViewer'
 import Settings from '../common/Settings'
+// @ts-ignore-next-line
 import logo from '../../assets/logo.svg'
 import { SHOW_LATEST_RCS } from '../../utils'
 import { useGetLanguageFromURL } from '../../hooks/get-language-from-url'
@@ -21,10 +22,11 @@ import { TroubleshootingGuidesButton } from '../common/TroubleshootingGuidesButt
 import { DarkModeButton } from '../common/DarkModeButton'
 import { updateURL } from '../../utils/update-url'
 import { deviceSizes } from '../../utils/device-sizes'
-import { lightTheme, darkTheme } from '../../theme'
+import { lightTheme, darkTheme, type Theme } from '../../theme'
+import { CheckboxValueType } from 'antd/es/checkbox/Group'
 
 const Page = styled.div<{ theme?: Theme }>`
-  background-color: ${({ theme }) => theme.body};
+  background-color: ${({ theme }) => theme.background};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -32,7 +34,7 @@ const Page = styled.div<{ theme?: Theme }>`
   padding-top: 30px;
 `
 
-const Container = styled(Card)`
+const Container = styled(Card)<{ theme?: Theme }>`
   background-color: ${({ theme }) => theme.background};
   width: 90%;
   border-radius: 3px;
@@ -130,15 +132,15 @@ const Home = () => {
   const defaultLanguage = useGetLanguageFromURL()
   const [packageName, setPackageName] = useState(defaultPackageName)
   const [language, setLanguage] = useState(defaultLanguage)
-  const [fromVersion, setFromVersion] = useState('')
-  const [toVersion, setToVersion] = useState('')
-  const [shouldShowDiff, setShouldShowDiff] = useState(false)
+  const [fromVersion, setFromVersion] = useState<string>('')
+  const [toVersion, setToVersion] = useState<string>('')
+  const [shouldShowDiff, setShouldShowDiff] = useState<boolean>(false)
   const [settings, setSettings] = useState({
     [`${SHOW_LATEST_RCS}`]: false,
   })
 
-  const [appName, setAppName] = useState('')
-  const [appPackage, setAppPackage] = useState('')
+  const [appName, setAppName] = useState<string>('')
+  const [appPackage, setAppPackage] = useState<string>('')
 
   // Avoid UI lag when typing.
   const deferredAppName = useDeferredValue(appName)
@@ -153,7 +155,13 @@ const Home = () => {
     }
   }, [])
 
-  const handleShowDiff = ({ fromVersion, toVersion }) => {
+  const handleShowDiff = ({
+    fromVersion,
+    toVersion,
+  }: {
+    fromVersion: string
+    toVersion: string
+  }) => {
     if (fromVersion === toVersion) {
       return
     }
@@ -166,6 +174,9 @@ const Home = () => {
   const handlePackageNameAndLanguageChange = ({
     newPackageName,
     newLanguage,
+  }: {
+    newPackageName?: string
+    newLanguage: string
   }) => {
     let localPackageName =
       newPackageName === undefined ? packageName : newPackageName
@@ -186,7 +197,7 @@ const Home = () => {
     setShouldShowDiff(false)
   }
 
-  const handleSettingsChange = (settingsValues) => {
+  const handleSettingsChange = (settingsValues: CheckboxValueType[]) => {
     const normalizedIncomingSettings = settingsValues.reduce((acc, val) => {
       acc[val] = true
       return acc
@@ -198,7 +209,8 @@ const Home = () => {
   // Dark Mode Setup:
   const { defaultAlgorithm, darkAlgorithm } = theme // Get default and dark mode states from antd.
   const [isDarkMode, setIsDarkMode] = useDarkModeState(false) // Remembers dark mode state between sessions.
-  const toggleDarkMode = () => setIsDarkMode((previousValue) => !previousValue)
+  const toggleDarkMode = () =>
+    setIsDarkMode((previousValue: boolean) => !previousValue)
   const themeString = isDarkMode ? 'dark' : 'light'
   useEffect(() => {
     // Set the document's background color to the theme's body color.
diff --git a/src/hooks/fetch-diff.ts b/src/hooks/fetch-diff.ts
index cddaaa84..b59aa536 100644
--- a/src/hooks/fetch-diff.ts
+++ b/src/hooks/fetch-diff.ts
@@ -22,8 +22,8 @@ export const useFetchDiff = ({
   fromVersion,
   toVersion,
 }: UseFetchDiffProps) => {
-  const [isLoading, setIsLoading] = useState(true)
-  const [isDone, setIsDone] = useState(false)
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+  const [isDone, setIsDone] = useState<boolean>(false)
   const [diff, setDiff] = useState<File[]>([])
 
   useEffect(() => {
diff --git a/src/hooks/fetch-release-versions.ts b/src/hooks/fetch-release-versions.ts
index 64739986..702ae87c 100644
--- a/src/hooks/fetch-release-versions.ts
+++ b/src/hooks/fetch-release-versions.ts
@@ -1,10 +1,14 @@
 import { useEffect, useState } from 'react'
 import { getReleasesFileURL } from '../utils'
 
-export const useFetchReleaseVersions = ({ packageName }) => {
-  const [isLoading, setIsLoading] = useState(true)
-  const [isDone, setIsDone] = useState(false)
-  const [releaseVersions, setReleaseVersions] = useState(undefined)
+export const useFetchReleaseVersions = ({
+  packageName,
+}: {
+  packageName: string
+}) => {
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+  const [isDone, setIsDone] = useState<boolean>(false)
+  const [releaseVersions, setReleaseVersions] = useState<string[]>([])
 
   useEffect(() => {
     const fetchReleaseVersions = async () => {
diff --git a/src/releases/react-native/0.68.tsx b/src/releases/react-native/0.68.tsx
index fdc062b0..29279400 100644
--- a/src/releases/react-native/0.68.tsx
+++ b/src/releases/react-native/0.68.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import { ReleaseT } from '../types'
+import { ReleaseCommentT, ReleaseT } from '../types'
 
 const newArchitectureFiles = [
   'android/app/src/main/java/com/rndiffapp/newarchitecture/MainApplicationReactNativeHost.java',
@@ -72,17 +72,20 @@ const release: ReleaseT = {
         </Fragment>
       ),
     },
-    ...newArchitectureFiles.map((file) => ({
-      fileName: file,
+    ...newArchitectureFiles.map(
+      (file) =>
+        ({
+          fileName: file,
 
-      lineNumber: 1,
-      lineChangeType: 'add',
-      content: (
-        <Fragment>
-          This file is only required for the New Architecture setup.
-        </Fragment>
-      ),
-    })),
+          lineNumber: 1,
+          lineChangeType: 'add',
+          content: (
+            <Fragment>
+              This file is only required for the New Architecture setup.
+            </Fragment>
+          ),
+        } as ReleaseCommentT)
+    ),
   ],
 }
 
diff --git a/src/utils/test-utils.ts b/src/utils/test-utils.ts
index 1ee91651..21fa2797 100644
--- a/src/utils/test-utils.ts
+++ b/src/utils/test-utils.ts
@@ -2,8 +2,8 @@ import fs from 'fs'
 import puppeteer from 'puppeteer'
 import { configureToMatchImageSnapshot } from 'jest-image-snapshot'
 
-let browser
-let page
+let browser: puppeteer.Browser
+let page: puppeteer.Page
 
 const URLs = {
   RELEASES:
@@ -22,7 +22,7 @@ const MOCK_RESPONSES = {
     fs.readFileSync('./src/mocks/repositoryInfo.json', 'utf-8'),
 }
 
-const mockResponses = (request) => {
+const mockResponses = (request: puppeteer.HTTPRequest) => {
   const requestedURL = request.url()
   const mockedURLs = Object.keys(MOCK_RESPONSES)
 
diff --git a/src/utils/update-url.ts b/src/utils/update-url.ts
index 36d05876..fdf619f4 100644
--- a/src/utils/update-url.ts
+++ b/src/utils/update-url.ts
@@ -6,6 +6,12 @@ export function updateURL({
   isPackageNameDefinedInURL,
   fromVersion,
   toVersion,
+}: {
+  packageName: string
+  language: string
+  isPackageNameDefinedInURL: boolean
+  fromVersion: string
+  toVersion: string
 }) {
   const url = new URL(window.location.origin)
   url.pathname = window.location.pathname
@@ -24,5 +30,5 @@ export function updateURL({
     url.searchParams.set('language', language)
   }
 
-  window.history.replaceState(null, null, url.toString())
+  window.history.replaceState(null, '', url.toString())
 }
diff --git a/tsconfig.json b/tsconfig.json
index 348d3171..bb5bcf21 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,8 +16,16 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "jsxImportSource": "@emotion/react",
-    "typeRoots": ["./node_modules/@types", "./@types"]
+    "typeRoots": ["./node_modules/@types", "./@types"],
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    }
   },
-  "include": ["./src"],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs"
+    }
+  },
+  "include": ["./src", "./assets"],
   "exclude": ["./src/__tests__/*"]
 }
diff --git a/yarn.lock b/yarn.lock
index 88d23b1b..223affbe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2510,7 +2510,16 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@^29.5.12":
+"@types/jest-image-snapshot@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@types/jest-image-snapshot/-/jest-image-snapshot-6.4.0.tgz#641054d2fa2ff130a49c844ee7a9a68f281b6017"
+  integrity sha512-8TQ/EgqFCX0UWSpH488zAc21fCkJNpZPnnp3xWFMqElxApoJV5QOoqajnVRV7AhfF0rbQWTVyc04KG7tXnzCPA==
+  dependencies:
+    "@types/jest" "*"
+    "@types/pixelmatch" "*"
+    ssim.js "^3.1.1"
+
+"@types/jest@*", "@types/jest@^29.5.12":
   version "29.5.12"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.12.tgz#7f7dc6eb4cf246d2474ed78744b05d06ce025544"
   integrity sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==
@@ -2567,6 +2576,13 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/pixelmatch@*":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@types/pixelmatch/-/pixelmatch-5.2.6.tgz#fba6de304ac958495f27d85989f5c6bb7499a686"
+  integrity sha512-wC83uexE5KGuUODn6zkm9gMzTwdY5L0chiK+VrKcDfEjzxh1uadlWTvOmAbCpnM9zx/Ww3f8uKlYQVnO/TrqVg==
+  dependencies:
+    "@types/node" "*"
+
 "@types/prettier@^2.1.5":
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.2.tgz#6c2324641cc4ba050a8c710b2b251b377581fbf0"
@@ -6614,16 +6630,15 @@ jest-haste-map@^29.7.0:
   optionalDependencies:
     fsevents "^2.3.2"
 
-jest-image-snapshot@6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jest-image-snapshot/-/jest-image-snapshot-6.1.0.tgz#96a17b00530e1358eae657f6c9bb948e29ee7510"
-  integrity sha512-LZYoks6V1HAkYqyi80gUjMWVsa++Oy0fckAGMLBQseVweZT9AmJNKAINwHLqX1fpeMy2hTG5CCEe4IUX2N3Nmg==
+jest-image-snapshot@6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/jest-image-snapshot/-/jest-image-snapshot-6.4.0.tgz#65831d13beb1680f3bba9fb28230fa53d76939be"
+  integrity sha512-IWGtSOnelwaVPd09STbJuLmnAwlBC/roJtTLGLb8M3TA0vfku3MRNEXmljTa1EMXqdRbA0oIWiqHFB1ttTGazQ==
   dependencies:
     chalk "^4.0.0"
     get-stdin "^5.0.1"
     glur "^1.1.2"
     lodash "^4.17.4"
-    mkdirp "^0.5.1"
     pixelmatch "^5.1.0"
     pngjs "^3.4.0"
     rimraf "^2.6.2"