Unlocking Type Safety: JavaScript to TypeScript migration with Amazon Q Developer
This blog post walks you through an AI-assisted migration journey, showcasing how Amazon Q Developer’s intelligent guidance, automated code transformation, and real-time recommendations can help you modernize your codebase, boost type safety, and enhance developer productivity—all within your favorite IDE.
Published May 29, 2025
Last Modified Jun 1, 2025
Welcome to another installment of Q-Bits, our regular series showcasing cool ways Amazon employees are leveraging Amazon Q Developer. Today, we're diving into how Q Developer can assist with migrating a classic JavaScript-based React application to TypeScript.
Migrating a React project from JavaScript to TypeScript can be a daunting task, especially for larger codebases. With the help of Amazon Q Developer, the process becomes structured, guided, and much more manageable. In this post, I’ll walk through how Amazon Q Developer assisted in migrating a React.js Todo app from JavaScript to TypeScript with just a single prompt, highlighting each step and the value added by this AI-powered tool.
Amazon Q Developer is an AI agent designed to help developers with code generation, transformation, debugging, and optimization directly within your IDE. By leveraging its capabilities, you can automate repetitive migration steps, get real-time feedback, and ensure best practices are followed throughout the process.
Before migration, the app was a classic React Todo App, allowing users to add, mark, and categorize tasks.
Amazon Q Developer integrates directly into your IDE. To kick off the migration, simply ask Amazon Q Developer to help migrate your React.js Todo App from JavaScript to TypeScript. I have used
@workspace here, so the assistant will consider the complete application as a context.
Amazon Q Developer starts by analyzing your project structure. It identifying all the files that need migration.
After analyzing the complete application and getting the whole context, Amazon Q developer generated a clear, actionable migration plan. For our React Todo app, Amazon Q Developer created the migration plan below:
As a first actionable step Amazon Q Developer updated the
package.json file by adding required TypeScript dependencies.
Next, Amazon Q Developer generated a
tsconfig.json file with standard React TypeScript settings. This file defines how TypeScript compiles your code, which files to include, and sets strictness options. Typical settings include support for JSX, strict type checking, and compatibility with JavaScript files for incremental migration.
To ensure type safety and reusability, Amazon Q Developer created a dedicated types directory.
Here, it created a types file to define TypeScript interfaces like
Todo and types like TodoStatus:Centralizing type definitions makes it easier to maintain and update types across the project.
Amazon Q Developer then proceeded to convert each JavaScript file:
- Component files (
.js→.tsx): All React components were updated to TypeScript, with explicit prop and state types. - Utility files (
.js→.ts): Helper functions like those managing local storage were annotated with precise types. - Test files: All test scripts were migrated to TypeScript, ensuring mocks and assertions had proper type annotations.
- Configuration and entry files: Files like
index.jsandreportWebVitals.jswere also converted and typed.
Throughout, Amazon Q Developer automatically updated imports, added interface definitions for props, and resolved type errors as they appeared
After conversion, Amazon Q Developer summarized the changes:
- Added TypeScript dependencies
- Created TypeScript configuration and Type definitions
- Type annotations added throughout
- Tests updated for type safety
- Project remains fully functional
You can now run your app and tests as usual:
The TypeScript compiler will catch type errors during development, providing better tooling support and catching potential bugs early.
Pro Tip:
Make sure you install TypeScript and required dependencies. If not already, please use the commands below:
- Automated, step-by-step guidance: No guesswork—each migration step is clear and actionable.
- Error detection and resolution: Type errors are caught and fixed as files are converted.
- Consistent best practices: Ensures all files follow TypeScript conventions.
- Speed and efficiency: Automates repetitive tasks, freeing you to focus on logic and design.
Migrating a React project from JavaScript to TypeScript is a significant upgrade for code maintainability, safety, and developer experience. With Amazon Q Developer, the process is streamlined and less error-prone. You get structured migration steps, automated code updates, and real-time feedback—all within your IDE.
Ready to try it? Install the Amazon Q Developer extension in your IDE and let it guide your next code transformation!