Friedrich Siever

12. Januar 2024

Nest.js: Data Transfer Objekte - Request Payload

von: Friedrich Siever | Last Updated: 12.01.24

Intro

In diesem Beitrag tauchen wir ein in die Welt der Data Transfer Objekte in Nest.js. Vereinfacht gesagt handelt es sich um eine schicke Bezeichnung für ein wirklich hilfreiches Konzept zur Definition erwarteter Eigenschaften des Anfragekörpers (Request Body) und deren Typisierung.

Das Problem

Lass uns gemeinsam das Problem erkunden, das wir lösen wollen. Schauen wir uns dazu den Code unseres Messeapplikations-Controllers an, speziell die Post-Route.

//...
@Controller("/exhibitions")
export class ExhibitionsController {
  // ...
  @Post()
  create(@Body() input) {
    return input;
  }
  // ...
}

Die input Property kann im Moment jede beliebige Eigenschaft haben oder sogar überhaupt keine. Das möchten wir natürlich ändern. Vielleicht handelt es sich um ein Array oder einen String.

Ein weiterer Grund ist, dass unsere Teammitglieder möglicherweise nicht genau wissen, welche Art von Eingabe sie erwarten können. Aus diesem Grund können wir eine Klasse erstellen, die als Data Transfer Object (DTO) bekannt ist. Oder genauer gesagt, dies wird der Typ der Klasse sein, die wir erstellen werden.

Der Code

Um dies umzusetzen, erstellen wir einfach eine neue Datei im src-Verzeichnis unserer App mit dem Namen create-exhibition.dto.ts. In dieser Datei definieren wir eine Klasse mit den Eigenschaften, die wir für die Eingabe erwarten.

export class CreateExhibitionDto {
  name: string;
  city: string;
  starts: Date;
  ends: Date;
}

Und verwenden Sie in unserem Controller wie folgt.

//...
import { CreateExhibitionDto } from "./create-exhibition.dto";
// ...
@Controller("/exhibitions")
export class ExhibitionsController {
  // ...
  @Post()
  create(@Body() input: CreateExhibitionDto) {
    return input;
  }
  // ...
}

Und das war es schon. Nun verfügst du, dein zukünftiges Ich und deine Teamkollegen über vollständige Typunterstützung für deinen Input-Parameter.

nestjs typunterstützung dank dto Objekt in visual studio code

Update Actions und Mapped Types

Bei Update Actions unterscheidet sich das Vorgehen etwas. Im Wesentlichen geht es darum, dass wir die Nutzer unserer APIs nicht dazu zwingen möchten, bei Aktualisierungen die Eigenschaften von Resourcen zu senden, die sich nicht geändert haben. Als ersten Schritt könnten wir einfach eine neue Datei mit einem neuen DTO erstellen und die Eigenschaften als optional setzen.

export class UpdatexhibitionDto {
  name?: string;
  city?: string;
  starts?: Date;
  ends?: Date;
}

Das funktioniert. Allerdings geht es mit Nest.js cleverer. Wir können das @nestjs/mapped-types-Paket verwenden. Dieses müssen wir installieren, bevor es uns dabei hilft, weniger Code zu schreiben.

npm i --save @nestjs/mapped-types

Dank dieses Paketes stehen dir nun äußerst nützliche Typen zur Verfügung. Anstatt den Code zu duplizieren und die Eigenschaften als optional zu kennzeichnen, ermöglicht es dir, folgendes zu tun.

import { PartialType } from "@nestjs/mapped-types";
import { CreateExhibitionDto } from "./create-exhibition.dto";

export class UpdateExhibitionDto extends PartialType(CreateExhibitionDto) {}

Da ist es! Das UpdateExhibitionDTO enthält nun alle Eigenschaften des CreateExhibitionDto, jedoch optional. Fast wie Magie, oder?

Die Anwendung im Exhibition Controller erfolgt genauso wie bei der create Methode.

export class UpdatexhibitionDto {
  name?: string;
  city?: string;
  starts?: Date;
  ends?: Date;
}

Fazit

  • DTO (Data Transfer Objekt) ist eine stilvolle Bezeichnung, um Eingabeeigenschaften und die zugehörigen Typen im Voraus zu definieren.
  • Diese Typisierung ist nicht nur für dich selbst, sondern auch für deine Teamkollegen äußerst nützlich. Praktisch entsteht eine Art Dokumentation im Code, wodurch das Risiko von Fehlern minimiert wird.

Das Mapping von Typen, insbesondere durch die clevere Verwendung von @nestjs/mapped-types, ermöglicht nicht nur eine effizientere Codeentwicklung, sondern sorgt auch für eine flexiblere Handhabung von Aktualisierungsaktionen. Durch diese Technik kannst du unnötige Datenübertragungen vermeiden und die Codebasis schlanker halten.

Zu Beginn mögen die fortgeschrittenen TypeScript-Konzepte von Nest.js etwas einschüchternd wirken, aber mit der Zeit werden sie zu einem selbstverständlichen Teil deines Repertoires. Beachte, dass TypeScript hervorragend dokumentiert ist, und du wirst schnell in der Lage sein, die Vorteile dieser leistungsstarken Werkzeuge voll auszuschöpfen. Keep coding with confidence!

0
0 Bewertungen

Jetzt selbst bewerten