Refactoring JavaScript to TypeScript with GitLab Duo Workflow

TypeScript adoption continues to grow, with over 88% of developers reporting they either use or want to use it. Yet, migrating existing JavaScript codebases to TypeScript is often a time-consuming process. Enter GitLab Duo Workflow: secure, agentic AI that sits right inside your development environment, helping transform high-level tasks into executable workflows. In this article, you'll learn how we used Duo Workflow to update Duo Workflow, converting a real-world JavaScript application to TypeScript. We'll also review the technical process and broader implications for development workflows.

This video walks through visually what you'll read below:

The challenge: Refactor JS to TS

We decided to migrate Duo Workflow client-related logic to TypeScript for better type safety and auto-complete. A JavaScript-to-TypeScript migration involves more than just changing file extensions. It requires:

1. Analyzing existing code patterns to determine appropriate types
2. Handling edge cases where type inference is ambiguous
3. Ensuring consistency across the codebase
4. Managing dependencies and third-party libraries
5. Validating that runtime behavior remains unchanged

Doing all of this work manually can be very time consuming and not much fun. Thankfully, managing your projects is easier and more efficient with Duo Workflow – even when the project is Duo Workflow.

How it works

If you've used AI coding assistants before, you're likely familiar with their chat-based interfaces (like GitLab Duo Chat). These chats can provide code snippets, suggested directory structures, and more. GitLab Duo Workflow fundamentally differs from these in several key ways:

1. It's contextually aware of your entire codebase, not just open files or highlighted text. You can also add context from relevant GitLab issues or merge requests.
2. It develops and executes a multi-stage plan, allowing for more complete solutions.
3. It keeps a human in the loop, ensuring you understand and approve of what is happening at each step of the way.
4. It stages changes to your repository, giving you control over what to accept.

Duo Workflow uses an agentic AI approach, powered by Claude 3.5 Sonnet, to understand code semantics while maintaining a deep integration with GitLab's DevOps platform.

Let's walk through a real-world example of refactoring a JavaScript file using GitLab Duo Workflow. In our case, we started with the prompt:

I need to refactor a JavaScript file packages/webview_duo_workflow/src/app/stores/workflow.js to TypeScript. Please analyze the code, identify any issues, and convert it to TypeScript with appropriate type definitions.

Analysis

After prompting, Duo Workflow first analyzed the codebase structure:

• Identified that workflow.js is a Pinia store implementation
• Noted it uses imports from various modules including constants.ts (which was already in TypeScript)
• Recognized GraphQL queries import exists but the file wasn't accessible

Based on this analysis, Duo Workflow identified specific typing needs:

Type definitions needed for:

• Store State interface with precise types:
  • areWorkflowsLoading: boolean
  • isLoadingWorkflow: boolean
  • isLoadingRecentWorkflows: boolean
  • recentWorkflows: array
  • workflows: array
  • workflowsPageInfo: object
  • initialState: object
  • activeWorkflow: object with specific shape

Interface definitions required:

• Workflow interface with properties:
  • id: string
  • goal: string
  • status: string
  • checkpoint: object
  • type: string

Parameter types needed for:

• GraphQL response types for workflows data
• Event handler parameter types
• Function parameter types for actions like getWorkflowById, runWorkflow, etc.

Duo Workflow identified several complex patterns requiring special handling:

• Uses optional chaining extensively
• Has nested object destructuring
• Contains GraphQL integration
• Uses Pinia store patterns with state, getters, and actions
• Implements an events mapping system

The system recognized external type dependencies:

• Pinia store types
• GraphQL query response types
• Functions from an internal Bridge module were also properly recognized (for sendRequest, sendGraphqlRequest)

The final analysis concluded: "The file will need to be renamed from .js to .ts and appropriate type definitions added while maintaining the existing functionality."

Planning

Based on this thorough analysis, Duo Workflow created a structured plan consisting of specific tasks:

1. Create a new TypeScript file workflow.ts in the same directory as the original JS file.

2. Create TypeScript interfaces for the store state and workflow types at the top of the new file, including:

   • WorkflowState interface for store state
   • Workflow interface for workflow object structure
   • WorkflowPageInfo interface for pagination info
   • WorkflowCheckpoint interface for checkpoint data

3. Copy and add type annotations to the store implementation from workflow.js, including:

   • State return type
   • Getter return types
   • Action parameter types
   • Action return types

4. Update all imports in workflow.ts to:

   • Add type imports from Pinia
   • Update local imports to use .ts extensions where applicable
   • Import any required type definitions

Execution

After the plan is complete, we were prompted to “Approve plan.” Before clicking approve, we reviewed each step and ensured we were comfortable with the plan. After approval, Duo Workflow showed its progress through each step with visual indicators and explanations of what API operations were supporting each task (like "Supported by: create_file_with_contents" or "Supported by: edit_file"). When the work was done, we reviewed the changes before committing.

What we learned

This JavaScript-to-TypeScript migration example showcases a significant evolution in AI-assisted development. What makes GitLab Duo Workflow particularly interesting is its approach to:

Task-oriented programming vs. suggestion-only assistance

Unlike many AI assistants that simply offer code snippets or suggestions, Duo Workflow understands and executes complete tasks. The difference is significant — rather than saying "here's some TypeScript code you might use," it says "I'll convert this file for you, here's my plan, and here are the changes I'm making."

Contextual understanding of the entire codebase

The tool demonstrates awareness of project structure, related files (like constants.ts and GraphQL queries), and the relationships between components. This contextual understanding allows for more sophisticated conversions than localized transformations.

Step-by-step execution with visibility

The plan-based approach, with clear steps and progress indicators, provides transparency into what would otherwise be a black-box process. This allows developers to understand what the AI is doing and how it's approaching the problem.

GitLab Duo Workflow is currently available in private beta for GitLab Ultimate customers. Sign up for the waitlist today!

Learn more

• Agentic AI guides and resources
• GitLab Duo Workflow
• What is agentic AI?