stricter tsconfig

package.json

@@ -1,7 +1,19 @@
 {
   "name": "spotify-manager-web",
   "version": "0.1.0",
+  "description": "Frontend for spotify-manager",
+  "exports": "./src/index.tsx",
+  "type": "module",
   "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/20kaushik02/spotify-manager-web.git"
+  },
+  "license": "MIT",
+  "author": "Kaushik Ravishankar <rknarayan02@gmail.com>",
+  "bugs": {
+    "url": "https://github.com/20kaushik02/spotify-manager-web/issues"
+  },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@testing-library/jest-dom": "^6.6.3",

src/App.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import { createContext, useEffect, useState } from "react";
+import { createContext, useEffect, useState, type Context } from "react";
 import { BrowserRouter } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 
@@ -9,27 +9,28 @@ import styles from "./App.module.css";
 // Assets
 
 // Utils
-import ScrollToTop from "./utils/ScrollToTop";
+import ScrollToTop from "./utils/ScrollToTop.tsx";
 
 // Components
-import Navbar from "./components/Navbar/index";
+import Navbar from "./components/Navbar/index.tsx";
 
 // Routes
-import AllRoutes from "./routes/AllRoutes";
+import AllRoutes from "./routes/AllRoutes.tsx";
 import {
   showErrorToastNotification,
   showInfoToastNotification,
   showWarnToastNotification,
-} from "./components/ToastNotification";
-import { apiAuthCheck, apiAuthRefresh } from "./api/auth";
+} from "./components/ToastNotification/index.tsx";
+import { apiAuthCheck, apiAuthRefresh } from "./api/auth.ts";
 import { ReactFlowProvider } from "@xyflow/react";
 
 // Contexts
-export const WidthContext = createContext(0);
-export const AuthContext = createContext(false);
-export const RefreshAuthContext = createContext(async () => false);
+export const WidthContext: Context<number> = createContext(0);
+export const AuthContext: Context<boolean> = createContext(false);
+export const RefreshAuthContext: Context<() => Promise<boolean>> =
+  createContext(async () => false as boolean); // why is this needed...
 
