Vermeiden unsicherer Aufrufe in JavaScript- und React-Projekten mit ESLint

Vermeiden unsicherer Aufrufe in JavaScript- und React-Projekten mit ESLint

?✨ In modernen JavaScript- und React-Anwendungen kommt es häufig zu Laufzeitfehlern, die durch den Zugriff auf Eigenschaften für undefinierte oder Nullwerte oder den Aufruf von Methoden für undefinierte Arrays oder Objekte verursacht werden. Diese Probleme können die Benutzererfahrung beeinträchtigen und das Debuggen zu einem Albtraum machen. In diesem Artikel identifizieren wir die häufigsten Probleme und stellen eine ESLint-Konfiguration bereit, um diese effektiv zu entschärfen. ??

?✨ Da wir in unseren React- oder React Native-Projekten kein TypeScript verwenden, vergessen wir manchmal, sicheren Code zu schreiben. Diese unsicheren Codes können zu vielen Problemen in der Produktion führen, wie zum Beispiel zum Absturz von React Native-Apps, zur Frustration der Benutzer und zu einer komplizierten Wartung. Schauen wir uns diese häufigen Probleme an und wie man sie löst. ???

Häufige Probleme mit unsicheren Anrufen

1. Zugreifen auf Eigenschaften bei undefiniert oder null ???✨

Problem:

Der Zugriff auf eine Eigenschaft eines Objekts, das undefiniert oder null ist, führt zu einem Laufzeitfehler:

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

Lösung:

• Lösung 1: Verwenden Sie optionale Verkettung (?.).

const name = user?.name;

• Lösung 2: Nutzen Sie einen Standard-Fallback.

const name = user ? user.name : 'Default Name';

• Lösung 3: Stellen Sie vor dem Zugriff die Initialisierung sicher.

const user = { name: 'Default Name' };

2. Aufrufen von Methoden für undefiniert oder null ✋??

Problem:

Der Aufruf von Methoden wie .map() oder .filter() für ein undefiniertes Array löst einen Fehler aus:

const items = undefined;
items.map((item) => console.log(item)); // ❌ Runtime Error: Cannot read property 'map' of undefined

Lösung:

• Lösung 1: Stellen Sie sicher, dass die Variable ein Array ist.

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

• Lösung 2: Stellen Sie ein Standardarray bereit.

const items = someValue || [];
items.map(item => console.log(item));

• Lösung 3: Verwenden Sie den nullischen Koaleszenzoperator (??).

const items = possibleItems ?? [];

3. Undefinierte Funktionen aufrufen ⚙️⚠️?

Problem:

Es wird versucht, eine Funktion aufzurufen, die möglicherweise undefiniert ist:

const handler = undefined;
handler(); // ❌ Runtime Error: handler is not a function

Lösung:

• Lösung 1: Überprüfen Sie die Existenz vor dem Aufruf.

if (typeof handler === 'function') {
  handler();
}

• Lösung 2: Weisen Sie eine No-Op-Standardfunktion zu.

const handler = passedHandler || (() => {});

4. Destrukturierung undefinierter oder Nullobjekte ?❌?

Problem:

Das Destrukturieren von Eigenschaften eines undefinierten Objekts führt zu einem Fehler:

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

Lösung:

• Lösung 1: Verwenden Sie optionale Verkettung mit Standardwerten.

const name = user?.name;

• Lösung 2: Vor der Destrukturierung validieren.

const name = user ? user.name : 'Default Name';

5. Zugriff auf nicht vorhandene Array-Elemente ???

Problem:

Der Zugriff auf Elemente eines undefinierten Arrays führt zu einem Fehler:

const user = { name: 'Default Name' };

Lösung:

• Lösung 1: Stellen Sie einen Standard-Fallback bereit.

const items = undefined;
items.map((item) => console.log(item)); // ❌ Runtime Error: Cannot read property 'map' of undefined

• Lösung 2: Arrays ordnungsgemäß initialisieren.

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

6. Ungültige Array-/Funktionsverwendung??

Problem:

Verwendung von Array-Methoden wie .map() oder .filter() für undefinierte Werte oder Objekte:

const items = someValue || [];
items.map(item => console.log(item));

Lösung:

• Lösung 1: Validieren Sie immer Eingaben für Array-Funktionen.

