How to convert existing nodejs/expressjs app from javascript to typescript, the painless way

Converting a large Express.js application from JavaScript to TypeScript can be a challenging task. For many applications, this represents a significant portion of their 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

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 if you aren't familiar or read about about 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.

 +x convert-js-to-ts.sh

Execute the script in your commandline

./convert-js-to-ts.sh .

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

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.