Node & Express server, but with TypeScript !
Tags: typescript, beginners, tutorial, node
Published: 2020-11-19 15:41:15

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.

<hr>

# Let's Start 🤓

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8kas1q4m54tziu5796bv.png)

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

```npm
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.

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

```bash
touch server.ts
code . 
```

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

```npm
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
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.

```ts
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.

```json
{
  "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.
```json
"scripts": {
    "server": "nodemon server.ts"
  },
```

Now start the server with the `server` script
```npm
npm run server
```

You should see this output in the terminal if there are no errors.
```npm
[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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wavigoqisxnz3isbebcu.png)

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.

```json
"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
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.

```js
"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](https://github.com/Soumya-Dey/node-typescript-server-demo)

<hr>

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](https://soumya-dey.github.io/)
- 🌟 Check out my [Substack](https://soumyadey.substack.com/)
- 😸 Check my [Repos on GitHub](https://github.com/Soumya-Dey)
- 🦊 Check my [Repos on GitLab](https://gitlab.com/Soumya-Dey)
- 📦 Check my [Packages on NPM](https://www.npmjs.com/~soumyadey)
- 🔗 View my [Profile on LinkedIn](https://www.linkedin.com/in/soumya-dey-kolkata/)
- 📝 View my [Blogs on Dev.to](https://dev.to/soumyadey)
- 😜 Follow me on [Instagram](https://www.instagram.com/soumya_sl/)
- 📚 Check out my [Goodreads Profile](https://www.goodreads.com/dobby_the_free_elf)
- 📪 Contact me [Here](mailto:soumyadey200@hotmail.com)