Add TypeScript to the project

Author: pamella

.editorconfig

@@ -10,20 +10,11 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 end_of_line = lf
 
-[*.js]
-indent_size = 2
-
-[*.html]
-indent_size = 2
-
-[*.scss]
+[*.{js,jsx,ts,tsx,json,html,css,scss,md,yml,yaml,swcrc}]
 indent_size = 2
 
 [*.md]
 trim_trailing_whitespace = false
 
 [Makefile]
 indent_style = tab
-
-[*.yml]
-indent_size = 2

.eslintrc.js

@@ -1,26 +1,38 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = {
   root: true,
-  extends: ['vinta/recommended'],
+  extends: ["vinta/recommended-typescript"],
   rules: {
-    "default-param-last": "off",  // due to initialState in Redux
-    "@babel/camelcase": "off"
+    "default-param-last": "off", // due to initialState in Redux
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        ts: "never",
+        tsx: "never",
+      },
+    ],
   },
   env: {
-    es6: true,
     browser: true,
-    jest: true
+    es2021: true,
+    jest: true,
+    node: true,
   },
   settings: {
-    'import/resolver': {
+    "import/resolver": {
+      node: {
+        paths: [path.resolve(__dirname, "node_modules")],
+        extensions: [".js", ".jsx", ".ts", ".tsx"],
+      },
       webpack: {
-        config: path.join(__dirname, '/webpack.config.js'),
-        'config-index': 1
-      }
+        config: path.join(__dirname, "/webpack.config.js"),
+        "config-index": 1,
+      },
     },
     react: {
-      "version": "detect"
+      version: "detect",
     },
-  }
-}
+  },
+};

.swcrc

@@ -0,0 +1,25 @@
+{
+  "jsc": {
+    "parser": {
+      "jsx": true,
+      "tsx": true,
+      "syntax": "typescript",
+      "decorators": true,
+      "dynamicImport": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    }
+  },
+  // The 'env' field is used to specify settings for compiling JavaScript/TypeScript code to be
+  // compatible with older environments.
+  "env": {
+    // 'entry' means SWC will include polyfills for all features used in the code that are not
+    // available in the target environment.
+    "mode": "entry",
+    // 'corejs' specifies the version of core-js to use for polyfills.
+    "corejs": 3
+  }
+}

README.md

