Lots of typescript improvements.

Author: markrickert

@types/global.d.ts

@@ -0,0 +1,8 @@
+interface Window {}
+
+interface Process {
+  env: {
+    PUBLIC_URL: string
+    NODE_ENV: 'development' | 'production'
+  }
+}

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

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(

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 }}
                   />,
                 ])}

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

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} />

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}

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(