Published on: May 22, 2025
6 min read
Learn how we used our autonomous AI agent, which sits in your development environment, to convert a real-world JavaScript application to TypeScript.
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:
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:
Analyzing existing code patterns to determine appropriate types
Handling edge cases where type inference is ambiguous
Ensuring consistency across the codebase
Managing dependencies and third-party libraries
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.
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:
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.
It develops and executes a multi-stage plan, allowing for more complete solutions.
It keeps a human in the loop, ensuring you understand and approve of what is happening at each step of the way.
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.
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:
areWorkflowsLoading
: booleanisLoadingWorkflow
: booleanisLoadingRecentWorkflows
: booleanrecentWorkflows
: arrayworkflows
: arrayworkflowsPageInfo
: objectinitialState
: objectactiveWorkflow
: object with specific shapeInterface definitions required:
id
: stringgoal
: stringstatus
: stringcheckpoint
: objecttype
: stringParameter 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."
Based on this thorough analysis, Duo Workflow created a structured plan consisting of specific tasks:
Create a new TypeScript file workflow.ts
in the same directory as
the original JS file.
Create TypeScript interfaces for the store state and workflow types at the top of the new file, including:
Copy and add type annotations to the store implementation from
workflow.js
, including:
Update all imports in workflow.ts
to:
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.
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:
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."
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.
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!