Migrate Pegasus Electron app to TypeScript with gradual migration infrastructure

[Copilot]

Establishes TypeScript infrastructure for gradual migration of ~4000 lines of JavaScript. Converts main process and IPC bridge to TypeScript with full type safety while allowing coexistence of JS/TS files.

Infrastructure

• TypeScript 5.9.3 with lenient config (allowJs: true, noImplicitAny: false)
• Selective compilation script - compiles only .ts files newer than corresponding .js
• Electron 37 built-in types - removed deprecated @types/electron

Type Definitions (types.d.ts)

Comprehensive type system covering:

• 75+ IPC channels as type declarations
• Image types: ImageInfo, ImageProcessOptions, Color, CropCoordinates
• UI types: ContextMenuOptions, MenuItemConfig, LayerEventPayload
• Notification and mode enums

Converted Files

main.ts (372 lines)

• Typed Electron APIs: BrowserWindow, ipcMain, dialog, Menu
• Async dialog handlers with proper return types
• Type-safe IPC event handlers (20+ channels)

utils/ipc_bridge.ts (118 lines)

• Generic event handler types: (event: IpcMainEvent, ...args: any[]) => void
• Bulk channel registration with type checking

Example

// Before (JavaScript)
ipcMain.on('extensionValueSEND', (event, res) => {
  dialog.showSaveDialog({ /* ... */ })
    .then((result) => {
      event.sender.send('saveAsImgCMD', result.filePath);
    });
});

// After (TypeScript)
ipcMain.on('extensionValueSEND', async (event: IpcMainEvent, res: string) => {
  const result = await dialog.showSaveDialog(mainWindow, { /* ... */ });
  event.sender.send('saveAsImgCMD', result.filePath);
});

Migration Path

Remaining 17 files can be migrated incrementally using TYPESCRIPT_MIGRATION.md guide. Priority order:

1. Processing layer (3 files) - image operations
2. Core classes (3 files) - canvas/layer management
3. Features (4 files) - undo/redo, modes
4. Renderers (7 files) - UI panels

Build scripts updated: npm run compile → npm start

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Migrate to Typescript</issue_title>
<issue_description>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."</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Migrate to Typescript #141

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.