DEV Community: Harendra Bhujel

Conquering the Villains: A Journey of Setting Up Node.js with Express and TypeScript

Harendra Bhujel — Fri, 05 May 2023 05:27:37 +0000

"TypeScript is the Robin to your Batman in the world of JavaScript programming. It's a powerful sidekick that helps you write better code with fewer errors.”

Just like a superhero gains their abilities through a unique process, setting up Node with Express and TypeScript can give you powerful tools to build robust web applications. With Node.js and Express, you can easily create web applications and APIs, and when you add TypeScript to the mix, you gain strong typing and better error checking. Ready to become a web development superhero? Let's dive in!

Let's start our journey by initializing a project, which is where the battle will begin. As any superhero knows, preparation is key to success. So, we'll cast the following spell to make a folder and initialize it with default settings using yarn:



mkdir express_ts_setup && cd express_ts_setup
yarn init -y

We've successfully initialized our project and let’s add some more friends to our side. Like any good detective in a bat suit , we must be prepared for battle.

Our first challenge is the introverted Node engine. It may seem harmless, but it's a powerful force that can cause chaos if left unchecked. That's why we need to call on the help of our friends and their allies.

We'll invite express and typescript to join our superhero squad, but we must also call @types/node, and @types/express so typescript will understand our node engine and express It's like calling on your superhero friends to fight a villain, but realizing you also need their allies to win the battle. 💪



yarn add express typescript @types/node

Now, let's create a src folder where we'll keep our files, and an index.ts file where our program will start. Like a true superhero, we need to have a strong starting point for our mission.

With TypeScript on our side, we were ready to take on the battle. But we soon realized that TypeScript was not just any ally - he was a joker, always cracking up jokes about our code. Luckily, he was also a controller, and he helped us keep our code under control.

Despite his humorous nature, we needed TypeScript in our battle, as he was the information broker. He could tell us what was wrong with our code before we even noticed it ourselves. But there was a catch: we had to communicate with him in his own language, Fe2O3. It was a magical language, and only the detective in the bat suit could understand it.

So we armed ourselves with TypeScript, the detective's bat suit, and a good sense of humor, and set out to conquer the world of Node.js with Express and TypeScript.



// tsconfig.json
{
  "compilerOptions": {
    // Set the ECMAScript version to ES2020
    "target": "ES2020",

    // Use a custom module system called NodeNext
    "module": "NodeNext",

    // Use the nodenext module resolution strategy
    "moduleResolution": "nodenext",

    // Enable compatibility with modules that use `export =` syntax
    "esModuleInterop": true,

    // Allow importing JSON files as modules
    "resolveJsonModule": true,

    // Generate source maps for the compiled code
    "sourceMap": true,

    // Specify the directory where the compiled code will be outputted
    "outDir": "./dist",

    // Enable strict type checking rules
    "strict": true,
  },

  // Specify the files that should be included and excluded in the compilation process
     "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "dist"]
}

And so we continued on our quest, and created the index.ts file where we would start our magical process. This file would be the entry point to our application, and it would give multiple instructions to our magic.

First, we imported our friends Express and TypeScript, as well as some other helpful tools:



// we use default spell `express` which is the main spell
// and call named spell`Request` and `Response` which joker will need later
// to understand information, he's a psycho information broker after all
// ofc we will use ES module system 
import express, { Request, Response } from "express";

// instantize an app from express() function
const app = express();

// setup a simple get route 
// and return a test message

app.get("/", (req: Request, res: Response) => {
  res.json({ test: "Ok" });
});

// and finally start the server at port 5000
const PORT = 5000;
app.listen(PORT, () => {
  console.log("server has started on port");
  console.log("http://localhost:" + PORT);
});

Excited to see our magical application come to life, we ran the node src/index.ts command in our terminal, just like we had done before with our JavaScript projects. But instead of seeing our application start up, we were met with an error message:



import express, { Request, Response } from "express";
^^^^^^

SyntaxError: Cannot use import statement outside a module

Great! Now our friend Node understands the magic of ES modules, thanks to our configuration in package.json.



{
  "name": "expess_ts_setup",
  "version": "1.0.0",
  "main": "index.ts",
  "license": "MIT",

    // the new line we add 
    "type": "module", // "commonjs" is defualt, require() syntax
    // ******************
  "dependencies": {
    "@types/node": "^18.16.3",
    "express": "^4.18.2",
    "typescript": "^5.0.4"
  }
}

And let’s try again 🙂

node src/index.ts



node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\expess_ts_setup\src\index.ts

Ofc it won’t work.
Our friend node engine doesn’t understand typescript. We brought @types/node so typescript could understand node

Now it looks like we need another friend to explain typescript to node

After some digging around we found out that there’s someone called ts-node which can help us do that.
so we called him yarn add ts-node -D

Now instead of calling node we call ts-node



yarn ts-node src/index.ts

However, it seems like we are still encountering an error:



TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\expess_ts_setup\src\index.ts

We added some more information to our tsconfig.json file to help ts-node understand how to transpile our TypeScript code into JavaScript that node can understand. Here's the updated tsconfig.json file:



