Convert the project to typescript

Author: markrickert

package.json

@@ -5,12 +5,12 @@
   "homepage": "https://react-native-community.github.io/upgrade-helper",
   "scripts": {
     "build": "EXTEND_ESLINT=true react-app-rewired build",
-    "docker-test-e2e": "yarn start-and-wait && react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/.*(\\.|).e2e.spec.js?$'",
+    "docker-test-e2e": "yarn start-and-wait && react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/.*(\\.|).e2e.spec.(js|jsx|ts|tsx)?$'",
     "lint": "eslint . --cache --report-unused-disable-directives",
     "prepare": "husky install",
     "start": "EXTEND_ESLINT=true react-app-rewired start",
     "start-and-wait": "yarn start & wget --retry-connrefused --waitretry=1 --read-timeout=20 --timeout=15 -t 30 http://localhost:3000/",
-    "test": "react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/((?!e2e).)*.spec.js?$'",
+    "test": "react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/((?!e2e).)*.spec.(js|jsx|ts|tsx)?$'",
     "test-e2e": "docker-compose run tests"
   },
   "dependencies": {
@@ -37,7 +37,16 @@
   "devDependencies": {
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/eslint-plugin": "^11.10.0",
+    "@jest/globals": "^29.7.0",
     "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.52",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "@types/react-dom": "^18.2.18",
+    "@types/use-persisted-state": "^0.3.4",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "customize-cra": "^1.0.0",
     "eslint": "^8.35.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -47,7 +56,9 @@
     "prettier": "2.8.4",
     "pretty-quick": "3.1.3",
     "puppeteer": "10.0.0",
-    "react-app-rewired": "^2.2.1"
+    "react-app-rewired": "^2.2.1",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.3.3"
   },
   "browserslist": {
     "production": [
@@ -62,6 +73,7 @@
     ]
   },
   "eslintConfig": {
+    "parser": "@babel/eslint-parser",
     "extends": [
       "react-app"
     ],
@@ -74,17 +86,28 @@
       "jsx-a11y/accessible-emoji": "off",
       "import/no-anonymous-default-export": "off",
       "react-hooks/exhaustive-deps": "off"
-    }
+    },
+    "overrides": [
+      {
+        "files": [
+          "src/__tests__/**/*"
+        ],
+        "env": {
+          "jest": true
+        }
+      }
+    ]
   },
   "husky": {
     "hooks": {
-      "pre-commit": "pretty-quick --staged --pattern \"src/**/*.*(js|jsx)\"",
+      "pre-commit": "pretty-quick --staged --pattern \"src/**/*.*(js|jsx|ts|tsx)\"",
       "pre-push": "yarn run lint"
     }
   },
   "jest": {
+    "preset": "ts-jest",
     "testMatch": [
-      "**/__tests__/**/*.spec.js"
+      "**/__tests__/**/*.spec.(js|jsx|ts|tsx)"
     ],
     "setupFilesAfterEnv": [
       "<rootDir>/jest.setup.js"

src/App.jsx renamed to src/App.tsx

@@ -26,8 +26,22 @@ const shake = keyframes`
   }
 `
 
+interface CompletedFilesCounterProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  completed: number
+  total: number
+  popoverContent: string
+  popoverCursorType: string
+}
+
 const CompletedFilesCounter = styled(
-  ({ completed, total, popoverContent, popoverCursorType, ...props }) => (
+  ({
+    completed,
+    total,
+    popoverContent,
+    popoverCursorType,
+    ...props
+  }: CompletedFilesCounterProps) => (
     <div {...props}>
       <Popover
         content={popoverContent}