Skip to main content

Posts

Showing posts with the label typescript

Generate API Documentation Using Swagger Module in NestJS

Swagger provides us a standard to generate API documentation based on the Open API specification. If we use NestJS for building our API providers, we can utilize a tool provided by NestJS in the  @nestjs/swagger  module to generate the documentation automatically in the built time. This module also requires the swagger-ui-express module if we use Express as the NestJS base HTTP handler. Set Swagger configuration First, we need to define Swagger options and instantiate the documentation provider on the main.ts file. import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger'; // sample application instance const app = await NestFactory.create(AppModule); // setup Swagger options const options = new DocumentBuilder() .setTitle('Coffee') .setVersion('1.0') .setDescription('Learn NestJS with coffee') .build(); // build the document const document = SwaggerModule.createDocument(app, options); // provide an endpoint ...

Utilizing Decorators in Typescript

Decorator is a quite good feature in Typescript even though it is currently still in an experimental state. But, because of its advantages, it is commonly used by any developer. Such a framework like Angular also heavily uses this feature from the beginning. A decorator is a syntax for calling a function on the thing that it is decorated . It acts like a wrapper function or higher-order function that results in an improved thing or thing with additional things. The thing may be a class , class method , class property , or method property . The thing that will be decorated must have a specific type signature . A class decorator can only decorate a class, an object that has a constructor. @mydecorator class MyClass {} The code above is similar to the following code. class MyClass {} const WrappedClass = mydecorator(MyClass); We will take the example of utilizing a class decorator. First, we need to create a type of class constructor that passes a generic type for defining the ...

Setting Up Next.js Project With ESLint, Typescript, and AirBnB Configuration

If we initiate a Next.js project using the  create-next-app tool, our project will be included with ESLint configuration that we can apply using yarn run lint . By default, the tool installs eslint-config-next and extends next/core-web-vitals in the ESLint configuration. The Next.js configuration has been integrated with linting rules for React and several other libraries and tools. yarn create next-app --typescript For additional configuration such as AirBnB, it is also possible. First, we need to install the peer dependencies of eslint-config-airbnb . We also add support for Typescript using eslint-config-airbnb-typescript . yarn add --dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks yarn add --dev eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser After that, we can update the .eslintrc.json file for the new configuration. { "extends": [ "airb...