chore: upgrade typescript to 5.4 (#35181)

## Description
Upgrade Typescript from 4.9.5 to 5.4

Upgrading to 5.5 is not possible until we upgrade colors.js lib. It will
be done in separate PR
More details here
color-js/color.js#560 (comment)

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10163124159>
> Commit: 8d2e93f
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10163124159&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Tue, 30 Jul 2024 14:11:42 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Updated TypeScript dependency to the latest version (5.4), enhancing
overall functionality with potential new features and improvements.

- **Improvements**
- Enhanced type safety by refining the `isString` function, allowing
better type inference and preventing runtime errors.
- Improved comments and annotations in the `indirectEval` function for
better clarity on its usage and intent.
- Corrected typographical errors in error handling logic across multiple
controllers, improving reliability in error messaging.
- Updated export style for `IconNames` to clarify its purpose as a type,
enhancing developer experience.

- **Configuration Changes**
- Updated Jest configurations to better support ECMAScript Modules
(ESM), improving compatibility and allowing for more flexible module
handling.
- Adjusted TypeScript configuration to enhance module handling and
compatibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/package.json

@@ -235,7 +235,7 @@
     "to-json-schema": "^0.2.5",
     "toposort": "^2.0.2",
     "tslib": "^2.3.1",
-    "typescript": "4.9.5",
+    "typescript": "5.4",
     "unescape-js": "^1.1.4",
     "url-search-params-polyfill": "^8.0.0",
     "uuid": "^9.0.0",
@@ -373,7 +373,7 @@
     "redux-devtools-extension": "^2.13.8",
     "redux-mock-store": "^1.5.4",
     "redux-saga-test-plan": "^4.0.6",
-    "ts-jest": "27.0.0",
+    "ts-jest": "29.1.0",
     "ts-jest-mock-import-meta": "^0.12.0",
     "ts-loader": "^9.4.1",
     "ts-node": "^10.9.1",

app/client/packages/ast/package.json

@@ -28,7 +28,7 @@
     "rollup-plugin-generate-package-json": "^3.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.32.0",
-    "typescript": "4.5.5",
+    "typescript": "5.4",
     "unescape-js": "^1.1.4"
   },
   "devDependencies": {
@@ -37,6 +37,6 @@
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "jest": "29.0.3",
-    "ts-jest": "29.0.1"
+    "ts-jest": "29.1.0"
   }
 }

app/client/packages/design-system/ads/jest.config.js

@@ -5,7 +5,15 @@ module.exports = {
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"], // Optional: Additional setup
   testEnvironment: "jsdom",
   transform: {
-    "^.+\\.(ts|tsx)$": "ts-jest", // Use ts-jest for transforming TypeScript files
+    "^.+\\.(ts|tsx)$": [
+      "ts-jest",
+      {
+        useESM: true,
+        tsconfig: {
+          verbatimModuleSyntax: false,
+        },
+      },
+    ], // Use ts-jest for transforming TypeScript files
     "\\.(svg)$": "<rootDir>/fileTransformer.js", // Create this file for SVG handling (see below)
   },
   moduleNameMapper: {

app/client/packages/design-system/ads/src/Icon/Icon.types.ts

@@ -18,4 +18,4 @@ export type IconProps = {
   wrapperColor?: string;
 } & React.HTMLAttributes<HTMLSpanElement>;
 
-export { IconNames };
+export type { IconNames };

app/client/packages/design-system/theming/jest.config.js

@@ -1,5 +1,15 @@
+const { globals } = require("@design-system/widgets-old/jest.config");
+
 module.exports = {
   preset: "ts-jest",
   roots: ["<rootDir>/src"],
   testEnvironment: "jsdom",
+  globals: {
+    "ts-jest": {
+      useESM: true,
+      tsconfig: {
+        verbatimModuleSyntax: false,
+      },
+    },
+  },
 };

app/client/packages/design-system/widgets/jest.config.js

@@ -6,4 +6,12 @@ module.exports = {
     "\\.(css)$": "<rootDir>../../../test/__mocks__/styleMock.js",
     "@design-system/widgets": "<rootDir>/src/",
   },
+  globals: {
+    "ts-jest": {
+      useESM: true,
+      tsconfig: {
+        verbatimModuleSyntax: false,
+      },
+    },
+  },
 };

app/client/packages/dsl/jest.config.js

@@ -1,6 +1,14 @@
 module.exports = {
   transform: {
-    "^.+\\.(png|js|ts|tsx)$": "ts-jest",
+    "^.+\\.(png|js|ts|tsx)$": [
+      "ts-jest",
+      {
+        useESM: true,
+        tsconfig: {
+          verbatimModuleSyntax: false,
+        },
+      },
+    ],
   },
   verbose: true,
 };

app/client/packages/dsl/package.json

@@ -21,7 +21,7 @@
     "rollup-plugin-generate-package-json": "^3.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.32.0",
-    "typescript": "4.5.5"
+    "typescript": "5.4"
   },
   "devDependencies": {
     "@rollup/plugin-json": "^6.0.0",

app/client/packages/rts/package.json

@@ -35,8 +35,8 @@
     "esbuild": "^0.19.4",
     "jest": "^29.3.1",
     "supertest": "^6.3.3",
-    "ts-jest": "^29.0.3",
+    "ts-jest": "29.1.0",
     "tsc-alias": "^1.8.2",
-    "typescript": "4.9.5"
+    "typescript": "5.4"
   }
 }