{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "moduleResolution": "nodenext",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "@controllers": ["src/controllers/index.js"],
      "@router": ["src/router/index.js"],
      "@endPoints": ["src/router/endPoints.enum.js"],
      "@prisma": ["src/config/PrismaClient.js"]
    }
  },
  // "include": ["src/**/*"],

    // ts-node settings we added
  "ts-node": {
    "esm": true,
    "compiler": "typescript"
  }
// *****************
}

Oh yesss!! Finally we saw what we wanted to see



server has started on port
http://localhost:5000

Great! It's always satisfying to see things working as expected.

Now our magical tool works but we have to restart it every time we add some new features to it.

For that we all to whom to call 🙂

Our good old friend nodemon , let's call him, yarn add nodemon -D

We can now call yarn nodemon src/index.ts and our toll won’t have to restart for it to work with new features.
And lucky for us, since we already have ts-node who understands typescript , our nodemon has learned to work with ts-node automatically.



[nodemon] 2.0.22
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node src\index.ts` // nodemon is starting ts-node Wow!
server has started on port
http://localhost:5000

Phew!!
And we have finally make a magical tool that gives us power to build amazing web spell with ease. Don your developer cape and start building today!

4 Rule of `this` in JavaScript

Harendra Bhujel — Fri, 06 Sep 2019 15:48:00 +0000

One article seems to be too short to cover the awesomeness of this so we will discuss this in two-part series.

As confusing as this in JavaScript can be, it is an important concept in JavaScript that every JS developer should know.
this provides the foundation for Object-Oriented in JavaScript.
I am not a pro but I will try my best to explain what I have understood about this.

Objective

Define what the keyword this in JavaScript
Understand the four rules to figure out the value of this

So what is `this`?

this is a reserved keyword in JavaScript which simply refers to the object it currently belongs to. The value of this is set on the execution context, usually determined by how a function is called so the value of this change during execution.

Four Rules of `this`

The value of this can be determined using one of the following rules.
(These are not an official rule, just something I learned from awesome developers our there)

Global Context Rule
Object or Implicit Rule
Explicit Rule (call, bind and apply)
new Rule (new keyword in JavaScript)

1. Global Context Rule

Reminder: this points to the object it currently belongs to.

When this is not inside any declared object, then this points to the window objec.
Every variable declared in the global scope is attached to the window object.

Basically ,in browser,

let name = 'blank';

is same as

window.name = 'blank';

Let's look at the value of this in our browser.

console.log(this); // Window{...}, window object

Here this points to the window object because this is inside the window object.

We can verify if this is really pointing to the window object.

this === window; // true

As we can see, this is equal to the window object.

Now let's look at the value of this inside a function.

function whatIsThis() {
    return this;
}

whatIsThis(); // Window { ... }, Window Object

Even though we have called this inside a function, this is still inside the window object so it still points to the window object.

Let's look at another example.

function variableInThis() {
   this.person = 'blank';
}

// calling our function

variableInThis();

// let's check the value of `person` variable
console.log(person); // 'blank'
console.log(Window.person); // 'blank'

All in all, this points to the window object because this belongs to the window object and any variable we globally create is a property attached to the window object.

2. Object or Implicit Rule

Reminder: this points to the object it currently belongs to.
Or we can also say it points to it's closest object.

When we declare an object implicitly, then this inside that object points to that object, and not the window object.

let person = {
   firstName: 'blank',
   sayHi: function() {
      return `Hi ${this.firstName}!`;
   },
   determineContext: function() {
      return this === person;
   },
   whatIsThis: function() {
      return this;
   }

};

person.sayHi() // 'Hi blank'

Here we implicitly declare an object, so this inside the person object points to the person object itself and not the window object.

Meaning, inside the person object, doing

...
   return `Hi ${this.firstName}`;
...

is same as doing

...
   return `Hi ${person.firstName}`;
...

Let's see the value of this inside the person object

whatIsThis() // {firstName: "blank" ... }
person.determineContext(); // true

We can see that person === this is true so we can confidently say that this is pointing to the person object. (and not the window object.)

Now let's look at a nested object and find the value of this inside the inner object.
Reminder Again: this points to the object it currently belongs to.

var person = {
   firstName: 'blank',
   sayHi: function() {
      return 'Hi ' + this.firstName;
   },
   determineContext: function() {
      return this === person;
   },
   language: {
      javaScript: function() {
         return `${this.firstName} likes JavaScript!`;
      },
      determineContext: function() {
         return this === person;
      },
      thisInLanguageObject: function() {
          return this;
      }
   }
};

person.determineContext(); // true

Inside person object, the value of this is pointing to the Person object because that's what this do.

Now let's look inside the language object for the value of this

person.language.javaScript(); // "undefined likes JavaScript!"

Inside the language object, there's no firstName property, so this.firstName is undefined.

Q. Does this.firstName === language.firstName inside the language object?

Moving on, let's look at the value of this inside the language object.

person.language.determineContext(); // false

We can be sure that this inside the language object is not pointing to the person object.

So let's see what is the value of this

person.language.thisInLanguageObject();
// {javaScript: ƒ, determineContext: ƒ, thisInLanguageObject: ƒ}

Let's Wrap UP

this points the current object it belongs to
if this is in global context then this points to the window object
if this is in the declared object then this points to that declared object

And this concludes our first two rules.
In the next part, we will see how call, apply and bind works with this and also talk about new keyword in JavaScript.