Adding Typescript to your Node.js project

A Simple Guide for Beginners

Photo by Paul Esch-Laurent on Unsplash

Introduction

Javascript has evolved throughout the years - from small snippets that allowed simple manipulation on DOM elements to Node.js. While older, basic methods are still largely usable for Javascript, some of the new developments are good additions in our arsenal - and one of them is Typescript.

Typescript enforces type rules in our Javascript code. This allows us to catch any potential errors during development and avoid going `live` with dozens of errors in the console.

Adding Typescript

I personally prefer to avoid installing packages globally as much as I can because I often work on multiple projects at the same time and some of these environments are beyond my control.

Install Typescript in the project

Navigate to your project folder in the CLI and type the following command:

npm install typescript --save-dev

Verify the installation

npx tsc -v

This should display the latest Typescript version. Notice the difference when you type this command instead:

tsc -v

A “command not found” error should appear because we did not install Typescript globally.

You can read more about npx here.

Convert .js files to .ts

I assume you already have a minimal Node.js project with a single .js file called app.js (you can refer to my earlier article on creating a new project).

Cut all the code in the app.js file and paste it in a new app.ts file (or simply change the file extension).

import express from 'express';
var app = express();
app.use(express.static('public')); 
app.listen(3000, () => {
 console.log("Server running on port 3000");
});
app.get("/", (req, res) => {
 res.send('Hello World!')
});

Initialize Typescript

We can use npx tsc app to compile our single file individually, but it is more convenient to tell Typescript to handle all .ts files automatically. To do so, we create a tsconfig.json file in our project that tells Typescript how to compile our project:

npx tsc --init

Additional notes

If your app.js is using import instead of require (like my example), open the tsconfig.json file, and change the value for “module”:

 "module": "ESNext", 

With tsconfig.json set up, we can now begin to compile our project with just a single command:

npx tsc

Typescript and Types

The CLI will now throw an error Could not find a declaration file for module ‘express’.

This is because Typescript does not know about the Express package. To fix this error, we need to inform Typescript:

npm i --save-dev @types/express

Run npx tsc again and you will notice that a new app.js file has been compiled for you from app.ts. Your application should now run as before with the same command:

node app.js

Automated Script

We don’t have to run two commands (npx tsc and node app.js) every time we make changes and want to restart the application.

Go to package.json and add this line under “scripts”:

"start": "npx tsc && node app.js",

The whole package.json file should now look something like this:

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npx tsc && node app.js"
  },
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.17",
    "typescript": "^5.1.6"
  }
}

Now we can start the application with a single command:

npm start

This triggers the script that we have just added and runs both commands for us automatically.

Related Articles:

Getting started in Node.JS with conda
EJS templates for Node.JS

References:
https://www.typescriptlang.org/download
https://www.freecodecamp.org/news/learn-typescript-beginners-guide/
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html