Maison >interface Web >js tutoriel >É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. ???
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
const name = user?.name;
const name = user ? user.name : 'Default Name';
const user = { name: 'Default Name' };
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
if (Array.isArray(items)) { items.map(item => console.log(item)); }
const items = someValue || []; items.map(item => console.log(item));
const items = possibleItems ?? [];
Essayer d'appeler une fonction qui pourrait être indéfinie :
const handler = undefined; handler(); // ❌ Runtime Error: handler is not a function
if (typeof handler === 'function') { handler(); }
const handler = passedHandler || (() => {});
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
const name = user?.name;
const name = user ? user.name : 'Default Name';
L'accès aux éléments d'un tableau non défini provoque une erreur :
const user = { name: 'Default Name' };
const items = undefined; items.map((item) => console.log(item)); // ❌ Runtime Error: Cannot read property 'map' of undefined
if (Array.isArray(items)) { items.map(item => console.log(item)); }
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));
const items = possibleItems ?? [];
const handler = undefined; handler(); // ❌ Runtime Error: handler is not a function
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(); }
const handler = passedHandler || (() => {});
const obj = undefined; const { name } = obj; // ❌ Runtime Error: Cannot destructure property 'name' of undefined
const { name = 'Default Name' } = user || {};
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. ?️??
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
Pour activer ces règles, assurez-vous d'avoir installé les plugins et analyseurs ESLint nécessaires :
const name = user?.name;
Ajoutez ce qui suit à votre settings.json :
const name = user ? user.name : 'Default Name';
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. ?
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!