pairing typescript in project search products

package.json

@@ -4,15 +4,16 @@
   "description": "",
   "private": true,
   "scripts": {
-    "ts": "rm -rf dist/ && tsc -w",
-    "dev": "concurrently \"webpack --config webpack.dev.js\" \"npm start\"",
+    "ts": "tsc",
+    "dev": "concurrently \"npm run ts -- -w\"  \"webpack --config webpack.dev.js\" \"npm start\"",
     "start": "nodemon dist/server/app.js",
-    "build": "webpack --config webpack.prod.js"
+    "build": "npm run ts && webpack --config webpack.prod.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@types/express": "^4.17.17",
     "express": "^4.18.2",
     "nodemon": "^3.0.1"
   },

src/client/App.ts

@@ -1,27 +1,15 @@
 import HomeScreen from "./screens/HomePage";
 import AboutScreen from "./screens/AboutPage";
-import InputProduct from "./screens/InputProduct";
-import FavoritePage from "./screens/FavoritePage";
 // import NotFoundPage from "./screens/NotFound";
-import SearchContact from "./screens/SeachContactPage";
 import { state } from "./state";
 
 function App() {
   const homeScreen = HomeScreen();
   const aboutScreen = AboutScreen();
-  const inputProductScreen = InputProduct();
-  const favoriteScreen = FavoritePage();
-  const searchContactScreen = SearchContact();
   // const notFoundScreen = NotFoundPage();
 
   if (state.path == "/home") {
     return homeScreen;
-  } else if (state.path == "/input-product") {
-    return inputProductScreen;
-  } else if (state.path == "/favorite") {
-    return favoriteScreen;
-  } else if (state.path == "/search-contact") {
-    return searchContactScreen;
   } else if (state.path == "/about") {
     return aboutScreen;
   } else {

src/client/components/Link.ts

@@ -1,5 +1,9 @@
-import { setState, render } from "../state";
-import { LinkProps } from "./typings/products";
+import { setState } from "../state";
+
+export type LinkProps = {
+  href: string;
+  label: string;
+};
 
 function Link(props: LinkProps) {
   const link = document.createElement("a");
@@ -8,10 +12,11 @@ function Link(props: LinkProps) {
   link.textContent = props.label;
 
   link.onclick = function (event) {
-    event.preventDefault();
-    const url = new URL(event.target.href);
-    setState({ path: url.pathname });
-    render();
+    if (event.target instanceof HTMLLinkElement) {
+      event.preventDefault();
+      const url = new URL(event.target.href);
+      setState({ path: url.pathname });
+    }
   };
 
   return link;

src/client/components/Pagination.ts

@@ -39,7 +39,7 @@ function Pagination() {
     selectLimit.appendChild(optionLimit);
   });
 
-  selectLimit.value = state.limitItem;
+  selectLimit.value = state.limitItem.toString();
 
   wrapperPagination.style.marginTop = "20px";
 

src/client/components/ProductInput.ts

@@ -5,7 +5,8 @@ function ProductInput() {
   input.id = "input";
   input.value = state.inputValue;
   input.oninput = function (event) {
-    setState({ inputValue: event.target.value });
+    if (event.target instanceof HTMLInputElement)
+      setState({ inputValue: event.target.value });
   };
   input.placeholder = "Input your name";
 

src/client/index.ts

@@ -1,3 +1,5 @@
 import { render, onStateChange, state } from "./state";
 render();
-onStateChange({}, state);
+
+// TODO: Improve this code later to remove any
+onStateChange({} as any, state);