-function App() {
+function App(): React.ReactNode {
   // States
   const [width, setWidth] = useState(0);
   const [auth, setAuth] = useState(false);

src/api/auth.ts

@@ -1,6 +1,6 @@
-import { AxiosResponse } from "axios";
-import { apiRespBaseType, axiosInstance } from "./axiosInstance";
-import { authHealthCheckURL, authRefreshURL } from "./paths";
+import type { AxiosResponse } from "axios";
+import { type apiRespBaseType, axiosInstance } from "./axiosInstance.ts";
+import { authHealthCheckURL, authRefreshURL } from "./paths.ts";
 
 export const apiAuthCheck = async (): Promise<
   AxiosResponse<apiRespBaseType, any>

src/api/axiosInstance.ts

@@ -1,7 +1,7 @@
-import axios from "axios";
-import { backendDomain } from "./paths";
+import axios, { type AxiosInstance } from "axios";
+import { backendDomain } from "./paths.ts";
 
-export const axiosInstance = axios.create({
+export const axiosInstance: AxiosInstance = axios.create({
   baseURL: backendDomain,
   withCredentials: true,
   headers: {

src/api/operations.ts

@@ -1,5 +1,5 @@
-import { AxiosResponse } from "axios";
-import { apiRespBaseType, axiosInstance } from "./axiosInstance";
+import type { AxiosResponse } from "axios";
+import { type apiRespBaseType, axiosInstance } from "./axiosInstance.ts";
 import {
   opBackfillLinkURL,
   opCreateLinkURL,
@@ -7,7 +7,7 @@ import {
   opFetchGraphURL,
   opPruneLinkURL,
   opUpdateUserDataURL,
-} from "./paths";
+} from "./paths.ts";
 
 interface fetchGraphDataType extends apiRespBaseType {
   playlists?: {

src/api/paths.ts

@@ -1,10 +1,11 @@
-export const backendDomain = process.env.REACT_APP_API_BASE_URL + "/";
+export const backendDomain: string =
+  process.env["REACT_APP_API_BASE_URL"] + "/";
 export const spotifyPlaylistLinkPrefix = "https://open.spotify.com/playlist/";
 
 export const authLoginURL = "api/auth/login";
-export const authLoginFullURL = backendDomain + authLoginURL;
+export const authLoginFullURL: string = backendDomain + authLoginURL;
 export const authLogoutURL = "api/auth/logout";
-export const authLogoutFullURL = backendDomain + authLogoutURL;
+export const authLogoutFullURL: string = backendDomain + authLogoutURL;
 
 export const authHealthCheckURL = "auth-health";
 export const authRefreshURL = "api/auth/refresh";
@@ -12,6 +13,6 @@ export const authRefreshURL = "api/auth/refresh";
 export const opFetchGraphURL = "api/operations/fetch";
 export const opUpdateUserDataURL = "api/operations/update";
 export const opCreateLinkURL = "api/operations/link";
-export const opDeleteLinkURL = opCreateLinkURL;
+export const opDeleteLinkURL: "api/operations/link" = opCreateLinkURL;
 export const opBackfillLinkURL = "api/operations/populate/link";
 export const opPruneLinkURL = "api/operations/prune/link";

src/components/APIWrapper/index.tsx

@@ -1,10 +1,10 @@
-import { AxiosRequestConfig, AxiosResponse } from "axios";
+import type { AxiosRequestConfig, AxiosResponse } from "axios";
 
-import { apiRespBaseType } from "../../api/axiosInstance";
+import type { apiRespBaseType } from "../../api/axiosInstance.ts";
 import {
   showErrorToastNotification,
   showWarnToastNotification,
-} from "../ToastNotification";
+} from "../ToastNotification/index.tsx";
 
 const maxRetries = 3;
 
@@ -29,7 +29,7 @@ const APIWrapper = async <T extends apiRespBaseType>({
   refreshAuth,
   data,
   config,
-}: APIWrapperProps<T>) => {
+}: APIWrapperProps<T>): Promise<AxiosResponse<T, any> | null> => {
   let apiResp;
   for (let i = 1; i <= maxRetries + 1; i++) {
     apiResp = await apiFn(data, config);
@@ -52,7 +52,7 @@ const APIWrapper = async <T extends apiRespBaseType>({
     }
     await sleep(i * i * 1000);
   }
-  return apiResp;
+  return apiResp ?? null;
 };
 
 export default APIWrapper;

src/components/AnimatedSVG/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./AnimatedSVG.module.css";
 
-const AnimatedSVG = () => {
+const AnimatedSVG = (): React.ReactNode => {
   const stroke = "#fff";
   return (
     <div className={styles.svg_wrapper}>

src/components/Button/index.tsx

@@ -6,7 +6,10 @@ type ButtonProps = {
   onClickMethod?: () => void;
 };
 
-const Button = ({ children, onClickMethod = () => {} }: ButtonProps) => {
+const Button = ({
+  children,
+  onClickMethod = () => {},
+}: ButtonProps): React.ReactNode => {
   const clickHandler = (e: React.MouseEvent) => {
     e.preventDefault();
     onClickMethod();

src/components/Navbar/index.tsx

@@ -2,10 +2,10 @@ import React, { useContext } from "react";
 
 import styles from "./Navbar.module.css";
 
-import { AuthContext } from "../../App";
-import StyledNavLink from "../StyledNavLink/index";
+import { AuthContext } from "../../App.tsx";
+import StyledNavLink from "../StyledNavLink/index.tsx";
 
-const Navbar = () => {
+const Navbar = (): React.ReactNode => {
   const auth = useContext(AuthContext);
 
   return (

src/components/SimpleLoader/index.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import styles from "./SimpleLoader.module.css";
 
-const SimpleLoader = ({ text }: { text?: string }) => {
+const SimpleLoader = ({ text }: { text?: string }): React.ReactNode => {
   return (
     <div className={`${styles.container}`}>
       <div className={`${styles.loader}`}>

src/components/StyledNavLink/index.tsx

@@ -8,7 +8,7 @@ type StyledNavLinkProps = {
   text: string;
   activeClass?: string;
   inactiveClass?: string;
-}
+};
 const StyledNavLink = ({
   path = "/",
   text = "Go To",

src/components/ToastNotification/index.tsx

@@ -1,17 +1,17 @@
 import { toast, type ToastContent } from "react-toastify";
 
-export const showErrorToastNotification = (message: ToastContent) => {
+export const showErrorToastNotification = (message: ToastContent): void => {
   toast.error(message || "Server Error");
 };
 
-export const showSuccessToastNotification = (message: ToastContent) => {
+export const showSuccessToastNotification = (message: ToastContent): void => {
   toast.success(message || "Success");
 };
 
-export const showWarnToastNotification = (message: ToastContent) => {
+export const showWarnToastNotification = (message: ToastContent): void => {
   toast.warn(message || "Warning");
 };
 
-export const showInfoToastNotification = (message: ToastContent) => {
+export const showInfoToastNotification = (message: ToastContent): void => {
   toast.info(message || "Info");
 };

src/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
+import App from "./App.tsx";
+import reportWebVitals from "./reportWebVitals.ts";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement

src/pages/Graph/index.tsx

@@ -39,9 +39,9 @@ import {
   showInfoToastNotification,
   showSuccessToastNotification,
   showWarnToastNotification,
-} from "../../components/ToastNotification";
+} from "../../components/ToastNotification/index.tsx";
 
-import { spotifyPlaylistLinkPrefix } from "../../api/paths";
+import { spotifyPlaylistLinkPrefix } from "../../api/paths.ts";
 import {
   apiBackfillLink,
   apiCreateLink,
@@ -49,12 +49,12 @@ import {
   apiFetchGraph,
   apiPruneLink,
   apiUpdateUserData,
-} from "../../api/operations";
+} from "../../api/operations.ts";
 
-import { RefreshAuthContext } from "../../App";
-import Button from "../../components/Button";
-import APIWrapper from "../../components/APIWrapper";
-import SimpleLoader from "../../components/SimpleLoader";
+import { RefreshAuthContext } from "../../App.tsx";
+import Button from "../../components/Button/index.tsx";
+import APIWrapper from "../../components/APIWrapper/index.tsx";
+import SimpleLoader from "../../components/SimpleLoader/index.tsx";
 
 const initialNodes: Node[] = [];
 const initialEdges: Edge[] = [];
@@ -128,7 +128,7 @@ const selectedEdgeOptions: DefaultEdgeOptions = {
 
 const proOptions: ProOptions = { hideAttribution: true };
 
-const Graph = () => {
+const Graph = (): React.ReactNode => {
   const refreshAuth = useContext(RefreshAuthContext);
   const flowInstance = useReactFlow();
   const [playlistNodes, setPlaylistNodes] = useState<Node[]>(initialNodes);
@@ -153,7 +153,7 @@ const Graph = () => {
   );
 
   const onFlowSelectionChange: OnSelectionChangeFunc = useCallback(
-    ({ nodes, edges }) => {
+    ({ edges }) => {
       const selectedID = edges[0]?.id ?? "";
       setSelectedEdgeID(selectedID);
       setLinkEdges((eds) =>
@@ -204,6 +204,7 @@ const Graph = () => {
         showErrorToastNotification("Can't delete playlists!");
         return false;
       }
+      if (!edges[0]) throw new ReferenceError("no edge selected");
       console.debug(
         `deleted connection: ${edges[0].source} -> ${edges[0].target}`
       );
@@ -234,7 +235,7 @@ const Graph = () => {
       return;
     }
     const selectedEdge = linkEdges.filter((ed) => ed.id === selectedEdgeID)[0];
-
+    if (!selectedEdge) throw new ReferenceError("no edge selected");
     setLoading(true);
     const resp = await APIWrapper({
       apiFn: apiBackfillLink,
@@ -260,6 +261,7 @@ const Graph = () => {
       return;
     }
     const selectedEdge = linkEdges.filter((ed) => ed.id === selectedEdgeID)[0];
+    if (!selectedEdge) throw new ReferenceError("no edge selected");
 
     setLoading(true);
     const resp = await APIWrapper({
@@ -400,7 +402,7 @@ const Graph = () => {
     setPlaylistNodes(newNodes);
     // connect links
     const newEdges =
-      resp?.data.links?.map((link, idx) => {
+      resp?.data.links?.map((link, _idx) => {
         return {
           id: `${link.from}->${link.to}`,
           source: link.from,
@@ -501,6 +503,7 @@ const Graph = () => {
           <PiSubsetOf size={36} />
           Prune Link
         </Button>
+        <hr className={styles.divider} />
         <Button onClickMethod={() => arrangeLayout("TB")}>
           <IoIosGitNetwork size={36} />
           Arrange

src/pages/HowToUse/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-const HowToUse = () => {
+const HowToUse = (): React.ReactNode => {
   return (
     <div>
       <h1>How To Use?</h1>

src/pages/Landing/index.tsx

@@ -4,10 +4,10 @@ import styles from "./Landing.module.css";
 import {
   showInfoToastNotification,
   showSuccessToastNotification,
-} from "../../components/ToastNotification";
-import AnimatedSVG from "../../components/AnimatedSVG";
+} from "../../components/ToastNotification/index.tsx";
+import AnimatedSVG from "../../components/AnimatedSVG/index.tsx";
 
-const Landing = () => {
+const Landing = (): React.ReactNode => {
   const [searchParams] = useSearchParams();
   useEffect(() => {
     if (searchParams.get("login") === "success") {

src/pages/Login/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
 import styles from "./Login.module.css";
-import { authLoginFullURL } from "../../api/paths";
+import { authLoginFullURL } from "../../api/paths.ts";
 
 // auth through backend
-const Login = () => {
+const Login = ():React.ReactNode => {
   useEffect(() => {
     const timeoutID = setTimeout(() => {
       window.open(authLoginFullURL, "_self");

src/pages/Logout/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
 import styles from "./Logout.module.css";
-import { authLogoutFullURL } from "../../api/paths";
+import { authLogoutFullURL } from "../../api/paths.ts";
 
-const Logout = () => {
+const Logout = ():React.ReactNode => {
   useEffect(() => {
     const timeoutID = setTimeout(() => {
       window.open(authLogoutFullURL, "_self");

src/pages/PageNotFound/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
 import styles from "./PageNotFound.module.css";
-import { showWarnToastNotification } from "../../components/ToastNotification";
+import { showWarnToastNotification } from "../../components/ToastNotification/index.tsx";
 
-const PageNotFound = () => {
+const PageNotFound = ():React.ReactNode => {
   useEffect(() => {
     showWarnToastNotification("Oops!");
   }, []);

src/routes/AllRoutes.tsx

@@ -1,16 +1,16 @@
 import { Route, Routes } from "react-router-dom";
 
-import AuthOnlyRoutes from "./AuthOnlyRoutes";
-import UnAuthOnlyRoutes from "./UnAuthOnlyRoutes";
+import AuthOnlyRoutes from "./AuthOnlyRoutes.tsx";
+import UnAuthOnlyRoutes from "./UnAuthOnlyRoutes.tsx";
 
-import Landing from "../pages/Landing";
-import PageNotFound from "../pages/PageNotFound";
-import Graph from "../pages/Graph";
-import Login from "../pages/Login";
-import Logout from "../pages/Logout";
-import HowToUse from "../pages/HowToUse";
+import Landing from "../pages/Landing/index.tsx";
+import PageNotFound from "../pages/PageNotFound/index.tsx";
+import Graph from "../pages/Graph/index.tsx";
+import Login from "../pages/Login/index.tsx";
+import Logout from "../pages/Logout/index.tsx";
+import HowToUse from "../pages/HowToUse/index.tsx";
 
-const AllRoutes = () => {
+const AllRoutes = ():React.ReactNode => {
   return (
     <Routes>
       {/* Routes that require user to be logged in */}

src/routes/AuthOnlyRoutes.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from "react";
 import { Navigate, Outlet, useLocation } from "react-router-dom";
 
-import { AuthContext } from "../App";
-import { showWarnToastNotification } from "../components/ToastNotification";
+import { AuthContext } from "../App.tsx";
+import { showWarnToastNotification } from "../components/ToastNotification/index.tsx";
 
-function AuthOnlyRoutes() {
+function AuthOnlyRoutes():React.ReactNode {
   let location = useLocation();
   const auth = useContext(AuthContext);
 

src/routes/UnAuthOnlyRoutes.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from "react";
 import { Navigate, Outlet, useLocation } from "react-router-dom";
 
-import { AuthContext } from "../App";
-import { showWarnToastNotification } from "../components/ToastNotification";
+import { AuthContext } from "../App.tsx";
+import { showWarnToastNotification } from "../components/ToastNotification/index.tsx";
 
-function UnAuthOnlyRoutes() {
+function UnAuthOnlyRoutes():React.ReactNode {
   let location = useLocation();
   const auth = useContext(AuthContext);
 

tsconfig.json

@@ -1,6 +1,11 @@
 {
   "include": [
-    "src/**/*"
+    "src/**/*",
+    "public/**/*"
+  ],
+  "exclude": [
+    "src/boilerplates",
+    "tsout"
   ],
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig to read more about this file */
@@ -10,43 +15,49 @@
       }
     ],
     /* Projects */
-    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
-    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
     // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
     // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
     /* Language and Environment */
-    "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "target": "ES2024", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "lib": [
+      "ES2024",
+      "DOM",
+      "DOM.Iterable"
+    ], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     "jsx": "preserve", /* Specify what JSX code is generated. */
-    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
-    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
+    "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
     // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
     // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
     // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
-    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
-    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+    "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
+    "moduleDetection": "force", /* Control what method is used to detect module-format JS files. */
     /* Modules */
-    "module": "commonjs", /* Specify what module code is generated. */
+    "module": "Node18", /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "node16", /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    "typeRoots": [
+      "./node_modules/@types"
+    ], /* Specify multiple folders that act like './node_modules/@types'. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
-    // "rewriteRelativeImportExtensions": true,          /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
-    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
-    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    "rewriteRelativeImportExtensions": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
+    "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
+    "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
     // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
     // "noUncheckedSideEffectImports": true,             /* Check side effect imports. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    "resolveJsonModule": true, /* Enable importing .json files. */
     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
     /* JavaScript Support */
@@ -54,10 +65,10 @@
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
     /* Emit */
-    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
-    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    "declarationMap": true, /* Create sourcemaps for d.ts files. */
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    "sourceMap": true, /* Create source map files for emitted JavaScript files. */
     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
@@ -76,36 +87,37 @@
     // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
     /* Interop Constraints */
-    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
-    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
-    // "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
+    "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
+    "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
+    // "erasableSyntaxOnly": true, /* Do not allow runtime constructs that are not part of ECMAScript. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
     "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
     "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
     /* Type Checking */
     "strict": true, /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
-    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
-    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
+    "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
     // "strictBuiltinIteratorReturn": true,              /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
-    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
-    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
-    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
-    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
-    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
-    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
-    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+    "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
+    "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
+    "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
+    "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
+    "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
+    "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
+    "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
+    "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
+    "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
+    "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
+    "allowUnusedLabels": false, /* Disable error reporting for unused labels. */
+    "allowUnreachableCode": false, /* Disable error reporting for unreachable code. */
     /* Completeness */
-    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   }
 }