Migrate react app to typescript

Installed the necessary dependencies and config files

reactapp/README.md

@@ -1 +0,0 @@
-

reactapp/package-lock.json

@@ -11,11 +11,16 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "@types/jest": "^29.5.12",
+        "@types/node": "^20.11.16",
+        "@types/react": "^18.2.51",
+        "@types/react-dom": "^18.2.18",
         "node-sass": "^9.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "scss": "^0.2.4",
+        "typescript": "^5.3.3",
         "web-vitals": "^2.1.4"
       }
     },
@@ -4200,9 +4205,9 @@
       }
     },
     "node_modules/@types/jest": {
-      "version": "29.5.11",
+      "version": "29.5.12",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.11.tgz",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.12.tgz",
-      "integrity": "sha512-S2mHmYIVe13vrm6q4kN6fLYYAka15ALQki/vgDC3mIukEOx8WJlv0kQPM+d4w8Gp6u0uSdKND04IlTXBv0rwnQ==",
+      "integrity": "sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==",
       "dependencies": {
         "expect": "^29.0.0",
         "pretty-format": "^29.0.0"
@@ -4456,9 +4461,9 @@
       "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag=="
     },
     "node_modules/@types/node": {
-      "version": "20.11.14",
+      "version": "20.11.16",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.14.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.16.tgz",
-      "integrity": "sha512-w3yWCcwULefjP9DmDDsgUskrMoOy5Z8MiwKHr1FvqGPtx7CvJzQvxD7eKpxNtklQxLruxSXWddyeRtyud0RcXQ==",
+      "integrity": "sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -4507,9 +4512,9 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.49",
+      "version": "18.2.51",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.49.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.51.tgz",
-      "integrity": "sha512-nEJonYlS7+LUVdqRBHldXLRa7ZDeOm/rJbJwGbjmn2hqhmdO4C6vSgvhhNv2qBDhGSv2oLuUA+f5JtyUJDY6bA==",
+      "integrity": "sha512-XeoMaU4CzyjdRr3c4IQQtiH7Rpo18V07rYZUucEZQwOUEtGgTXv7e6igQiQ+xnV6MbMe1qjEmKdgMNnfppnXfg==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -18543,16 +18548,15 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
+      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {

reactapp/package.json

@@ -6,11 +6,16 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.51",
+    "@types/react-dom": "^18.2.18",
     "node-sass": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "scss": "^0.2.4",
+    "typescript": "^5.3.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

reactapp/src/App.tsx

@@ -5,6 +5,7 @@ import ProfilePage from "./components/pages/ProfilePage";
 import ScamPage from "./components/pages/ScamPage";
 import Header from "./components/blocks/Header";
 import SearchIcon from "../src/assets/icons/search-form__icon.svg";
+import React from "react";
 
 export default function App() {
   return (

reactapp/src/components/blocks/Header.tsx

@@ -1,4 +1,6 @@
-export default function Header() {
+import React from "react";
+
+export default function Header(SearchIcon:any) {
     return(
         <header className="header">
             <h1 className="header__title">SuSMarket</h1>

reactapp/src/components/blocks/LoginMenu.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export default function LoginMenu() {
     return(
         <>

reactapp/src/components/blocks/PopupMap.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export default function PopupMap() {
     return(
         <>

reactapp/src/components/blocks/ProductCard.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export default function ProductCard() {
     return(
         <>

reactapp/src/components/pages/HomePage.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export default function HomePage() {
     return(
         <section>

reactapp/src/components/pages/PaymentPage.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export default function PaymentPage() {
     return(
         <>

reactapp/src/components/pages/ProductPage.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export default function ProductPage() {
     return(
         <>

reactapp/src/components/pages/ProfilePage.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export default function ProfilePage() {
     return(
         <>

reactapp/src/components/pages/ScamPage.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export default function ScamPage() {
     return(
         <>

reactapp/src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    export default content;
+}

reactapp/src/index.tsx

@@ -4,7 +4,7 @@ import './index.scss';
 import './reset.css';
 import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
     <App />

reactapp/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src",
+    "src/components",
+    "src/custom.d.ts"
+  ]
+}