使用 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中文網其他相關文章！