@@ -8,6 +8,7 @@
 A [Django](https://www.djangoproject.com/) project boilerplate/template with a multitude of state-of-the-art libraries and tools. If pairing Django with React is a possibility for your project or spinoff, this is the best solution available. Save time with tools like:
 
 -   [React](https://react.dev/), for building interactive UIs
+-   [TypeScript](https://www.typescriptlang.org/), for static type checking
 -   [Poetry](https://python-poetry.org/), for managing the environment and its dependencies
 -   [django-js-reverse](https://github.com/vintasoftware/django-js-reverse), for generating URLs on JS
 -   [React Bootstrap](https://react-bootstrap.github.io/), for responsive styling

babel.config.json

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: string | undefined;
+  export = value;
+}

frontend/assets/images/index.d.ts

@@ -1,5 +1,4 @@
 import * as Sentry from "@sentry/react";
-import React from "react";
 import { Provider } from "react-redux";
 
 import Home from "./pages/Home";

frontend/js/App.js renamed to frontend/js/App.tsx

@@ -1,16 +1,15 @@
 // import pages
 import * as Sentry from "@sentry/browser";
-import React from "react";
 import { createRoot } from "react-dom/client";
 
-import "../sass/style.scss";
-
 import App from "./App";
 
+import "../sass/style.scss";
+
 Sentry.init({
   dsn: window.SENTRY_DSN,
   release: window.COMMIT_SHA,
 });
 
-const root = createRoot(document.getElementById("react-app"));
+const root = createRoot(document.getElementById("react-app") as HTMLElement);
 root.render(<App />);

frontend/js/constants/index.js renamed to frontend/js/constants/index.ts

@@ -1,13 +1,14 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import Button from "react-bootstrap/Button";
 import { useDispatch, useSelector } from "react-redux";
 
 import DjangoImgSrc from "../../assets/images/django-logo-negative.png";
+import { AppDispatch, RootState } from "../store";
 import { fetchRestCheck } from "../store/rest_check";
 
 const Home = () => {
-  const dispatch = useDispatch();
-  const restCheck = useSelector((state) => state.restCheck);
+  const dispatch: AppDispatch = useDispatch();
+  const restCheck = useSelector((state: RootState) => state.restCheck);
   useEffect(() => {
     const action = fetchRestCheck();
     dispatch(action);
@@ -35,7 +36,9 @@ const Home = () => {
         Click to test if Sentry is capturing frontend errors! (Should only work
         in Production)
       </Button>
-      {showBugComponent && showBugComponent.field.notexist}
+      {/* NOTE: The next line intentionally contains an error for testing frontend errors in Sentry. */}
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+      {showBugComponent && (showBugComponent as any).field.notexist}
     </>
   );
 };

frontend/js/index.js renamed to frontend/js/index.tsx

@@ -15,8 +15,8 @@ jest.mock("../../store/rest_check", () => ({
 
 describe("Home", () => {
   beforeEach(() => {
-    useDispatch.mockReturnValue(jest.fn());
-    useSelector.mockReturnValue({
+    (useDispatch as jest.Mock).mockReturnValue(jest.fn());
+    (useSelector as jest.Mock).mockReturnValue({
       data: { payload: { result: "Test Result" } },
     });
   });
@@ -30,7 +30,7 @@ describe("Home", () => {
 
     expect(screen.getByText("Static assets")).toBeInTheDocument();
     expect(screen.getByText("Rest API")).toBeInTheDocument();
-    expect(screen.getByText("Test Result")).toBeInTheDocument();
+    expect(await screen.findByText("Test Result")).toBeInTheDocument();
   });
 
   test("dispatches fetchRestCheck action on mount", async () => {

frontend/js/pages/Home.js renamed to frontend/js/pages/Home.tsx

@@ -4,6 +4,7 @@ import cookie from "cookie";
 const api = axios.create();
 api.interceptors.request.use((config) => {
   const { csrftoken } = cookie.parse(document.cookie);
+  config.headers = config.headers || {};
   if (csrftoken) {
     config.headers["X-CSRFTOKEN"] = csrftoken;
   }

frontend/js/pages/__tests__/Home.spec.js renamed to frontend/js/pages/__tests__/Home.spec.tsx

@@ -0,0 +1,18 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+import { rootReducer } from "./reducers";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const configureReduxStore = (preloadedState: any) => {
+  const store = configureStore({
+    reducer: rootReducer,
+    preloadedState,
+  });
+  return store;
+};
+
+export default configureReduxStore;
+
+const store = configureReduxStore({});
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

frontend/js/routes/index.js renamed to frontend/js/routes/index.ts

@@ -9,9 +9,19 @@ export const fetchRestCheck = createAsyncThunk("restCheck/fetch", async () => {
 });
 
 // Reducer
+interface Payload {
+  result: string;
+}
+interface RestCheckState {
+  data: {
+    isLoading: boolean;
+    payload?: Payload;
+    error?: unknown;
+  };
+}
 export const restCheckReducer = createSlice({
   name: "restCheck",
-  initialState: {},
+  initialState: { data: { isLoading: false } } as RestCheckState,
   reducers: {},
   extraReducers: (builder) => {
     builder.addCase(fetchRestCheck.pending, (state) => {

frontend/js/store/api.js renamed to frontend/js/store/api.ts

@@ -0,0 +1,10 @@
+export {};
+
+declare global {
+  interface Window {
+    SENTRY_DSN: string;
+    COMMIT_SHA: string;
+
+    Urls: unknown;
+  }
+}

frontend/js/store/index.js

@@ -0,0 +1,3 @@
+import Urls from "./urls";
+
+export { Urls };

frontend/js/store/index.ts

@@ -1,38 +1,27 @@
-'use strict';
+"use strict";
 
 module.exports = {
-  transform: {
-    '^.+\\.jsx$': 'babel-jest',
-    '^.+\\.js$': 'babel-jest',
-  },
   moduleNameMapper: {
-    '^.+\\.(css|scss|png|svg|jpg|jpeg|gif|webp)$': 'jest-transform-stub',
+    "^.+\\.(css|scss|png|svg|jpg|jpeg|gif|webp)$": "jest-transform-stub",
   },
-  transformIgnorePatterns: [
-    'node_modules/*',
-  ],
-  modulePaths: [
-    'frontend',
-    'frontend/js',
-    'frontend/js/app',
-  ],
-  setupFilesAfterEnv: [
-    './jest.setup.js',
-  ],
-  testEnvironment: 'jsdom',
-  collectCoverageFrom: [
-    'frontend/js/**/*.{js,jsx}',
-  ],
+  transformIgnorePatterns: ["node_modules/*"],
+  modulePaths: ["frontend", "frontend/js", "frontend/js/app"],
+  setupFilesAfterEnv: ["./jest.setup.js"],
+  testEnvironment: "jsdom",
+  collectCoverageFrom: ["frontend/js/**/*.{js,jsx,ts,tsx}"],
   coveragePathIgnorePatterns: [
-    'frontend/js/store.js',
-    'frontend/js/index.js',
-    'frontend/js/constants/*',
-    'frontend/js/pages/*',
-    'frontend/js/tests/*',
+    "frontend/js/store.js",
+    "frontend/js/index.js",
+    "frontend/js/constants/*",
+    "frontend/js/pages/*",
+    "frontend/js/tests/*",
   ],
   coverageThreshold: {
     global: {
       statements: 10,
     },
   },
+  transform: {
+    "^.+\\.(t|j)sx?$": "@swc/jest",
+  },
 };

frontend/js/store/reducers.js renamed to frontend/js/store/reducers.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

frontend/js/store/rest_check.js renamed to frontend/js/store/rest_check.ts

@@ -7,13 +7,13 @@
     "node": ">=18 <21"
   },
   "browserslist": "> 0.25%, not dead",
-  "main": "frontend/js/index.js",
+  "main": "frontend/js/index.tsx",
   "scripts": {
     "test": "jest",
     "test:watch": "npm test -- --watch",
     "test:update": "npm test -- --u",
     "dev": "webpack serve --mode=development --hot",
-    "build": "NODE_ENV=production webpack --progress --bail --mode=production",
+    "build": "NODE_ENV=production tsc && webpack --progress --bail --mode=production",
     "lint": "eslint frontend --fix",
     "coverage": "jest --coverage"
   },
@@ -34,19 +34,21 @@
     "react-router": "~6.21.0"
   },
   "devDependencies": {
-    "@babel/core": "~7.23.6",
-    "@babel/eslint-parser": "~7.23.3",
-    "@babel/eslint-plugin": "~7.23.5",
-    "@babel/node": "~7.22.19",
-    "@babel/preset-env": "~7.23.6",
-    "@babel/preset-react": "~7.23.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@swc/cli": "^0.3.12",
+    "@swc/core": "^1.5.5",
+    "@swc/jest": "^0.2.36",
     "@testing-library/jest-dom": "~6.1.5",
     "@testing-library/react": "~14.1.2",
     "@testing-library/user-event": "~14.5.1",
+    "@types/cookie": "^0.6.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.12.11",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "ajv": "~8.12.0",
-    "babel-jest": "~29.7.0",
-    "babel-loader": "~9.1.3",
     "circular-dependency-plugin": "~5.2.2",
     "css-loader": "~6.8.1",
     "eslint": "~8.56.0",
@@ -74,6 +76,8 @@
     "sass": "~1.69.5",
     "sass-loader": "~13.3.2",
     "style-loader": "~3.3.3",
+    "swc-loader": "^0.2.6",
+    "typescript": "^5.4.5",
     "webpack": "~5.89.0",
     "webpack-bundle-tracker": "~3.0.0",
     "webpack-cli": "~5.1.4",