app/client/packages/rts/src/controllers/Ast/AstController.ts

@@ -38,7 +38,7 @@ export default class AstController extends BaseController {
     } catch (err) {
       return super.sendError(
         res,
-        super.serverErrorMessaage,
+        this.serverErrorMessage,
         [err.message],
         StatusCodes.INTERNAL_SERVER_ERROR,
       );
@@ -65,7 +65,7 @@ export default class AstController extends BaseController {
     } catch (err) {
       return super.sendError(
         res,
-        super.serverErrorMessaage,
+        this.serverErrorMessage,
         [err.message],
         StatusCodes.INTERNAL_SERVER_ERROR,
       );
@@ -93,7 +93,7 @@ export default class AstController extends BaseController {
     } catch (err) {
       return super.sendError(
         res,
-        super.serverErrorMessaage,
+        this.serverErrorMessage,
         [err.message],
         StatusCodes.INTERNAL_SERVER_ERROR,
       );

app/client/packages/rts/src/controllers/BaseController.ts

@@ -21,7 +21,7 @@ interface ResponseData {
 }
 
 export default class BaseController {
-  serverErrorMessaage = "Something went wrong";
+  serverErrorMessage = "Something went wrong";
   sendResponse(
     response: Response,
     result?: unknown,

app/client/packages/rts/src/controllers/Dsl/DslController.ts

@@ -15,7 +15,7 @@ export default class DSLController extends BaseController {
     } catch (err) {
       return super.sendError(
         res,
-        super.serverErrorMessaage,
+        this.serverErrorMessage,
         [err.message],
         StatusCodes.INTERNAL_SERVER_ERROR,
       );
@@ -28,7 +28,7 @@ export default class DSLController extends BaseController {
     } catch (err) {
       return super.sendError(
         res,
-        super.serverErrorMessaage,
+        this.serverErrorMessage,
         [err.message],
         StatusCodes.INTERNAL_SERVER_ERROR,
       );

app/client/packages/rts/src/controllers/healthCheck/HealthCheckController.ts

@@ -14,7 +14,7 @@ export default class HealthCheckController extends BaseController {
     } catch (err) {
       return super.sendError(
         res,
-        super.serverErrorMessaage,
+        this.serverErrorMessage,
         [err.message],
         StatusCodes.INTERNAL_SERVER_ERROR,
       );

app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx

@@ -55,6 +55,7 @@ function DocsSearchModal({
         className={`${className}`}
         data-testid="t--global-search-modal"
       >
+        {/* @ts-expect-error Figure out how to pass string to constant className */}
         <ModalBody className={`${className}`}>{children}</ModalBody>
       </StyledDocsSearchModal>
     </Modal>

app/client/src/pages/Editor/gitSync/Tabs/GitConnection.tsx

@@ -351,6 +351,7 @@ function GitConnection({ isImport }: Props) {
 
   return (
     <>
+      {/* @ts-expect-error Figure out how to pass string to constant className */}
       <ModalBody className={Classes.GIT_SYNC_MODAL}>
         <Container
           data-testid="t--git-connection-container"

app/client/src/utils/helpers.tsx

@@ -524,7 +524,7 @@ export const removeFalsyEntries = (arr: any[]): any[] => {
  * ['Pawan', 'Goku'] -> false
  * { name: "Pawan"} -> false
  */
-export const isString = (str: any) => {
+export const isString = (str: any): str is string => {
   return typeof str === "string" || str instanceof String;
 };
 

app/client/src/workers/Evaluation/indirectEval.ts

@@ -1,5 +1,5 @@
 export default function indirectEval(script: string) {
-  /* Indirect eval to prevent local scope access. 
-  Ref. - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#description */
+  // @ts-expect-error We want evaluation to be done only on global scope and shouldn't have access to any local scope variable.
+  // Ref. - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#description
   return (1, eval)(script);
 }

app/client/tsconfig.json

@@ -32,7 +32,7 @@
     "sourceMap": true,
     "baseUrl": "./src",
     "noFallthroughCasesInSwitch": true,
-    "importsNotUsedAsValues": "error"
+    "verbatimModuleSyntax": true
   },
   "include": ["./src/**/*", "./packages"],
   "exclude": ["./packages/rts", "**/node_modules", "**/.*/"]