refactor: improve type safety patterns from @ts-expect-error cleanup

Amp-Thread-ID: https://ampcode.com/threads/T-019bb3bd-f607-735a-b1a8-fce5fe4f0125
Co-authored-by: Amp <amp@ampcode.com>

src/scripts/app.ts

@@ -37,6 +37,7 @@ import type {
   NodeExecutionOutput,
   ResultItem
 } from '@/schemas/apiSchema'
+import type { WorkflowAsGraph } from '@/types/workflowSchemaTypes'
 import {
   type ComfyNodeDef as ComfyNodeDefV1,
   isComboInputSpecV1,
@@ -1194,12 +1195,8 @@ export class ComfyApp {
     }
 
     try {
-      // TODO: Align ComfyWorkflowJSON (Zod schema) with ISerialisedGraph (litegraph types)
-      // The schemas are structurally compatible at runtime but TypeScript can't verify this.
-      // See: https://github.com/Comfy-Org/ComfyUI_frontend/issues/XXXX
-      this.rootGraph.configure(
-        graphData as Parameters<typeof this.rootGraph.configure>[0]
-      )
+      // Type cast: ComfyWorkflowJSON → WorkflowAsGraph (see WorkflowAsGraph docs)
+      this.rootGraph.configure(graphData as WorkflowAsGraph)
 
       // Save original renderer version before scaling (it gets modified during scaling)
       const originalMainGraphRenderer =

src/scripts/domWidget.ts

@@ -197,19 +197,23 @@ abstract class BaseDOMWidgetImpl<V extends object | string>
     useDomWidgetStore().unregisterWidget(this.id)
   }
 
-  override createCopyForNode(node: LGraphNode): this {
-    const constructorArg = {
-      node: node,
+  /**
+   * Creates the constructor arguments for cloning this widget.
+   * Subclasses should override to add their specific properties.
+   */
+  protected getCloneArgs(node: LGraphNode): Record<string, unknown> {
+    return {
+      node,
       name: this.name,
       type: this.type,
       options: this.options
     }
-    const cloned: this = new (this.constructor as new (
-      obj: typeof constructorArg
-    ) => this)(constructorArg)
+  }
+
+  override createCopyForNode(node: LGraphNode): this {
+    const Ctor = this.constructor as new (args: Record<string, unknown>) => this
+    const cloned = new Ctor(this.getCloneArgs(node))
     cloned.value = this.value
-    // Preserve the Y position from the original widget to maintain proper positioning
-    // when widgets are promoted through subgraph nesting
     cloned.y = this.y
     return cloned
   }
@@ -232,22 +236,11 @@ export class DOMWidgetImpl<T extends HTMLElement, V extends object | string>
     this.element = obj.element
   }
 
-  override createCopyForNode(node: LGraphNode): this {
-    const constructorArg = {
-      node: node,
-      name: this.name,
-      type: this.type,
-      element: this.element,
-      options: this.options
+  protected override getCloneArgs(node: LGraphNode): Record<string, unknown> {
+    return {
+      ...super.getCloneArgs(node),
+      element: this.element
     }
-    const cloned: this = new (this.constructor as new (
-      obj: typeof constructorArg
-    ) => this)(constructorArg)
-    cloned.value = this.value
-    // Preserve the Y position from the original widget to maintain proper positioning
-    // when widgets are promoted through subgraph nesting
-    cloned.y = this.y
-    return cloned
   }
 
   /** Extract DOM widget size info */
@@ -322,6 +315,15 @@ export class ComponentWidgetImpl<
     this.props = obj.props
   }
 
+  protected override getCloneArgs(node: LGraphNode): Record<string, unknown> {
+    return {
+      ...super.getCloneArgs(node),
+      component: this.component,
+      inputSpec: this.inputSpec,
+      props: this.props
+    }
+  }
+
   override computeLayoutSize() {
     const minHeight = this.options.getMinHeight?.() ?? 50
     const maxHeight = this.options.getMaxHeight?.()

src/types/workflowSchemaTypes.ts

@@ -0,0 +1,14 @@
+import type { ISerialisedGraph } from '@/lib/litegraph/src/types/serialisation'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+/**
+ * ComfyWorkflowJSON and ISerialisedGraph are structurally compatible
+ * at runtime. This type alias documents the intentional cast between them.
+ *
+ * ComfyWorkflowJSON is the Zod-validated workflow schema from the frontend.
+ * ISerialisedGraph is the LiteGraph serialization format.
+ *
+ * TODO: Align these schemas to eliminate the need for this cast.
+ * @see https://github.com/Comfy-Org/ComfyUI_frontend/issues/XXXX
+ */
+export type WorkflowAsGraph = ComfyWorkflowJSON & ISerialisedGraph