✨ Anzeigenideen in TypeScript

Ich liebe ❤️ TypeScript.

Besonders nach dem berüchtigten JavaScript-Fehler „Kann nicht auf den Wert undefinierter Werte zugreifen“.

Aber auch wenn TypeScript großartig ist, gibt es immer noch Möglichkeiten, sich selbst ins Bein zu schießen.

In diesem Beitrag teile ich 5 schlechte Praktiken in TypeScript und wie man sie vermeidet.

? Laden Sie mein KOSTENLOSES Buch mit 101 React-Tipps und Tricks herunter, um einen Vorsprung zu haben.

1. Fehler als Typ Beliebig deklarieren

Beispiel

Im folgenden Codeausschnitt fangen wir den Fehler ab und deklarieren ihn dann als Typ „beliebig“.

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err: any) {
    toast(`Failed to do something: ${err.message}`);
  }
}

Warum es schlecht ist ❌

Es gibt keine Garantie dafür, dass der Fehler ein Nachrichtenfeld vom Typ Zeichenfolge enthält.

Leider lässt uns der Code aufgrund der Typzusicherung davon ausgehen, dass dies der Fall ist.

Der Code kann in der Entwicklung mit bestimmten Testfällen funktionieren, kann aber in der Produktion stark kaputt gehen.

Was stattdessen tun ✅

Legen Sie nicht die Art des Fehlers fest. Es sollte standardmäßig unbekannt sein.

Stattdessen können Sie einen der folgenden Schritte ausführen:

• Option 1: Überprüfen Sie mit einem Typschutz, ob der Fehler vom richtigen Typ ist.

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err) {
    const toastMessage = hasMessage(err)
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;
    toast(toastMessage);
  }
}

// We use a type guard to check first
function hasMessage(value: unknown): value is { message: string } {
  return (
    value != null &&
    typeof value === "object" &&
    "message" in value &&
    typeof value.message === "string"
  );
}

// You can also simply check if the error is an instance of Error
const toastMessage = err instanceof Error
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;

• Option 2 (empfohlen):Machen Sie keine Annahmen über den Fehler

Anstatt Annahmen über den Fehlertyp zu treffen, behandeln Sie jeden Typ explizit und geben Sie dem Benutzer entsprechendes Feedback.

Wenn Sie den spezifischen Fehlertyp nicht bestimmen können, ist es besser, vollständige Fehlerinformationen anzuzeigen statt Teildetails.

Weitere Informationen zur Fehlerbehandlung finden Sie in dieser hervorragenden Anleitung: Bessere Fehlermeldungen schreiben.

2. Funktionen mit mehreren aufeinanderfolgenden Parametern desselben Typs haben

Beispiel

export function greet(
  firstName: string,
  lastName: string,
  city: string,
  email: string
) {
  // Do something...
}

Warum es schlecht ist ❌

• Sie können Parameter versehentlich in der falschen Reihenfolge übergeben:

// We inverted firstName and lastName, but TypeScript won't catch this
greet("Curry", "Stephen", "LA", "stephen.curry@gmail.com")

• Es ist schwieriger zu verstehen, was die einzelnen Parameter darstellen, insbesondere bei Codeüberprüfungen, wenn der Funktionsaufruf vor seiner Deklaration angezeigt wird

Was stattdessen zu tun ist ✅

Verwenden Sie einen Objektparameter, um den Zweck jedes Feldes zu verdeutlichen und das Risiko von Fehlern zu minimieren.

export function greet(params: {
  firstName: string;
  lastName: string;
  city: string;
  email: string;
}) {
  // Do something...
}

3. Eine Funktion mit mehreren Zweigen und keinem Rückgabetyp haben

Beispiel

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err: any) {
    toast(`Failed to do something: ${err.message}`);
  }
}

Warum es schlecht ist ❌

• Das Hinzufügen eines neuen Tiertyps könnte dazu führen, dass ein falsch strukturiertes Objekt zurückgegeben wird.

• Änderungen an der Rückgabetypstruktur können zu schwer nachvollziehbaren Problemen in anderen Teilen des Codes führen.

• Tippfehler können dazu führen, dass auf falsche Typen geschlossen wird.

