How to convert existing nodejs/expressjs app from javascript to typescript, the painless way
Tags: webdev, javascript, typescript, node
Published: 2024-03-10 19:28:20

Converting a large [Express.js](https://expressjs.com/) application from JavaScript to TypeScript can be a challenging task. For many applications, this represents a significant portion of their [technical debt](https://www.productplan.com/glossary/technical-debt/), as the process may span many days, if not months, and new changes are typically not allowed during the conversion. 

Imagine having to implement new features or hotfixes in such an application; it can be exceedingly difficult to keep up with ongoing changes during the conversion. 

This is one of the primary reasons developers often hesitate to convert an extensive Express.js application from JavaScript to TypeScript.

In this article, we will explore the fastest and least disruptive way to convert a mid to large Express.js application from JavaScript to TypeScript. 

## Prerequisites
* Nodejs ≥ v16.4.0 installed on your machine
* Basic Understanding of javascript, typescript, nodejs/expressjs
* Having expressjs application writing in javascript

## Setup your expressjs application 
clone the application and navigate to the root directory 

```
git clone https://github.com/codateam/your-repo-name.git
cd your-repo-name
```


![Files before convertion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qk0f4mc48tdqxxhbzx46.png)
Javascript files before converted to typescript

## Create bash script to automate file convertion from .js to .ts
Rename javascript to typescript file one by one main be boring and time consuming, especially in medium or large application with tons of files, automating the process will save a lot of time.

Create a bash script file **convert-js-to-ts.sh** in the root of your application and update with below code, you can read about [bashs script](https://devdocs.io/bash/) if you aren't familiar or read about about [BASH - Automatically rename file as its folder](https://stackoverflow.com/questions/35723985/bash-automatically-rename-file-as-its-folder)

```
#!/bin/bash

# Function to rename JavaScript files to TypeScript
rename_js_to_ts() {
  for file in "$1"/*.js; do
    if [ -e "$file" ]; then
      new_file="${file%.js}.ts"
      mv "$file" "$new_file"
      echo "Renamed $file to $new_file"
    fi
  done

  # Recursively process subdirectories, excluding node_modules
  for dir in "$1"/*; do
    if [ -d "$dir" ] && [ "${dir##*/}" != "node_modules" ]; then
      rename_js_to_ts "$dir"
    fi
  done
}

# Check if a directory is provided as an argument
if [ -z "$1" ]; then
  echo "Usage: $0 <directory>"
  exit 1
fi

# Check if the provided path is a directory
if [ ! -d "$1" ]; then
  echo "Error: '$1' is not a directory."
  exit 1
fi

# Call the function to rename files
rename_js_to_ts "$1"

```
Remember to make this script executable by executing the below command in your terminal.
```chmod +x convert-js-to-ts.sh```
## Execute the script in your commandline
```
./convert-js-to-ts.sh .
```


![Files after convertion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbzg5t1ck6ael5yjfs3p.png)
Typescript files after convertion

## Installing required typescript dependencies 
Below are the typescript required for my project (yours maybe different).

```
yarn add -D typescript ts-node @types/node @types/express @types/mongoose @types/multer @types/passport @types/passport-jwt @types/passport-local @types/passport-local-mongoose @types/socket.io @types/winston

```
## Generating tsconfig.json by enter below command in your terminal
```
npx tsc --init
```
## Modify your tsconfig.json file
```
 {
  "compilerOptions": {
    ...
    "outDir": "./dist"
    ...
  }
}
```

remove .js from all your import code search **.js"** and click on replace **"** in vscode or your preferred editor
## Running TypeScript in Node with ts-node
```
npx ts-node src/index.ts
```
if you're unable to get it work with ts-node you can using concurrently, 

package.json

```
...
 "scripts": {
   "start": "node dist/server",
   "dev": "concurrently \"npx tsc --watch\" \"nodemon -q dist/server.js\""
  },
...
```
## Start your application 
```
yarn run dev
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfcz06vcqqu6tibt4cp6.png)

*NB: The project can be deployed when you're still fixing types errors and new features can be implemented in typescript*

## Final Thoughts
Converting a large Express.js application to TypeScript is a significant undertaking, but with proper planning and automation, you can streamline the process. 

Keep in mind that each project is unique, so adapt the steps and script to fit your specific requirements. 

Thanks for reading.