Use Copilot Chat to Guide Your JavaScript to TypeScript Migration

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!