Updates Typescript to 4.2.4, updates eslint typescript plugins, fixes…

… all type check warnings and errors (#1214)

package.json

@@ -79,8 +79,8 @@
     "@types/jest": "^26.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^2.3.2",
-    "@typescript-eslint/parser": "^2.3.2",
+    "@typescript-eslint/eslint-plugin": "^4.22.1",
+    "@typescript-eslint/parser": "^4.22.1",
     "all-contributors-cli": "^6.20.0",
     "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.3",
@@ -124,7 +124,7 @@
     "stylelint-prettier": "^1.1.1",
     "stylelint-scss": "^3.17.1",
     "ts-jest": "^26.1.2",
-    "typescript": "^3.8.0",
+    "typescript": "^4.2.4",
     "url-loader": "^4.0.0",
     "uswds": "2.10.3",
     "webpack": "^4.41.0",

src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.test.tsx

@@ -122,14 +122,14 @@ describe('FooterExtendedNavList component', () => {
     describe('when client window width is less than mobile threshold', () => {
       beforeEach(() => {
         // Mobile width is less than 480
-        //eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        //eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         window.innerWidth = 479
       })
 
       afterEach(() => {
         // Return to JSDOM default
-        //eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        //eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         window.innerWidth = 1024
       })

src/components/Identifier/IdentifierMasthead/IdentifierMasthead.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 
 interface IdentifierMastheadProps {

src/components/SiteAlert/SiteAlert.stories.tsx

@@ -40,6 +40,12 @@ Source: http://designsystem.digital.gov/components/site-alert
   },
 }
 
+type StorybookArguments = {
+  slim: boolean
+  showIcon: boolean
+  variant: 'info' | 'emergency'
+}
+
 const infoHeading = 'Short alert message'
 
 const additionalContext = (
@@ -139,7 +145,9 @@ export const emergencyAlertNoIcon = (): React.ReactElement => (
   </SiteAlert>
 )
 
-export const alertWithCustomControls = (argTypes): React.ReactElement => (
+export const alertWithCustomControls = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <SiteAlert
     slim={argTypes.slim}
     showIcon={argTypes.showIcon}

src/components/Table/Table.stories.tsx

@@ -36,6 +36,12 @@ Source: https://designsystem.digital.gov/components/table/
   },
 }
 
+type StorybookArguments = {
+  bordered: boolean
+  striped: boolean
+  stackedStyle: 'default' | 'headers'
+}
+
 const testContent = (
   <>
     <thead>
@@ -335,13 +341,13 @@ export const scrollable = (): React.ReactElement => (
   </>
 )
 
-export const striped = (argTypes): React.ReactElement => (
+export const striped = (argTypes: StorybookArguments): React.ReactElement => (
   <Table striped bordered={argTypes.bordered} caption="This is a striped table">
     {testContent}
   </Table>
 )
 
-export const compact = (argTypes): React.ReactElement => (
+export const compact = (argTypes: StorybookArguments): React.ReactElement => (
   <Table
     compact
     bordered={argTypes.bordered}
@@ -351,7 +357,9 @@ export const compact = (argTypes): React.ReactElement => (
   </Table>
 )
 
-export const stackedStylesDemo = (argTypes): React.ReactElement => (
+export const stackedStylesDemo = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Table
     bordered={argTypes.bordered}
     stackedStyle={argTypes.stackedStyle}

src/components/Tooltip/Tooltip.test.tsx

@@ -1,6 +1,5 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
 
 import { Tooltip } from './Tooltip'
 

src/components/forms/DatePicker/Calendar.stories.tsx

@@ -17,20 +17,27 @@ export default {
 }
 */
 
+type StorybookArguments = {
+  handleSelectDate: (value: string) => void
+  setStatuses: (statuses: string[]) => void
+}
+
 const defaultProps = {
   minDate: new Date('0000-01-01'),
   focusMode: FocusMode.None,
 }
 
-export const defaultCalendar = (argTypes): React.ReactElement => (
+export const defaultCalendar = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Calendar
     {...defaultProps}
     handleSelectDate={argTypes.handleSelectDate}
     setStatuses={argTypes.setStatuses}
   />
 )
 
-export const givenDate = (argTypes): React.ReactElement => (
+export const givenDate = (argTypes: StorybookArguments): React.ReactElement => (
   <Calendar
     {...defaultProps}
     handleSelectDate={argTypes.handleSelectDate}
@@ -39,7 +46,9 @@ export const givenDate = (argTypes): React.ReactElement => (
   />
 )
 
-export const selectedDate = (argTypes): React.ReactElement => (
+export const selectedDate = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Calendar
     {...defaultProps}
     handleSelectDate={argTypes.handleSelectDate}
@@ -48,7 +57,7 @@ export const selectedDate = (argTypes): React.ReactElement => (
   />
 )
 
-export const minAndMax = (argTypes): React.ReactElement => (
+export const minAndMax = (argTypes: StorybookArguments): React.ReactElement => (
   <Calendar
     {...defaultProps}
     handleSelectDate={argTypes.handleSelectDate}
@@ -59,7 +68,7 @@ export const minAndMax = (argTypes): React.ReactElement => (
   />
 )
 
-export const rangeDate = (argTypes): React.ReactElement => (
+export const rangeDate = (argTypes: StorybookArguments): React.ReactElement => (
   <Calendar
     {...defaultProps}
     handleSelectDate={argTypes.handleSelectDate}

src/components/forms/DatePicker/DatePicker.stories.tsx

@@ -42,7 +42,14 @@ We may find that we want to expose props for custom event handlers or even a ref
   },
 }
 
-export const completeDatePicker = (argTypes): React.ReactElement => (
+type StorybookArguments = {
+  onSubmit: React.FormEventHandler<HTMLFormElement>
+  disabled?: boolean
+}
+
+export const completeDatePicker = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Form onSubmit={argTypes.onSubmit}>
     <FormGroup>
       <Label id="appointment-date-label" htmlFor="appointment-date">

src/components/forms/DatePicker/Day.stories.tsx

@@ -15,13 +15,21 @@ export default {
 }
 */
 
+type StorybookArguments = {
+  onClick: (value: string) => void
+  onKeyDown: (event: React.KeyboardEvent<Element>) => void
+  onMouseMove: (hoverDate: Date) => void
+}
+
 const testDate = new Date('January 20 2021')
 
 const defaultProps = {
   date: testDate,
 }
 
-export const defaultDay = (argTypes): React.ReactElement => (
+export const defaultDay = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -30,7 +38,7 @@ export const defaultDay = (argTypes): React.ReactElement => (
   />
 )
 
-export const disabled = (argTypes): React.ReactElement => (
+export const disabled = (argTypes: StorybookArguments): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -39,7 +47,7 @@ export const disabled = (argTypes): React.ReactElement => (
     isDisabled
   />
 )
-export const selected = (argTypes): React.ReactElement => (
+export const selected = (argTypes: StorybookArguments): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -48,7 +56,7 @@ export const selected = (argTypes): React.ReactElement => (
     isSelected
   />
 )
-export const focused = (argTypes): React.ReactElement => (
+export const focused = (argTypes: StorybookArguments): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -57,7 +65,9 @@ export const focused = (argTypes): React.ReactElement => (
     isFocused
   />
 )
-export const previousMonth = (argTypes): React.ReactElement => (
+export const previousMonth = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -66,7 +76,7 @@ export const previousMonth = (argTypes): React.ReactElement => (
     isPrevMonth
   />
 )
-export const sameMonth = (argTypes): React.ReactElement => (
+export const sameMonth = (argTypes: StorybookArguments): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -75,7 +85,7 @@ export const sameMonth = (argTypes): React.ReactElement => (
     isFocusedMonth
   />
 )
-export const nextMonth = (argTypes): React.ReactElement => (
+export const nextMonth = (argTypes: StorybookArguments): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -84,7 +94,7 @@ export const nextMonth = (argTypes): React.ReactElement => (
     isNextMonth
   />
 )
-export const today = (argTypes): React.ReactElement => (
+export const today = (argTypes: StorybookArguments): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -94,7 +104,9 @@ export const today = (argTypes): React.ReactElement => (
   />
 )
 
-export const isRangeDate = (argTypes): React.ReactElement => (
+export const isRangeDate = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -104,7 +116,9 @@ export const isRangeDate = (argTypes): React.ReactElement => (
   />
 )
 
-export const isRangeStart = (argTypes): React.ReactElement => (
+export const isRangeStart = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -113,7 +127,9 @@ export const isRangeStart = (argTypes): React.ReactElement => (
     isRangeStart
   />
 )
-export const isRangeEnd = (argTypes): React.ReactElement => (
+export const isRangeEnd = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -122,7 +138,9 @@ export const isRangeEnd = (argTypes): React.ReactElement => (
     isRangeEnd
   />
 )
-export const isWithinRange = (argTypes): React.ReactElement => (
+export const isWithinRange = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}

src/components/forms/DatePicker/MonthPicker.stories.tsx

@@ -13,16 +13,24 @@ export default {
 }
 */
 
+type StorybookArguments = {
+  handleSelectMonth: (value: number) => void
+}
+
 const testProps = {
   date: new Date('January 20 2021'),
   minDate: parseDateString('0000-01-01') as Date,
 }
 
-export const monthPicker = (argTypes): React.ReactElement => (
+export const monthPicker = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <MonthPicker {...testProps} handleSelectMonth={argTypes.handleSelectMonth} />
 )
 
-export const withMinAndMax = (argTypes): React.ReactElement => (
+export const withMinAndMax = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <MonthPicker
     {...testProps}
     handleSelectMonth={argTypes.handleSelectMonth}