Express and TypeScript: How to Set Up Your Project

Express is a popular framework for building web servers with Node.js. TypeScript, on the other hand, helps you write cleaner and safer code by adding static types to JavaScript.

In this article, you'll learn how to set up a basic Express project using TypeScript, step by step.

1. Choose Your IDE

You can use any IDE (Integrated Development Environment) you prefer. In this tutorial, I’ll be using Visual Studio Code (VS Code).

2. Install TypeScript

Open your terminal and run the following command to install TypeScript as a development dependency:

npm install -D typescript

Once it's installed, initialize a TypeScript configuration file with:

npx tsc --init

This will generate a tsconfig.json file in your project, which lets you customize TypeScript settings.

3. Configure the tsconfig.json File

The tsconfig.json file lets you customize how TypeScript works in your project. Open the file, and look for the compilerOptions section. Inside it, find the outDir option (you can search for the word "Emit" to locate it faster). Uncomment the outDir line and set it to "dist" like this:

You can name the folder anything you like, but dist (short for "distribution") is the common convention for compiled output. Once you’re done with the configuration, run the following command in your terminal:

tsc

You won’t see any message in the terminal, but a dist folder will be created. Inside it, you'll find an index.js file,this is the JavaScript version of your TypeScript code. To test if everything is working correctly, create a new TypeScript file and write some code in it. I’ll show you how below.

I created file named index.ts and added a simple line of code that includes a string with an explicit type. Then, I ran npx tsc in the terminal to compile the code. This generated a dist/index.js file, where the TypeScript code was successfully compiled into plain JavaScript.

4: Enable Strict Type Checking (Optional but Recommended)

To make your code safer and catch potential bugs early, it’s a good idea to enable a few strict type-checking options in the tsconfig.json file.

Search for the Type Checking section and uncomment the following options:

"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noUnusedLocals": true,
"noUnusedParameters": true

Here’s what each of those options does:

• noImplicitAny: Forces you to explicitly define types for variables and function parameters. If you don’t, TypeScript won’t assume the type is any.

• strictNullChecks: Ensures null and undefined are only assigned to variables that are explicitly typed to accept them. This helps
  prevent unexpected errors.
  strictFunctionTypes: Makes sure function parameters and return types
  are strictly type-checked and compatible.

• noUnusedLocals: Reports an error if you declare a local variable but
  never use it in your code.

• noUnusedParameters: Warns you if a function parameter is declared but not used inside the function body.

After enabling type-checking options, it’s important to tell TypeScript which files to include or ignore during compilation. You can do this using the include and exclude properties in your tsconfig.json file. Here’s how you can set it up:

• exclude: This tells TypeScript to ignore the_ node_modules_ folder during compilation. You don’t want TypeScript to compile files from external libraries.
• include: This ensures TypeScript only compiles .ts files inside your src folder, including all its subdirectories.

5. Install and Set Up Express

To use the Express framework, install it by running:

npm install express

Once that’s done, create a src folder if you haven’t already, and inside it, create a file named index.ts. Now, import Express into that file.

After importing Express into your index.ts file, you might see a TypeScript error even though the same code works fine in regular JavaScript.

This happens because TypeScript needs type definitions to understand third-party libraries like Express. The Express package by default doesn’t come with built-in TypeScript types. To fix this, you need to install the type definitions for Express separately:

npm install -D @types/express

Keep in mind that you might have to do this for other packages. Once installed, the error should disappear, and you can use Express with full type support.

Now that everything is in place, you can create a basic Express server. In your src/index.ts file, add the following code:

import express from 'express'

const app = express();

app.listen(5000, ()=> {
    console.log(`Server started at port: ${5000}`)
})

Run npx tsc to compile the code, then run node dist/index.js to start the server.

Running npx tsc and then node dist/index.js every time you make a change can be tiring. To make this easier, you can install nodemon, a tool that automatically restarts your server when you update your code. Install it by running:

npm install nodemon

After installing nodemon, the next step is to simplify how you build and run your project by adding custom scripts to your package.json file.

Let’s break it down:

• build: Runs npx tsc to compile your TypeScript code into JavaScript.

• prestart: This runs automatically before npm start. It ensures your
  TypeScript code is compiled before the server starts.

• start: Runs the compiled JavaScript file to start your Express server.

When you run npm start, the prestart script runs first, which executes npm run build. This, in turn, runs npx tsc to compile your TypeScript code. Once compilation is complete, the server starts by running node dist/index.js. The issue with this setup is that it doesn’t automatically track changes. If you make updates to your code, you’ll need to manually stop the server and run npm start again every time. That’s not very efficient.

To fix this, you can set up a watch script. This script continuously monitors your TypeScript files and recompiles them when changes are detected.

There’s one last step to make development smoother: we want the TypeScript compiler to watch for changes and restart the server automatically, both at the same time. To do this, we’ll use a package called concurrently, which allows you to run multiple commands at once.

Install it by running:

npm install concurrently

After installation, open your package.json and add the following dev script under the scripts section:

"dev": "npx concurrently --kill-others \"npm run watch\" \"npm start\""

Let’s break it down:

• npm run watch: Starts the TypeScript compiler in watch mode.

• npm start: Starts the Express server.

• --kill-others: If one process crashes or is stopped, the others are also stopped to avoid leftovers running in the background.

Setting up Express with TypeScript may seem like a lot at first, but once it's in place, it gives you a cleaner, more reliable development workflow. With tools like nodemon, tsc --watch, and concurrently, you can boost your productivity and catch errors early. Now you're all set to build scalable and type-safe Express applications!

Comments

[Dotallio]

Love how you laid out the full workflow, especially the dev scripts and strict checks. Any tips on structuring routes or error handling in this setup?