Learn how to set up TypeScript in an Express.js app. This post describes a beginner-friendly way to set up TypeScript in an Express.js app and understand the basic constraints that come with it.

Ease of development is great when you are building a server written in JavaScript using Node.js and Express. What happens when this application server scales or you are working in a team of developers all across the world? TypeScript can help.

In this post, I am not going to talk about whether you should use TypeScript or not. This post describes a beginner-friendly way to set up TypeScript in an Express.js app and understand the basic constraints that come with it.

Prerequisites

To take full advantage of this tutorial, please make sure you have the following installed in your local development environment:

• Node.js version >= 12.x.x installed
• Access to one package manager such as npm or yarn
• Basic knowledge of Node.js and Express

Create a minimal server with Express

Start by creating a new directory where you keep your side projects in your local development environment. Inside that directory, use npm’s initializer command to create a package.json file:

media server
cd server/
npm init --yes

The --yes flag uses the default settings when initializing a package.json from npm config you might have set up.

The package.json file created might look something like this:

{
  "name": "express-ts-example",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Aman Mittal (https://amanhimself.dev)",
  "license": "MIT"
}

After the initializing step, let us add an express package. From the terminal window, run the command:

yarn add express@4.17.1

Next, create a new file called index.js at the root of the project with the following code to trigger a minimal server:

const express = require('express');
const app = express();
const PORT = 8000;
app.get('/', (req,res) => res.send('Express + TypeScript Server'));
app.listen(PORT, () => {
  console.log(`⚡️[server]: Server is running at https://localhost:${PORT}`);
});

Go back to the terminal and trigger the common node index.js to start the server.

The Express server is now up and running.

Add TypeScript

Let’s add two libraries to the development server as devDependencies.

• typescript is a core library that helps to compile the TypeScript code to valid JavaScript
• ts-node is a utility library that helps to run a development server written using TypeScript directly from the terminal

To install them, from a terminal window run the following command:

yarn add -D typescript ts-node

The -D flag is also known as --dev flag and is a specification for the package manager to install these libraries as devDependencies.

Once these libraries are installed, go to the package.json file and see a new devDependencies object:

"devDependencies": {
  "ts-node": "8.10.2",
  "typescript": "3.9.5"
}

Next, create a tsconfig.json file at the root of the development server project. This file allows you to customize TypeScript configuration and add other configurations to compile the TypeScript project:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./",
    "outDir": "./build",
    "esModuleInterop": true,
    "strict": true
  }
}

The compilerOptions is a mandatory field that needs to be specified. The options used in the config above are:

• target allows us to specify the target JavaScript version that compiler will output
• module allows us to use a module manager in the compiled JavaScript code. The commonjs is supported and is a standard in Node.js
• rootDir is an option that specifies where the TypeScript files are located inside the Node.js project
• outDir specifies where the output of the compiled is going to be located
• esModuleInterop allows us to compile ES6 modules to commonjs modules
• strict is an option that enables strict type-checking options

There might be other configuration options that you can add on for the TypeScript compiler but these are the basic configuration options specified that can help you to get started.

#typescript #node #express #javascript #developer