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!