Node & Express server, but with TypeScript !

Node & Express server, but with TypeScript !:

 

Initialize a project

Navigate to your folder of choice and open the terminal in that folder. Now use npmto 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 nodemonglobally 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.

from Tumblr https://generouspiratequeen.tumblr.com/post/635313497584041984

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s