使用 ESLint 避免 JavaScript 和 React 项目中的不安全调用

使用 ESLint 避免 JavaScript 和 React 项目中的不安全调用

?✨ 在现代 JavaScript 和 React 应用程序中，经常会遇到由于访问未定义或空值的属性，或调用未定义的数组或对象的方法而导致的运行时错误。这些问题可能会破坏用户体验并使调试成为一场噩梦。在本文中，我们将识别常见问题并提供 ESLint 配置来有效缓解这些问题。 ??

？✨ 在我们的 React 或 React Native 项目中，因为我们不使用 TypeScript，所以有时我们会忘记编写安全代码。这些不安全的代码可能会导致生产中的许多问题，例如 React Native 应用程序崩溃、让用户感到沮丧以及使维护复杂化。让我们深入探讨这些常见问题以及如何解决它们。 ???

不安全通话的常见问题

1. 访问未定义或 null 的属性??✨

问题：

访问未定义或 null 的对象上的属性会导致运行时错误：

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

解决方案：

• 解决方案 1： 使用可选链 (?.)。

const name = user?.name;

• 解决方案 2： 采用默认后备。

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

• 解决方案3：确保访问前初始化。

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

2. 在未定义或 null 上调用方法 ✋??

问题：

在未定义的数组上调用 .map() 或 .filter() 等方法会引发错误：

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

解决方案：

• 解决方案 1： 验证变量是否为数组。

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

• 解决方案2：提供默认数组。

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

• 解决方案 3： 使用空合并运算符 (??)。

const items = possibleItems ?? [];

3. 调用未定义的函数⚙️⚠️？

问题：

尝试调用可能未定义的函数：

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

解决方案：

• 解决方案1：在调用之前检查是否存在。

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

• 解决方案 2： 分配一个无操作默认函数。

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

4. 解构未定义或空对象？❌？

问题：

从未定义的对象解构属性会导致错误：

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

解决方案：

• 解决方案 1： 使用默认值的可选链。

const name = user?.name;

• 解决方案 2： 在解构之前进行验证。

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

5. 访问不存在的数组元素???

问题：

访问未定义数组的元素会导致错误：

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

解决方案：

• 解决方案 1： 提供默认后备。

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

• 解决方案2：正确初始化数组。

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

6. 无效数组/函数使用 ??

问题：

对未定义的值或对象使用 .map() 或 .filter() 等数组方法：

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

解决方案：

• 解决方案 1： 始终验证数组函数的输入。

const items = possibleItems ?? [];

• 解决方案 2： 如果输入无效，则返回安全结果。

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

7. 条件检查不充分??

问题：

未能严格验证条件可能会导致错误，例如依赖虚假值。例如，如果期望布尔值的条件可能会错误地评估其他类型，例如未定义或0：

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

解决方案：

• 解决方案 1： 使用严格相等比较。

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

• 解决方案 2： 显式强制值以实现预期行为。

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

• 解决方案 3： 在代码中定义显式条件。

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

---

使用 ESLint 避免不安全调用 ??✅

为了在开发过程中捕获这些问题，我们可以利用具有特定规则的 ESLint。下面是一个 ESLint 配置，它将标记不安全的调用并建议修复。 ??️??

ESLint 配置???️

将以下规则添加到您的 .eslintrc.js 或 ESLint 配置文件中：

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

规则说明？⚙️？

1. @typescript-eslint/no-unnecessary-condition：标记不必要的条件或未处理的潜在未定义或空值。 ⚠️
2. no-unused-expressions：确保避免像 someObject && someObject.doSomething 这样的短路逻辑，除非明确需要。 ？
3. @typescript-eslint/no-unsafe-call：防止对非函数进行不安全的函数调用。 ❌
4. @typescript-eslint/no-unsafe-member-access：标记尝试访问潜在未定义值的属性。 ✋
5. consistent-return：在函数中强制执行一致的返回类型，以避免返回无效或未定义的值。 ？
6. @typescript-eslint/strict-boolean-expressions：通过防止隐式强制转换来增强条件表达式。 ？
7. @typescript-eslint/no-non-null-assertion：不允许不安全！运算符用于绕过空/未定义检查。 ？

---

安装所需的依赖项？？？

要启用这些规则，请确保您安装了必要的 ESLint 插件和解析器：

const name = user?.name;

---

将 ESLint 与 VSCode 集成??️??

1. 安装 ESLint 扩展：

• 在 VSCode 市场中搜索“ESLint”并安装。 ✨

2. 启用自动修复：

将以下内容添加到您的settings.json：

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

3. 运行 ESLint：

添加 npm 脚本来运行 ESLint：

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

然后，运行 npm run lint 来捕获问题。 ？

---

结论 ？？？

通过实现上述 ESLint 规则和实践，您可以在不安全调用变成运行时错误之前捕获并修复它们。 ??这种方法将提高 JavaScript 和 React 项目的可靠性和可维护性。 ⚙️✨

---

以上是使用 ESLint 避免 JavaScript 和 React 项目中的不安全调用的详细内容。更多信息请关注PHP中文网其他相关文章！