In this post, I am not going to insist you use TypeScript over JavaScript or talk about how TypeScript is better than JavaScript.

This post will guide you on how to start building a Node and Express server using TypeScript. So if you don't care about which language is better or which is bad and just want to learn TypeScript, then follow along.

Let's Start 🤓

Initialize a project

Navigate to your folder of choice and open the terminal in that folder. Now use npm to initialize a new project.

cd code/
mkdir node-typescript-demo
npm init -y

• -y flag is for using all the default values. You can omit that if you want to enter the values manually.

Now you should have a package.json file in your project directory.

{
  "name": "node-typescript-demo",
  "version": "1.0.0",
  "description": "",
  "main": "server.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Soumya Dey",
  "license": "MIT"
}

Now let's create our main file server.ts in the root of the project directory. And open the project in your choice of code editor. I am gonna use Visual Studio Code.

touch server.ts
code . 

Install dependencies

Now let's install all the required dependencies for our server.
We'll install express and typescript.

npm i express typescript

We'll also need the versions of express and node with the types for TypeScripts to recognize the types. Also, a package called ts-node is required to run a development server written using TypeScript directly from the terminal

npm i -D @types/node @types/express ts-node

Get the server up and running

Now let's add the code for the server to run.
Open server.ts file in your editor and create an express app. Add the following code to run the server.

import express from "express";

const app = express();

const PORT = process.env.PORT || 4000;

app.get("/", (req, res) => res.send("Hello from server!"));

app.listen(PORT, () => console.log(`⚡Server is running here 👉 https://localhost:${PORT}`));

But before we run the server, there is one last thing to set up.
We'll need to create a config file for typescript so that our code gets compiled properly.
Create a tsconfig.json file at the root of the development server project and add the following lines of code.

{
  "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.

Now open the terminal and enter the following command to start your server.
I am going to use nodemon to watch for file changes. You can install nodemon globally in your machine by using the command npm i -g nodemon.

To use it, you may add a server script in the package.json file as specified below.

"scripts": {
    "server": "nodemon server.ts"
  },

Now start the server with the server script

npm run server

You should see this output in the terminal if there are no errors.

[nodemon] 2.0.6
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node server.ts`
⚡Server is running here 👉 https://localhost:4000

Now you can open https://localhost:4000 in your browser and it should show the following screen.

As we are using nodemon, it will restart the server for us automatically whenever there is a file-change.

So that's your node js server up and running with all its glory using TypeScript.

Compile your TypeScript project

To compile a TypeScript project to a valid JavaScript one, start by declaring a new script called build inside the package.json file.

"scripts": {
    "server": "nodemon server.ts",
    "build": "tsc --project ./"
  },

• TypeScript provides a command to compile the code called tsc. This command demands a flag to specify as to what to compile.
• The --project (shorthand: -p) is used to specify the project directory that the compiler can pick the code files from to compile to valid JavaScript.
• The ./ specifies the root project.

From the terminal window, run the build command to compile the code

npm run build

Now there will be a folder named build in the root of your project directory.
Open the folder and you'll see a file that contains your TypeScript code compiled to JavaScript.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = express_1.default();
const PORT = process.env.PORT || 4000;
app.get("/", (req, res) => res.send("Hello from server!"));
app.listen(PORT, () => console.log(`⚡Server is running here 👉 https://localhost:${PORT}`));

If you specify any other directory named as the value of the property outDir in the tsconfig.json file that name of the directory would have reflected here instead of build.

Source code

You can get the final source code here 👉 @Soumya-Dey/node-typescript-server-demo

Thanks for reading. Show some love if you like the post.

Don't forget to share your views about this post in the comments.

Find me around web 🕸:

• 💻 Visit my Website
• 🌟 Check out my Substack
• 😸 Check my Repos on GitHub
• 🦊 Check my Repos on GitLab
• 📦 Check my Packages on NPM
• 🔗 View my Profile on LinkedIn
• 📝 View my Blogs on Dev.to
• 😜 Follow me on Instagram
• 📚 Check out my Goodreads Profile
• 📪 Contact me Here