Beste Praktiken für bedingte Logik in TypeScript

Dieser Artikel erklärt die besten Praktiken für bedingte Logik in TypeScript.

YouTube Video

Beste Praktiken für bedingte Logik in TypeScript

Eingrenzung von Typen mit Typwächtern

Durch die Nutzung des TypeScript-Typsystems und die Verwendung von Typwächtern innerhalb von if-Anweisungen können Sie die Typensicherheit und Lesbarkeit verbessern.

1function processInput(input: string | number) {
2    if (typeof input === "string") {
3        console.log(`String input: ${input.toUpperCase()}`);
4    } else {
5        console.log(`Number input: ${input.toFixed(2)}`);
6    }
7}

Die Verwendung von typeof und anderen Typwächtern stellt sicher, dass der Code innerhalb jedes Blocks typsicher und kontextbezogen relevant ist.

Vermeiden Sie verschachtelte if-Anweisungen

Tief verschachtelte if-Anweisungen verringern die Lesbarkeit und Wartbarkeit des Codes. Verwenden Sie stattdessen frühzeitige Rückgaben, logische Operatoren oder Auszugsfunktionen.

Schlechtes Beispiel:

1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2    if (user.age) {
3        if (user.age > 18) {
4            if (user.isAdmin) {
5                console.log("User is an adult admin.");
6            }
7        }
8    }
9}

Verbessertes Beispiel:

1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2    if (!user.age || user.age <= 18 || !user.isAdmin) {
3        return;
4    }
5    console.log("User is an adult admin.");
6}

Dieser Ansatz ebnet den Code und macht die Logik verständlicher.

Nutzen Sie optionale Verkettung

Beim Prüfen verschachtelter Eigenschaften verwenden Sie die optionale Verkettung (?.), um unnötige if-Bedingungen zu vermeiden.

Ohne optionale Verkettung:

1if (user && user.profile && user.profile.email) {
2    console.log(user.profile.email);
3}

Mit optionaler Verkettung:

1if (user?.profile?.email) {
2    console.log(user.profile.email);
3}

Dies reduziert Boilerplate-Code und verbessert die Lesbarkeit. Hier bezieht sich Boilerplate-Code auf wiederholten, standardisierten Code, der häufig erforderlich ist, um spezifische Aufgaben in der Programmierung zu erledigen.

Verwenden Sie strikte Gleichheitsoperatoren

TypeScript unterstützt strikte Typisierung, und die Verwendung von strikter Gleichheit (===) oder strikter Ungleichheit (!==) hilft, unerwartete Typumwandlungen zu vermeiden.

Schlechtes Beispiel:

1if (value == "123") {
2    console.log("Value is 123.");
3}

Verbessertes Beispiel:

1if (value === "123") {
2    console.log("Value is 123.");
3}

Verwenden Sie Enums oder Literaltypen für explizite Bedingungen

Die Verwendung von Enums oder Literaltypen verdeutlicht Bedingungen und verringert die Fehlerwahrscheinlichkeit.

 1type Status = "success" | "error" | "loading";
 2
 3function displayMessage(status: Status) {
 4    if (status === "success") {
 5        console.log("Operation succeeded.");
 6    } else if (status === "error") {
 7        console.log("Operation failed.");
 8    } else {
 9        console.log("Loading...");
10    }
11}

Durch die Definition erwarteter Werte kann TypeScript Typen erkennen und Genauigkeit gewährleisten.

Ähnliche Bedingungen zusammenfassen

Wenn mehrere Bedingungen dieselbe Logik teilen, konsolidieren Sie sie mithilfe von logischen Operatoren oder einer Switch-Anweisung.

Schlechtes Beispiel:

1if (role === "admin") {
2    grantAccess();
3}
4if (role === "superadmin") {
5    grantAccess();
6}

Verbessertes Beispiel:

1if (role === "admin" || role === "superadmin") {
2    grantAccess();
3}

Alternativ können Sie eine Switch-Anweisung verwenden, um mehrere klare Zweige zu behandeln:

 1switch (role) {
 2    case "admin":
 3    case "superadmin":
 4        grantAccess();
 5        break;
 6    case "user":
 7        console.log("Limited access.");
 8        break;
 9    default:
10        console.log("No access.");
11}

Vermeiden Sie es, Bedingungsausdrücke komplex zu gestalten

Komplexe Bedingungsausdrücke in If-Anweisungen verringern die Lesbarkeit. Extrahieren Sie sie in sinnvolle Variablen oder Funktionen.

Schlechtes Beispiel:

1if (user.age > 18 && user.isAdmin && user.permissions.includes("write")) {
2    console.log("User can write.");
3}

Verbessertes Beispiel:

1const isAdultAdminWithWriteAccess = user.age > 18 && user.isAdmin && user.permissions.includes("write");
2if (isAdultAdminWithWriteAccess) {
3    console.log("User can write.");
4}

Das Benennen der Bedingungen verbessert die Klarheit und macht den Code selbstdokumentierend.

Verwenden Sie ternäre Operatoren für einfache Bedingungen

Für einfache Bedingungen macht die Verwendung von ternären Operatoren den Code kompakt.

Beispiel:

1const message = isLoggedIn ? "Welcome back!" : "Please log in.";
2console.log(message);

Vermeiden Sie jedoch die Verwendung von ternären Operatoren für komplexe Bedingungen, da dies die Lesbarkeit verringert.

Fazit

Indem Sie diese Best Practices befolgen, können Sie If-Anweisungen in TypeScript klar, effizient und wartbar gestalten. Nutzen Sie TypeScript-Funktionen wie Type Guards, Optional Chaining und Enums, um die Lesbarkeit und Robustheit Ihres Codes zu verbessern. Halten Sie Bedingungen prägnant und klar, und streben Sie nach Code, der immer leicht zu verstehen und zu warten ist.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video