JavaScript- und TypeScript-Entwickler stellen oft fest, dass sie immer wieder dieselben Bedingungen schreiben. Wenn Sie ein Webentwickler sind, sind Sie wahrscheinlich auf Code wie diesen gestoßen:

const handleSaveTextKeydown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
    //... save text
   }
}

In diesem Fall ist event.key vom Typ string und es ist leicht, Fehler einzuführen, indem beispielsweise versehentlich ein Leerzeichen in „Enter“ eingefügt wird.

Warum diese Bedingung nicht in einer Funktion kapseln?

const handleSaveTextKeydown = (event: KeyboardEvent) => {
   if (checkIsEnterKey(event.key)) {
    //... save text
   }
}

Dadurch wird sichergestellt, dass alle Prüfungen für die Eingabetaste konsistent und zuverlässig sind.

Bedenken Sie nun diese Validierung:

type Value = null | object;

const value = {} as Value;

if (typeof value === 'object') {
  value; // value type is null | object
}

Obwohl TypeScript intelligent ist, bleibt der Wert innerhalb der Bedingung vom Typ Value. Dies liegt daran, dass typeof null „object“ zurückgibt.

Sie müssen also schreiben:

if (value !== null && typeof value === 'object') {
  value; // value type is object
}

Viele Entwickler kapseln dies möglicherweise nicht in eine Funktion und schreiben es stattdessen wiederholt, wenn sie auf diese Situation stoßen.

Wie oft haben Sie in Ihrem Leben über denselben Zustand geschrieben?

Wie oft haben Sie denselben Fehler gemacht?

Wie oft werden Sie die gleiche Bedingung in Zukunft noch schreiben?

Wenn ich es wäre, würde ich Folgendes tun:

if (checkIsObject(value)) {
  value; // value type is object
}

Die Kapselung generischer Bedingungen in Funktionen bietet viele Vorteile.

Betrachten Sie das folgende Beispiel:

const array = [0, 1, 2, 3, 4, 5, null, undefined];

Lassen Sie uns ein Array erstellen, das nur Nullwerte ausschließt.

Sie könnten der Kürze Priorität einräumen und es so schreiben:

const numbers = array.filter(Boolean);

Leider ist das nicht ideal. 0 wird ebenfalls als falsch ausgewertet und ausgeschlossen. Sie müssen also schreiben:

const numbers = array.filter(item => item !== null && item !== undefined);

Fühlt sich das nicht wie hässlicher, nicht wiederverwendbarer Code an?

Ich kann eleganteren Code schreiben:

const numbers = array.filter(checkIsNullish);

Hören Sie auf, wiederholt generische Bedingungen zu schreiben. Es führt nur zu Fehlern und der Code wird schlechter lesbar.

Lassen Sie mich eine von mir erstellte Bibliothek namens checker vorstellen.

Diese Hilfsfunktionsbibliothek stellt häufig verwendete Bedingungen in der allgemeinen Webentwicklung und der Low-Level-Entwicklung als Funktionen dar. Alle Funktionen nehmen eine Eingabe entgegen und geben einen booleschen Wert zurück.

Zum Zeitpunkt des Schreibens dieses Artikels bietet es eine Fülle von Funktionen zur Verarbeitung von Datentypen wie Zeichenfolgen, Zahlen, booleschen Werten und Nullwerten. Alle Funktionen sind getestet, dokumentiert und einfach zu verwenden.

Sehen wir uns einige Beispiele aus der Praxis an.

Die von dieser Bibliothek bereitgestellten Pakete werden alle auf JSR veröffentlicht. Sie können problemlos in NPM-, PNPM-, Yarn-, Bun- und Deno-Projekten installiert werden.

Hier nehmen wir das @checker/string-Paket als Beispiel mit NPM.

1. Paket installieren

Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus:

  npx jsr add @checker/string

1. Verwendung der Funktionen

  import { checkIsNotEmptyString, checkIsIndexFound } from "@checker/string";

  const value = "Hello";

  const formatted = value.trim();

  if (checkIsNotEmptyString(formatted)) {
    // formatted !== ''
    // When formatted is not an empty string
  }

  const index = value.indexOf("el");

  if (checkIsIndexFound(index)) {
    // index !== -1
    // When "el" is found in value
  }

Ich verwende keine logischen Negationsoperatoren wie !SOME_CONDITION, um einen booleschen Wert umzukehren. Dies liegt daran, dass es implizit ist und das einfache Umkehren des booleschen Werts durch Hinzufügen oder Weglassen zu vielen gefährlichen Situationen führen kann.

Daher sind für alle Funktionen entsprechende checkIsNot~-Funktionen definiert.

Generische Bedingungen in Funktionen kapseln. Auf diese Weise wird der Code besser lesbar und Fehler lassen sich leichter erkennen.

Vielen Dank fürs Lesen.