Forem: Phat Nguyen

Set up NodeJS Project with ExpressJS using TypeScript

Phat Nguyen — Mon, 24 Apr 2023 10:24:44 +0000

System requirements

Node.js
npm
MacOS, Windows, and Linux are supported

Create a project

Start by creating a folder called myapp (you can name it according to your project).

Navigate into the newly created folder and run the command npm init --yes to create a package.json file.

$ mkdir myapp
$ cd myapp
$ npm init --yes

With the --yes flag, you will select the default configuration for npm. This is the package.json file after running the command:

// package.json

{
  {
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Next, we will install Express and TypeScript using the following install command:

$ npm install -s express
$ npm install -D typescript @types/express @types/node ts-node-dev

With -s or --save, the libraries will be noted in the dependencies section of the package.json file. Similarly, with -D or --save-dev, the libraries will be noted in the devDependencies section.

After that, we need to run the command to configure TypeScript for the project:

npx tsc --init

This will create a tsconfig.json file in your project directory with the following content:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "./",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Next, we create a src folder to contain our code, and create an app.ts file to set up the server for our code:

// src/app.ts

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

class App() {
    private readonly app: Application;
    private readonly port: string | number;

    constructor() {
        this.app = express();
        this.port = process.env.PORT || 8080;
        this.setup();
    }

    public async setup() {
        this.app.use(express.json());
        this.app.use(express.static("public"));
    }

    public start() {
        this.app.listen(this.port, () => {
            console.log(`⚡️[server]: Server is running at http://localhost:${this.port}`);
        })
    }
}

Next, we will create a Controller by creating a controllers folder, and then creating a controller.ts file.

// src/controllers/controller.ts

import express from "express";

interface Controller {
    setupRoutes(app: express.Application): void;
}

export default Controller

// src/controllers/hello.controller.ts

import { Application, Router, Request, Response, NextFunction } from "express";
import Controller from "./controller";

export class HelloController implements Controller {
    private readonly router: Router;
    private readonly path: string;

    constructor(app: Application) {
        this.path = '/';
        this.router = Router();
        this.setupRoutes(app);
    }

    public hello = async (req: Request, res: Response, next: NextFunction) => {
        return res.send("Hello world!!!");
    }

    setupRoutes(app: Application): void {
        this.router.get(`${this.path}`, this.hello);
        app.use('/', this.router);
    }

}

export default HelloController;

Add Controller to app.ts file


// src/app.ts

public async setup() {
    //...
    await this.setupController();
}

public async setupController() {
    new HelloController(this.app);
}

Here is the complete content of the app.ts file:

import express, { Application, Request, Response } from "express";
import HelloController from "./controllers/hello.controller";

class App {
    private readonly app: Application;
    private readonly port: string | number;

    constructor() {
        this.app = express();
        this.port = process.env.PORT || 8080;

        this.setup();
    }

    public async setup() {
        this.app.use(express.json());
        this.app.use(express.static("public"));
        await this.setupController();
    }

    public async setupController() {
        new HelloController(this.app);
    }

    public start() {
        this.app.listen(this.port, () => {
            console.log(`⚡️[server]: Server is running at http://localhost:${this.port}`);
        })
    }
}

export default App;

Next, we will create an index.ts file outside the src folder to start the application:

import App from './src/app';

const app: App = new App();
app.start();

Finally, we need to update the package.json file:

"start": "node dist/index.js",
"dev": "ts-node-dev index.ts",
"build": "tsc"

Good luck!!!

Learn TypeScript

Phat Nguyen — Thu, 20 Apr 2023 13:29:46 +0000

Introduction to Typescript

TypeScript is an open-source programming language developed by Microsoft. It is an extension of JavaScript that allows you to write more complex JavaScript code without worrying about common data type errors.

TypeScript supports additional features such as static typing, declaring types for variables and classes, making it easier, more efficient, and easier to maintain when developing JavaScript applications.

1. Static typing

In TypeScript, static typing allows you to define the data type of variables, functions, objects, and other components in the program. When you declare a variable with a specific data type, TypeScript will give you an error if you assign a value that does not match that data type.

For example, if you declare a variable with a data type of integer, TypeScript will give you an error if you assign a string value to that variable.

let myNum: number;

// OK
myNum = 42;

// Error: Cannot assign type 'string' to type 'number'
myNum = "Hello world!";

const myNum: number = 10;

// or

const myNum = 10;

function multiply(a: number, b: number): number {
    return a * b;
}

// OK
add(1,2);

// Error
add(2,"3");

In the example above, we have a multiply function that can take two parameters as numbers and return a number. By using static data types in TypeScript, we clearly specify that the data type of the two parameters a and b is a number, and the data type of the return value is also a number. If we try to pass a string ("3") to the parameter b, TypeScript will report a compilation error due to the incompatible data type, helping us detect errors before running the program.

2. Support for new features of ES6 and ES7

TypeScript provides support for many new features of ES6 and ES7 versions, making web application development easier.

1. Let and Const

TypeScript supports variable declaration using let and const, making variable management easier.

let a: number = 1;
const b: string = 'Hello world!';

2. Arrow Function

TypeScript allows using arrow function syntax () => {} to define functions, making the code shorter and more concise.

function multiply(a: number, b: number): number {
    return a * b;
}

// arrow function
const multiple = (a: number, b: number): number => (a * b);

3. Template Literals

Typescript supports using template literals to create strings that can be combined with JavaScript expressions.

let isRed: boolean = true;

const text = `${isRed ? 'Red' : 'Blue'}`

4. Destructuring

TypeScript supports the destructuring of values in an array or object.

const [a, b] = [1, 2];
console.log(a, b) // 1 2

const [a, b, ...c] = [1, 2, 3, 4, 5]
console.log(a, b, c) ; //1, 2, [3, 4, 5]

const user = { name: "John", age: 20 };
const { name, age } = name;
console.log(name) // John
console.log(age) // 20

5. Spread Operator

TypeScript supports using the spread operator (...) to pass parameters or copy arrays and objects.

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [...a, ...b];
console.log(c); // [1, 2, 3, 4, 5, 6]

const x = { name: "John" };
const y = { age: 20 };
const z = { ...x, ...y };
console.log(z); // { name: "John", age: 20 }

6. For-of Loop

TypeScript allows using the for-of loop to iterate through the elements in an array.

const a = [1, 2, 3, 4, 5, 6];

for (const i = 0; i < a.length - 1; i++) { }

for (const i in a) { }

for (const i of a) { }

7. Async/Await

TypeScript supports using the async/await syntax to handle asynchronous operations.

async function getPosts() {
    const res = await fetch('');
    const data = res.json();
    return data;
}

8. Optional Chaining

TypeScript provides support for optional chaining (?.) to check whether a property or method exists before accessing it.

const user = { name: "John", age: 20 };
const name = user?.name;
const address = user?.address || "Unknown";

console.log(name); // John
console.log(address); // Unknown

9. Nullish Coalescing

TypeScript provides support for nullish coalescing (??) to handle null or undefined values in comparison expressions.

const x = null;
const y = undefined;
const z = 0;

const result1 = x ?? 10;
console.log(result1); // output: 10

const result2 = y ?? 20;
console.log(result2); // output: 20

const result3 = z ?? 30;
console.log(result3); // output: 0

3. Modules

Typescript supports popular module types such as CommonJS, AMD, SystemJS, ES6, and UMD. Modules help to break down the source code into independent parts that are easy to manage and reuse. By using modules, we can import/export objects, functions, and variables between files or between different applications.

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

Then, in another file, we can import the add function from the math module like this:

import { add } from './math';

const result = add(2, 3);
console.log(result); // 5

Typescript also allows the use of the namespace concept to create modules with multiple components. For example, we can declare a namespace named utils in a file called utils.ts as follows:

// utils.ts
namespace utils {
  export function add(a: number, b: number): number {
    return a + b;
  }

  export function multiply(a: number, b: number): number {
    return a * b;
  }
}

export default utils;

Then, we can import and use the add and multiply functions in another file as follows:

import utils from './utils';

const sum = utils.add(2, 3);
const product = utils.multiply(2, 3);
console.log(sum, product); // 5 6

With support for popular modules, Typescript makes application development easier and more organized.

4. The feature of detecting compile-time errors

The feature of detecting compile-time errors is one of the prominent features of TypeScript. TypeScript checks the source code during compilation to detect potential errors before executing the code. This helps to detect errors such as mismatched data types, using variables that have not been declared, or using non-existent methods before the application is run.

When a compile-time error occurs, TypeScript provides detailed error messages, including the error location, data type information, and debug information. This makes it easier and quicker to identify and fix errors.

function add(a: number, b: number) {
return a + b + 'test'; // error TS2365: Operator '+' cannot be applied to types 'number' and 'string'.
}

const result = add(2, 3);
console.log(result);

5. Inheritance

Inheritance allows a child class to inherit properties and methods from a parent class. The child class can use the properties and methods of the parent class, as well as define its own properties and methods.

To inherit from a parent class, we use the extends keyword. For example, the following code defines a Person class and an Employee class that inherits from Person:

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

class Employee extends Person {
  employeeId: number;

  constructor(name: string, age: number, employeeId: number) {
    super(name, age);
    this.employeeId = employeeId;
  }

  getEmployeeId() {
    console.log(`My employee ID is ${this.employeeId}`);
  }
}

In this example, the Employee class inherits from the Person class using the extends keyword. The Employee class can use the properties and methods of the Person class, including name, age, and sayHello. In addition, the Employee class also defines its own property employeeId and a method getEmployeeId.

When we create an object of the Employee class, it can use both the methods and properties of both the Person and Employee classes, as shown in the following code:

const employee = new Employee('John Doe', 30, 1234);
employee.sayHello(); // Output: Hello, my name is John Doe and I am 30 years old.
employee.getEmployeeId(); // Output: My employee ID is 1234.

Inheritance is an important feature of object-oriented programming (OOP) and makes application development easier by reusing source code and reducing repetition in class definitions.

6. Library

TypeScript supports standard JavaScript libraries such as the DOM, Fetch API, and other features.

In addition, the TypeScript community has also developed many open-source libraries that can make application development easier, such as:

React: Facebook's React library has been rewritten in TypeScript and supports static data types.
Angular: Google's Angular framework is designed to work well with TypeScript.
Vue.js: The Vue.js library also supports TypeScript.
Lodash: The Lodash library provides many utility functions for working with arrays, strings, numbers, and objects.
Moment.js: The Moment.js library helps to handle dates and times in JavaScript and supports TypeScript.
RxJS: The RxJS library helps to handle asynchronous data streams and also supports TypeScript.

Overall, the rich library of TypeScript along with other well-known open-source libraries allows developers to easily develop complex and powerful applications.

7. Scalability

TypeScript has high extensibility, allowing developers to customize and extend the language according to their needs. This is demonstrated through the following features:

1. Type extension declaration

TypeScript allows programmers to declare type extensions for the libraries or modules they use. This helps to make error detection during development more accurate.

Suppose you are using a third-party library, such as moment.js, to handle dates and times in your application. However, TypeScript does not have a default data type for moment.js. To solve this problem, you can declare a type extension for moment.js as follows:

declare module "moment" {
  interface Moment {
    // Declare a data type for the isLeapYear method
    isLeapYear(): boolean;
  }
}

We have declared a new data type for moment.js using the keywords declare and module "moment". Then, we have extended the Moment interface of moment.js to add a new method, isLeapYear, which returns a boolean data type.

After declaring this type extension, TypeScript will understand that moment().isLeapYear() is a valid method and can determine its return data type. This helps to make error detection during development more accurate.

2. Decorator

Decorator is a feature in TypeScript that allows developers to add additional functionality to classes, methods, or properties. It is a feature introduced in ECMAScript 6. Decorators help make our code more readable, maintainable and can be used to implement features such as logging, validation, caching, authorization, and more.

Here's an example of a decorator that logs the arguments passed to a method, along with the timestamp of the method call:

function log(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`[${new Date().toISOString()}] Calling ${key} with arguments: `, args);
    return originalMethod.apply(this, args);
  }
  return descriptor;
}

