Migrate to Typescript

[volta2030]

Use the following plan to guide GitHub Copilot through the migration process. You can paste these steps into the Copilot Chat or use them as a roadmap.

Phase 1: Environment Setup & Configuration
Goal: Prepare the project for TypeScript without breaking the existing JavaScript build.

Analyze Dependencies

Prompt to Copilot: "Analyze the package.json file. Identify the current Electron version and list the necessary @types packages we need to install (e.g., @types/electron, @types/node, @types/react if applicable)."

Install TypeScript

Action: Run npm install --save-dev typescript @types/node @types/electron.

Initialize Configuration

Prompt to Copilot: "Create a tsconfig.json file suitable for an Electron project. Ensure it has allowJs: true and noImplicitAny: false for now to allow for a gradual migration. Configure the outDir to separate compiled files."

Phase 2: Type Definitions & Helpers
Goal: Establish a type safety baseline for Electron IPC (Inter-Process Communication).

Create Global Types

Prompt to Copilot: "Create a src/types.d.ts file. help me define a global interface for the window.electron object if we are using context isolation in preload scripts."

Define IPC Channels

Prompt to Copilot: "Review main.js and preload.js. Extract all IPC channel names (like 'open-file', 'save-image') and define a TypeScript Enum or a const object to store these channel names for type safety."

Phase 3: Migration of Core Processes (Main & Preload)
Goal: Convert the entry points of the Electron app.

Convert Preload Script

Action: Rename preload.js to preload.ts.

Prompt to Copilot: "Refactor preload.ts to TypeScript. Ensure contextBridge.exposeInMainWorld is typed correctly according to the interface we defined in Phase 2."

Convert Main Process

Action: Rename main.js (or index.js) to main.ts.

Prompt to Copilot: "Convert this file to TypeScript. Add types to BrowserWindow instances and fix any require imports to import statements where possible. Handle ipcMain event types."

Phase 4: Migration of Renderer Process (UI)
Goal: Convert the frontend logic (Leaf-first approach).

Identify Leaf Modules

Prompt to Copilot: "Identify utility functions or helper modules in the src/ folder that have no dependencies. Let's convert these files to .ts first."

Convert Components/Scripts

Action: Rename .js files to .ts (or .tsx if using React).

Prompt to Copilot: "Refactor this component to TypeScript. Define interfaces for the props and internal state. Replace any any types with specific types where obvious."

Fix IPC Calls

Prompt to Copilot: "Update all ipcRenderer.invoke or send calls in the renderer to use the Enum/consts defined in Phase 2. Ensure the data being sent matches the expected types."

Phase 5: Strictness & Cleanup
Goal: Finalize the migration and ensure stability.

Enable Strict Mode

Prompt to Copilot: "Now that files are converted, let's update tsconfig.json. Change noImplicitAny to true. Find and list the remaining type errors we need to fix."

Update Build Scripts

Prompt to Copilot: "Update the scripts section in package.json to include a tsc compile step before starting the Electron app. Ensure the entry point in package.json points to the compiled main.js in the output directory."