Use Copilot Chat to Guide Your JavaScript to TypeScript Migration
Tags: github, typescript, ai, githubcopilot
Published: 2023-08-23 16:33:09

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. ![My AI powered task management app that expands tasks into subtasks and adds an estimated time to completion](https://cdn.videotap.com/geNJOYKy6E9ois13PrHD-37.69.png)


### 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?“ 
![me asking Copilot Chat to convert my project to TypeScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqlgqapexptshy3zlza9.png)

Copilot Chat responded to my query with a step-by-step guide. 

![Copilot Chat responding with a step by step guide](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnrtck9d1vzj1seuo4v3.png)


### 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. 

```bash
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. 

```js 
{
  "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. 

```js 
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` 

```js 
{
  "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. 

```ts
interface Task {
  id: string;
  text: string;
  subTasks: SubTask[];
}

interface SubTask {
  text: string;
  completed: boolean;
}
``` 

![Updated TypeScript for my index file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbwfpua6mxucel7h4ebh.png)

## 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.](https://dev.to/github/getting-started-with-github-copilot-chat-in-vscode-174m) 

## How have you been using generative AI to assist you with your role? 
Let me know in the comments below!