DEV Community

Cover image for Node & Express server, but with TypeScript !
Soumya Dey
Soumya Dey

Posted on • Edited on

Node & Express server, but with TypeScript !

#typescript #beginners #tutorial #node

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 🤓

Alt Text

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
Enter fullscreen mode Exit fullscreen mode
  • -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"
}
Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode

Install dependencies

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

npm i express typescript
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}`));
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

Now start the server with the server script

npm run server
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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 ./"
  },
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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}`));
Enter fullscreen mode Exit fullscreen mode

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 🕸:

Top comments (3)

Collapse
 
steve-lebleu profile image
Steve Lebleu •

Great idea and awesome tutorial !

If you will go further on this subject, please consider this repository: github.com/konfer-be/ts-express-ty... He becomes old, but thats a contribution ;-)

Collapse
 
cumaniar profile image
Info Comment hidden by post author - thread only accessible via permalink
Chiragkumar Maniyar •

For more easier and simple code visit:
github.com/cumaniar/typescript-exp...

Collapse
 
pthyst2 profile image
Huỳnh Trương Chí Quân •

Thanks you, sir

Some comments have been hidden by the post's author - find out more

Read next

imsushant12 profile image

Deployment of a Node.js Application on AWS

Sushant Gaurav -

keploy profile image

How to run cypress run and cypress open at a time

keploy -

littlelittlecloud profile image

StepWise: A Powerful C# Workflow Engine for Task Execution

Xiaoyun Zhang -

codewithsadee profile image

How to Build AI Chat App Using React, Tailwind and Framer motion

Sadee -