Number Turns to String over Http Request from Angular Client to NestJS Server

I had a similar issue when I was getting started with NestJS and routes.

Then, while going through the documentation and some open source NestJS API projects, I found multiple ways to tackle this issue.

1. You can utilize ValidationPipe to automatically transform the payload to your desired type.

There are two ways to do it.

The first one is to apply the ValidationPipe at your controller method level.

@Get()
@UsePipes(new ValidationPipe({ transform: true })) // <--- Add this line
getRows(
  @Query('firstIndex') firstIndex: number,
  @Query('limit') limit: number,
  @Query('sorts') sorts: string
){
  console.log(typeof firstIndex === 'number'); // true
  console.log(typeof limit === 'number'); // true
  console.log(typeof sorts === 'string'); // true
}

The other way to apply the ValidationPipe behavior at global level.

This is how you would do it in your NestJS App instantiate file:

app.useGlobalPipes(
  new ValidationPipe({
    transform: true,
  }),
);

(ValidationPipe and @UsePipes() decorator are imported from the @nestjs/common package)

You can read more about this in NestJS Transform payload objects doc.

2. The second way is to explicit convert the type of the value.

This is how you can get it done:

@Get()
getRows(
  @Query('firstIndex', ParseIntPipe) firstIndex: number, // <-- Added ParseIntPipe
  @Query('limit', ParseIntPipe) limit: number, // <-- Added ParseIntPipe
  @Query('sorts') sorts: string
){
  console.log(typeof firstIndex === 'number'); // true
  console.log(typeof limit === 'number'); // true
  console.log(typeof sorts === 'string'); // true
}

(The ParseIntPipe is imported from the @nestjs/common package)

As you can see, here, I have passed another parameter which is a Pipe in the @Query decorator. It will parse the value as an integer.

You can read more about NestJS Transform Explicit conversion doc here.

External Links:

• NestJS Validation