Was stattdessen zu tun ist ✅

Geben Sie explizit den Rückgabetyp der Funktion an:

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err) {
    const toastMessage = hasMessage(err)
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;
    toast(toastMessage);
  }
}

// We use a type guard to check first
function hasMessage(value: unknown): value is { message: string } {
  return (
    value != null &&
    typeof value === "object" &&
    "message" in value &&
    typeof value.message === "string"
  );
}

// You can also simply check if the error is an instance of Error
const toastMessage = err instanceof Error
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;

4. Hinzufügen unnötiger Typen anstelle der Verwendung optionaler Felder

Beispiel

export function greet(
  firstName: string,
  lastName: string,
  city: string,
  email: string
) {
  // Do something...
}

Warum es schlecht ist ❌

• Nicht skalierbar: Das Hinzufügen neuer Felder erfordert die Erstellung mehrerer neuer Typen

• Macht die Typprüfung komplexer und erfordert zusätzliche Typwächter

• Führt zu verwirrenden Typnamen und schwierigerer Wartung

Was stattdessen zu tun ist ✅

Verwenden Sie optionale Felder, um Ihre Typen einfach und wartbar zu halten:

// We inverted firstName and lastName, but TypeScript won't catch this
greet("Curry", "Stephen", "LA", "stephen.curry@gmail.com")

5. Eigenschaften auf verschiedenen Komponentenebenen optional machen

Beispiel

Die deaktivierte Requisite ist in allen Komponenten optional.

export function greet(params: {
  firstName: string;
  lastName: string;
  city: string;
  email: string;
}) {
  // Do something...
}

Warum es schlecht ist ❌

• Man vergisst leicht, die deaktivierte Requisite weiterzugeben, was zu teilweise aktivierten Formularen führt

Was stattdessen zu tun ist ✅

Machen Sie die gemeinsamen Felder erforderlich für interne Komponenten.

Dadurch wird sichergestellt, dass die Requisiten ordnungsgemäß weitergegeben werden. Dies ist besonders wichtig für Komponenten auf niedrigerer Ebene, um etwaige Versäumnisse frühzeitig zu erkennen.

Im obigen Beispiel ist nun die Deaktivierung in allen internen Komponenten erforderlich.

function getAnimalDetails(animalType: "dog" | "cat" | "cow") {
  switch (animalType) {
    case "dog":
      return { name: "Dog", sound: "Woof" };
    case "cat":
      return { name: "Cat", sound: "Meow" };
    case "cow":
      return { name: "Cow", sound: "Moo" };
    default:
      // This ensures TypeScript catches unhandled cases
      ((_: never) => {})(animalType);
  }
}

Hinweis: Ich empfehle dies nicht, wenn Sie Komponenten für eine Bibliothek entwerfen, da erforderliche Felder mehr Arbeit erfordern.

Zusammenfassung

TypeScript ist großartig, aber kein Tool ?️ ist perfekt.

Wenn Sie diese 5 Fehler vermeiden, können Sie saubereren, sichereren und wartbareren Code schreiben.

Weitere Tipps finden Sie in meinem kostenlosen E-Book 101 React Tips & Tricks.

? ERKENNEN SIE DEN FEHLER

? TIPP DER WOCHE

Das ist Schluss?.

<script> // Detect dark theme var iframe = document.getElementById('tweet-1869351983934738523-882'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1869351983934738523&theme=dark" } </script>Einen Kommentar hinterlassen? um einen Tippfehler zu teilen, den Sie gemacht haben.<script> // Detect dark theme var iframe = document.getElementById('tweet-1869050042931449902-927'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1869050042931449902&theme=dark" } </script>

Und vergessen Sie nicht, ein „???“ zu hinterlassen.

Wenn Sie React lernen, laden Sie mein Buch „101 React Tips & Tricks“ KOSTENLOS herunter.

Wenn Ihnen Artikel wie dieser gefallen, abonnieren Sie meinen KOSTENLOSEN Newsletter, FrontendJoy.

Wenn Sie tägliche Tipps wünschen, finden Sie mich auf X/Twitter oder auf Bluesky.

Das obige ist der detaillierte Inhalt von✨ Anzeigenideen in TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!