const items = possibleItems ?? [];

• Lösung 2: Ein sicheres Ergebnis zurückgeben, wenn die Eingabe ungültig ist.

const handler = undefined;
handler(); // ❌ Runtime Error: handler is not a function

7. Unzureichende bedingte Prüfungen?

Problem:

Wenn Bedingungen nicht strikt validiert werden, kann dies zu Fehlern führen, z. B. indem man sich auf falsche Werte verlässt. Wenn beispielsweise Bedingungen, die einen booleschen Wert erwarten, andere Typen wie undefiniert oder 0:
falsch auswerten könnten

if (typeof handler === 'function') {
  handler();
}

Lösung:

• Lösung 1: Verwenden Sie strikte Gleichheitsvergleiche.

const handler = passedHandler || (() => {});

• Lösung 2: Werte explizit für beabsichtigtes Verhalten erzwingen.

const obj = undefined;
const { name } = obj; // ❌ Runtime Error: Cannot destructure property 'name' of undefined

• Lösung 3: Definieren Sie explizite Bedingungen in Ihrem Code.

const { name = 'Default Name' } = user || {};

Verwenden von ESLint zur Vermeidung unsicherer Anrufe ???

Um diese Probleme während der Entwicklung zu erkennen, können wir ESLint mit spezifischen Regeln nutzen. Nachfolgend finden Sie eine ESLint-Konfiguration, die unsichere Aufrufe kennzeichnet und Korrekturen vorschlägt. ?️??

ESLint-Konfiguration ???️

Fügen Sie die folgenden Regeln zu Ihrer .eslintrc.js- oder ESLint-Konfigurationsdatei hinzu:

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

Erläuterung der Regeln ?⚙️?

1. @typescript-eslint/no-unnecessary-condition: Kennzeichnet unnötige Bedingungen oder nicht behandelte potenziell undefinierte oder Nullwerte. ⚠️
2. no-unused-expressions: Stellt sicher, dass kurzgeschlossene Logik wie someObject && someObject.doSomething vermieden wird, sofern nicht ausdrücklich erforderlich. ?
3. @typescript-eslint/no-unsafe-call: Verhindert unsichere Funktionsaufrufe für Nichtfunktionen. ❌
4. @typescript-eslint/no-unsafe-member-access: Kennzeichnet Versuche, auf Eigenschaften potenziell undefinierter Werte zuzugreifen. ✋
5. consistent-return: Erzwingt konsistente Rückgabetypen in Funktionen, um die Rückgabe ungültiger oder undefinierter Werte zu vermeiden. ?
6. @typescript-eslint/strict-boolean-expressions: Stärkt bedingte Ausdrücke durch Verhinderung impliziter Zwänge. ?
7. @typescript-eslint/no-non-null-assertion: Verbietet das Unsichere! Operator zum Umgehen von Null-/Undefiniert-Prüfungen. ?

Erforderliche Abhängigkeiten installieren???

Um diese Regeln zu aktivieren, stellen Sie sicher, dass Sie die erforderlichen ESLint-Plugins und Parser installiert haben:

const name = user?.name;

ESLint mit VSCode integrieren ?️??

1. Installieren Sie die ESLint-Erweiterung:

• Suchen Sie im VSCode-Marktplatz nach „ESLint“ und installieren Sie es. ✨

2. Automatische Korrektur aktivieren:

Fügen Sie Folgendes zu Ihrer Settings.json hinzu:

const name = user ? user.name : 'Default Name';

3. Führen Sie ESLint aus:

Fügen Sie ein NPM-Skript hinzu, um ESLint auszuführen:

const user = { name: 'Default Name' };

Führen Sie dann npm run lint aus, um Probleme zu erkennen. ?

Abschluss ???

Durch die Implementierung der oben genannten ESLint-Regeln und -Praktiken können Sie unsichere Aufrufe abfangen und beheben, bevor sie zu Laufzeitfehlern werden. ?? Dieser Ansatz verbessert die Zuverlässigkeit und Wartbarkeit Ihrer JavaScript- und React-Projekte. ?⚙️✨

Das obige ist der detaillierte Inhalt vonVermeiden unsicherer Aufrufe in JavaScript- und React-Projekten mit ESLint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!