Éviter les appels dangereux dans les projets JavaScript et React avec ESLint

Éviter les appels dangereux dans les projets JavaScript et React avec ESLint

?✨ Dans les applications JavaScript et React modernes, il est courant de rencontrer des erreurs d'exécution causées par l'accès à des propriétés sur des valeurs non définies ou nulles, ou par l'appel de méthodes sur des tableaux ou des objets non définis. Ces problèmes peuvent perturber l’expérience utilisateur et faire du débogage un cauchemar. Dans cet article, nous identifierons les problèmes courants et fournirons une configuration ESLint pour les atténuer efficacement. ??

?✨ Dans nos projets React ou React Native, parce que nous n'utilisons pas TypeScript, nous oublions parfois d'écrire du code sécurisé. Ces codes dangereux peuvent entraîner de nombreux problèmes en production, comme le blocage des applications React Native, la frustration des utilisateurs et la complexité de la maintenance. Examinons ces problèmes courants et comment les résoudre. ???

Problèmes courants liés aux appels non sécurisés

1. Accéder aux propriétés sur undefined ou null ??✨

Problème:

L'accès à une propriété sur un objet non défini ou nul provoque une erreur d'exécution :

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

Solution:

• Solution 1 : Utiliser le chaînage facultatif (?.).

const name = user?.name;

• Solution 2 : Utilisez une solution de secours par défaut.

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

• Solution 3 :Assurer l'initialisation avant l'accès.

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

2. Méthodes d'appel sur undefined ou null ✋ ??

Problème:

L'appel de méthodes comme .map() ou .filter() sur un tableau non défini renvoie une erreur :

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

Solution:

• Solution 1 : Vérifiez que la variable est un tableau.

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

• Solution 2 : Fournissez un tableau par défaut.

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

• Solution 3 : Utilisez l'opérateur de coalescence nul (??).

const items = possibleItems ?? [];

3. Invoquer des fonctions non définies ⚙️⚠️ ?

Problème:

Essayer d'appeler une fonction qui pourrait être indéfinie :

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

Solution:

• Solution 1 : Vérifier l'existence avant l'invocation.

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

• Solution 2 : Attribuez une fonction par défaut sans opération.

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

4. Déstructuration d'objets non définis ou nuls ?❌?

Problème:

La déstructuration des propriétés d'un objet non défini entraîne une erreur :

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

Solution:

• Solution 1 : Utiliser le chaînage facultatif avec les valeurs par défaut.

const name = user?.name;

• Solution 2 :Valider avant déstructuration.

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

5. Accéder aux éléments du tableau inexistants ???

Problème:

L'accès aux éléments d'un tableau non défini provoque une erreur :

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

Solution:

• Solution 1 : Fournissez une solution de secours par défaut.

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

• Solution 2 : Initialisez correctement les tableaux.

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

6. Utilisation incorrecte d'un tableau/d'une fonction ??

Problème:

Utiliser des méthodes de tableau comme .map() ou .filter() sur des valeurs ou des objets non définis :

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

Solution:

• Solution 1 : Validez toujours les entrées pour les fonctions de tableau.

const items = possibleItems ?? [];

• Solution 2 : Renvoie un résultat sûr si l'entrée n'est pas valide.

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

7. Contrôles conditionnels insuffisants ??

Problème:

Ne pas valider strictement les conditions peut conduire à des bugs, comme s'appuyer sur des valeurs fausses. Par exemple, si les conditions attendant un booléen peuvent évaluer incorrectement d'autres types comme undéfini ou 0 :

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

Solution:

• Solution 1 : Utilisez des comparaisons d'égalité stricte.

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

• Solution 2 :Contraindre les valeurs explicitement en fonction du comportement prévu.

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

• Solution 3 : Définissez des conditions explicites dans votre code.

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

Utiliser ESLint pour éviter les appels dangereux ??✅

Pour résoudre ces problèmes pendant le développement, nous pouvons exploiter ESLint avec des règles spécifiques. Vous trouverez ci-dessous une configuration ESLint qui signalera les appels dangereux et suggérera des correctifs. ?️??

Configuration ESLint ???️

Ajoutez les règles suivantes à votre fichier de configuration .eslintrc.js ou ESLint :

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

Explication des règles ?⚙️?

1. @typescript-eslint/no-unnecessary-condition : signale les conditions inutiles ou les valeurs potentielles non définies ou nulles non gérées. ⚠️
2. no-unused-expressions : garantit que la logique court-circuitée comme someObject && someObject.doSomething est évitée sauf si cela est explicitement nécessaire. ?
3. @typescript-eslint/no-unsafe-call : empêche les appels de fonctions non sécurisés sur des non-fonctions. ❌
4. @typescript-eslint/no-unsafe-member-access : signale les tentatives d'accès aux propriétés sur des valeurs potentiellement non définies. ✋
5. consistent-return : applique des types de retour cohérents dans les fonctions pour éviter de renvoyer des valeurs non valides ou non définies. ?
6. @typescript-eslint/strict-boolean-expressions : renforce les expressions conditionnelles en empêchant la coercition implicite. ?
7. @typescript-eslint/no-non-null-assertion : Interdit les éléments dangereux ! opérateur utilisé pour contourner les vérifications nulles/indéfinies. ?

Installation des dépendances requises ???

Pour activer ces règles, assurez-vous d'avoir installé les plugins et analyseurs ESLint nécessaires :

const name = user?.name;

Intégration d'ESLint avec VSCode ?️??

1. Installez l'extension ESLint :

• Recherchez « ESLint » sur le marché VSCode et installez-le. ✨

2. Activer la correction automatique :

Ajoutez ce qui suit à votre settings.json :

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

3. Exécutez ESLint :

Ajoutez un script npm pour exécuter ESLint :

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

Ensuite, exécutez npm run lint pour détecter les problèmes. ?

Conclusion ???

En implémentant les règles et pratiques ESLint ci-dessus, vous pouvez intercepter et corriger les appels dangereux avant qu'ils ne deviennent des erreurs d'exécution. ?? Cette approche améliorera la fiabilité et la maintenabilité de vos projets JavaScript et React. ?⚙️✨

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!