typescript

client/package.json

@@ -5,7 +5,7 @@
   "description": "tech tools hosted on cloudflare worker",
   "main": "index.js",
   "scripts": {
-    "build": "tsc && webpack",
+    "build": "webpack",
     "deploy": "wrangler deploy src/index.js",
     "dev": "webpack-dev-server --config webpack-dev.config.js --open",
     "prepare": "husky",
@@ -28,7 +28,6 @@
     "@babel/core": "^7.24.8",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",

client/src/pages/Home.tsx

@@ -12,14 +12,14 @@ const Home = () => {
         <br/>
         <h3>This is a basic React page deployed on Cloudflare Workers.</h3>
         <br/>
-        <pre><strong>Your name:</strong> { tester }</pre>
+        <pre><strong>Your name:</strong> {tester}</pre>
 
-        <p>Count: { count }</p>
+        <p>Count: {count}</p>
         <br/>
         <Button
           color="primary"
           type="button"
-          onClick={ () => setCount(count + 1) }
+          onClick={() => setCount(count + 1)}
         >
           Increase
         </Button>

client/src/routers/encoding/base64/router.ts

@@ -1,26 +1,26 @@
 import { Buffer } from 'buffer';
 
-export const base64Handler = async ({ params }) => {
-    // Decode text like "Hello%20world" into "Hello world"
-    let input = decodeURIComponent(params.text)
+export const base64Handler = async ({ params }: any) => {
+  // Decode text like "Hello%20world" into "Hello world"
+  let input = decodeURIComponent(params.text)
 
-    // Construct a buffer from our input
-    let buffer = Buffer.from(input, "utf8")
+  // Construct a buffer from our input
+  let buffer = Buffer.from(input, "utf8")
 
-    // Serialise the buffer into a base64 string
-    let base64 = buffer.toString("base64")
+  // Serialise the buffer into a base64 string
+  let base64 = buffer.toString("base64")
 
-    const backendApi = 'https://6wkf624dt4.execute-api.us-east-1.amazonaws.com/prod/';
-    const response = await fetch(backendApi)
-    const data = await response.json()
+  const backendApi = 'https://6wkf624dt4.execute-api.us-east-1.amazonaws.com/prod/';
+  const response = await fetch(backendApi)
+  const data = await response.json()
 
-    // Return the HTML with the string to the client
-    return new Response(`
+  // Return the HTML with the string to the client
+  return new Response(`
 <p>Base64 encoding: <code>${base64}</code></p>
 <p>${JSON.stringify(data, null, 2)}</p>
 `, {
-        headers: {
-            "Content-Type": "text/html"
-        }
-    })
+    headers: {
+      "Content-Type": "text/html"
+    }
+  })
 };

client/src/routers/handler.ts

@@ -9,7 +9,7 @@ import { getAssetFromKV } from "@cloudflare/kv-asset-handler";
  * @param {Router} router - The router object responsible for handling non-static asset requests.
  * @returns {Response} A Response object containing the requested asset or routed content.
  */
-export const routesAndAssetsHandler = async (event, router) => {
+export const routesAndAssetsHandler = async (event: any, router: any): Promise<Response> => {
   // Extract the request from the event
   const request = event.request;
 

client/src/routers/post/router.ts

@@ -7,24 +7,24 @@ Try the below curl command to send JSON:
 
 $ curl -X POST <worker> -H "Content-Type: application/json" -d '{"abc": "def"}'
 */
-export const postHandler = async request => {
-    // Create a base object with some fields.
-    let fields = {
-        "asn": request.cf.asn,
-        "colo": request.cf.colo
-    }
+export const postHandler = async (request: any) => {
+  // Create a base object with some fields.
+  let fields: any = {
+    "asn": request.cf.asn,
+    "colo": request.cf.colo
+  }
 
-    // If the POST data is JSON then attach it to our response.
-    if (request.headers.get("Content-Type") === "application/json") {
-        fields["json"] = await request.json()
-    }
+  // If the POST data is JSON then attach it to our response.
+  if (request.headers.get("Content-Type") === "application/json") {
+    fields["json"] = await request.json()
+  }
 
-    // Serialise the JSON to a string.
-    const returnData = JSON.stringify(fields, null, 2);
+  // Serialise the JSON to a string.
+  const returnData = JSON.stringify(fields, null, 2);
 
-    return new Response(returnData, {
-        headers: {
-            "Content-Type": "application/json"
-        }
-    })
+  return new Response(returnData, {
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
 };

client/src/routers/root/router.ts

@@ -4,7 +4,7 @@ import indexHTML from '../../../dist/index.html';
  * Handles requests to serve the index.html file.
  * Uses the indexHTML imported from the public directory.
  */
-export const rootHandler = async (request) => {
+export const rootHandler = async (request: any) => {
   return new Response(indexHTML, {
     headers: {
       'Content-Type': 'text/html',

client/tsconfig.json

@@ -9,22 +9,17 @@
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
-    "noImplicitAny": false,
+    "noImplicitAny": true,
     "noEmit": false,
     "outDir": "dist",
     "esModuleInterop": true,
-    "module": "commonjs",
     "target": "esnext",
+    "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
     "paths": {
       "@/*": [
         "./src/*"

client/webpack.config.js

@@ -17,14 +17,19 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(ts|tsx)$/,
+        test: /\.ts(x?)$/,
         exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            configFile: './.babelrc',
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              configFile: './.babelrc',
+            },
           },
-        },
+          {
+            loader: 'ts-loader'
+          }
+        ]
       },
       {
         test: /\.[s]?css$/,