class Example {
  @log
  sayHello(name: string) {
    console.log(`Hello, ${name}!`);
  }
}

const example = new Example();
example.sayHello("John"); // output: [2023-04-20T00:00:00.000Z] Calling sayHello with arguments: ["John"] 
                          //         Hello, John!

In this example, the log function is a decorator that takes three parameters: the target object, the name of the method being decorated, and the method descriptor. The decorator then replaces the original method with a new function that logs the method call and its arguments before calling the original method. The decorator is then applied to the sayHello method of the Example class using the @log syntax. When the sayHello method is called, the decorator intercepts the call and logs the method arguments and call time before calling the original method.

3. Mixin

TypeScript allows programmers to use Mixins, which is a way to combine classes or interfaces together to create a new class.

class Animal {
  constructor(public name: string) {}

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

class Flyable {
  fly() {
    console.log(`${this.name} is flying.`);
  }
}

class Bird extends mixin(Animal, Flyable) {}

const bird = new Bird('Sparrow');
bird.eat(); // output: Sparrow is eating.
bird.fly(); // output: Sparrow is flying.

In the code above, we define two classes Animal and Flyable. We then create a new class Bird by combining Animal and Flyable using the mixin function from the ts-mixer library. The resulting Bird class has the properties and methods from both Animal and Flyable, and can be instantiated and used like any other class.

4. TypeScript Language Service

TypeScript has a TypeScript Language Service, which is a tool that provides APIs for programmers to create additional utilities for TypeScript in IDEs and code editors.

Source: Internet
@nguyenphatit

JavaScript: Tips and Tricks

Phat Nguyen — Mon, 30 May 2022 08:53:32 +0000

1. Filter Unique values

You can easily find unique value using Set.
The Set object type was introduced in ES6, and along with ..., the Spread operator, we can use it to create a new array with only the unique values

const array = [1, 2, 1, 3, 5, 5, 1];
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // 1, 2, 3, 5

2. Short-Circuit Evaluation

Using && will return the first false or falsy value. If every operand evaluates to true, the last evaluated expression will be returned

console.log(true && false && 1); // false
console.log(true && true && 1); // 1

Using || will return the first true or truthy value. If every operand evaluates to false, the last evaluated expression will be returned

console.log(true || false || 1); // true
console.log(true || true || 1); // 1

3. Convert to Boolean

All values in JavaScript are truthy with the exception of 0, "", null, undefined, NaN and of course false, which are falsy.

We can easily switch between true and false by using the navigate operator !, which will alse convert the type to boolean

console.log(!0); // true
console.log(!1); // false
console.log(!!0); // false

4. Convert to Number

The opposite can be quickly achieved using the addition operator +

let int = "1";
console.log(int); // "1"
console.log(typeof int); // "string"

int = +int;
console.log(int); // 1
console.log(typeof int); // "number"

5. Quick Float to Integer

If you want to convert a float to an integer, you can use Math.floor(), Math.ceil() or Math.round(). But there is also a faster way to truncate a float to an integer using |, the bitwise OR operator.

console.log(15.9 | 0); // 15
console.log(-15.9 | 0); // -15

6. Async/Await

Async

When we append the keyword async to the function, this function returns the Promise by default on execution. Async keyword provides extra information to the user of the function:

The function contains some Asynchronous Execution
The returned value will be the Resolved Value for the Promise

async function func() {
    return 1;
}

func().then(alert); // 1

Await

The keyword await make JavaScript wait until that Promise settles and returns its result. The await works only inside async function.

async function func() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("Done"), 1000);
    });

    let result = await promise;
    alert(result); // "Done"
}

func();