People migrate JavaScript applications to TypeScript for many reasons, including helping developers catch errors quickly during development. But, converting a project from JavaScript to TypeScript can be complicated. Luckily, there are tools that can help us with the migration. In this blog post, we'll explore how Copilot Chat aids in migrating your JavaScript application to TypeScript.
What is Copilot Chat?
Copilot Chat is a chat interface that allows you to ask coding-related questions and receive answers directly in a supported IDE.
Migrating JavaScript to TypeScript
In my case, I built an AI-powered task management app built with Next.js and the Web5 SDK. I wanted my Next.js project to use TypeScript. I plan to add more features to this application, and switching to TypeScript can help me manage the application's maintainability.
Unfortunately, I couldn’t remember all the steps for converting a JavaScript application to TypeScript because it’s not something I do everyday, so I leaned on Copilot Chat for help.
Step 1: Ask Copilot Chat for assistance
To get started, I opened my project in my preferred IDE (Codespaces/Visual Studio Code), and I asked Copilot Chat, “Can you help me convert my Next.js project to TypeScript?“
Copilot Chat responded to my query with a step-by-step guide.
Step 2: Install required types
First, Copilot Chat recommended running a command in my terminal to install the required types for Next.js and React.
npm install --save-dev typescript @types/react @types/node
Step 3: Rename my files
Next, Copilot Chat then suggested I rename all my files from .js
to .tsx
. It further explained that using a .tsx
file extension helps TypeScript realize the file contains JSX.
Step 4: Create a tsconfig.json file
Then, to configure the TypeScript compiler and specify how TypeScript code should be compiled, Copilot Chat suggested I create a tsconfig.json
at the root of my project. It also provided compilerOptions that I could just copy and paste into the file.
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"jsx": "preserve",
"noEmit": true,
"isolatedModules": true,
"esModuleInterop": true,
"strict": true,
"noImplicitAny": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
Step 5: Modify my next.config.js file
Copilot Chat recommended I update my next.config.js file, enabling Webpack to recognize and compile the TypeScript files in my project.
module.exports = {
// ...
webpack(config, options) {
config.resolve.extensions.push('.ts', '.tsx');
return config;
},
};
Step 6: Update my package.json file
Copilot Chat suggested I add the following scripts to my package.json
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"type-check": "tsc",
"lint": "eslint . --ext .ts,.tsx"
}
}
"type-check": "tsc"
runs the TypeScript compiler to check my TypeScript code for errors.
"lint": "eslint . --ext .ts,.tsx"
runs the ESLint linter to check my code for style and syntax errors.
Step 7: Convert the code in my index file
The final step involved converting the code in my index file to TypeScript. Copilot Chat converted my index.js
file to use TypeScript syntax. Additionally, Copilot Chat generated two interfaces for a Task and a Subtask to ensure type safety.
interface Task {
id: string;
text: string;
subTasks: SubTask[];
}
interface SubTask {
text: string;
completed: boolean;
}
The Beauty of Copilot Chat
Here’s what I love: in addition to streamlining a potentially intimidating migration process, Copilot Chat also provided clear explanations for each change. This helped me make informed decisions about the AI-generated code that I added. I could also ask Copilot Chat follow-up questions for concepts or suggestions that I’m still unclear about. For example, I asked Copilot Chat: “Why do I need to update my package.json?“
In response, Copilot Chat informed me that the update would assist me in type-checking my code. It also broke down each line in the new package.json
-
"dev": "next dev"
starts the development server for your Next.js application. -
"build": "next build"
builds your Next.js application for production. -
"start": "next start"
starts the production server for your Next.js application. -
"type-check": "tsc"
runs the TypeScript compiler to check your TypeScript code for errors. -
"lint": "eslint . --ext .ts,.tsx"
runs the ESLint linter to check your code for style and syntax errors.
Looking to try out Copilot Chat?
Check out Kedasha Kerr’s blog post on Getting Started with Copilot Chat.
How have you been using generative AI to assist you with your role?
Let me know in the comments below!
Top comments (2)
Nice! Some suggested changes to that tsconfig.json:
"moduleResolution": "bundler",
"module": "ESNext",
This is what's recommended by the TS team for Next apps.
thanks! I never saw this comment. This is what Copilot generated, but I can add an area for people to edit and update.