Articles
TypeScript 簡介
TypeScript 中的錯誤處理

TypeScript 中的錯誤處理

本文說明了在 TypeScript 中的錯誤處理方法。

YouTube Video

TypeScript 中的錯誤處理

與 JavaScript 一樣，TypeScript 的錯誤處理主要通過 try...catch 結構完成。在 TypeScript 中，可以通過類型推斷更清晰地管理錯誤內容。這使得錯誤處理更加精確且易於閱讀。

try...catch 語法

錯誤處理的基本語法如下：。

 1try {
 2    // Code that may throw an error
 3    throw new Error("Something went wrong!");
 4} catch (error) {
 5    // Catch and handle the error
 6    console.error("Error:", error);
 7} finally {
 8    // Code that runs regardless of whether an error occurred
 9    console.log("Finally block executed.");
10}

類型安全的錯誤處理

在 TypeScript 中，catch 區塊內捕獲的錯誤被視為 any 類型，但建議指定適當的類型以實現更安全的錯誤處理。例如，您可以定義並使用自訂的錯誤類型，如下所示：。

 1class CustomError extends Error {
 2    constructor(message: string, public errorCode: number) {
 3        super(message);
 4        this.name = "CustomError";
 5    }
 6}
 7
 8try {
 9    throw new CustomError("Invalid operation", 400);
10} catch (error) {
11    if (error instanceof CustomError) {
12        console.error(`Error: ${error.message}, Code: ${error.errorCode}`);
13    } else {
14        console.error("Unknown error occurred");
15    }
16}

在此範例中，建立了一個名為 CustomError 的類別，並拋出了帶有像是 errorCode 等自訂屬性的錯誤。在 catch 區塊中，使用 instanceof 判斷錯誤的類型並進行適當的處理。

非同步錯誤處理

在 TypeScript 中，使用非同步函數時也可以用 try...catch 來處理錯誤。

 1async function fetchData() {
 2    try {
 3        const response = await fetch("https://api.example.com/data");
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Failed to fetch data:", error);
11    }
12}
13
14fetchData();

在這個範例中，使用 fetch 獲取數據，並檢查 response.ok，如果狀態碼不是 OK，則拋出錯誤。錯誤在 catch 中被捕獲，並輸出適當的日誌。

總結

在 TypeScript 中，使用類型來明確錯誤內容使得錯誤處理更安全且更具可讀性。在處理錯誤時，明確可能出現的錯誤類型並據此進行處理是很重要的。

錯誤

TypeScript 中的 Error 類繼承自 JavaScript 的 Error 類，是用於表示錯誤的基本對象。通過使用 Error 類，您可以創建一個包含錯誤訊息的對象並進行錯誤處理。

Error 類的基本用法

Error 類的使用方法如下。

1const error = new Error("Something went wrong!");
2console.log(error.message); // "Something went wrong!"
3console.log(error.name);    // "Error"

屬性

Error 類別具有以下屬性：。

  • message 代表錯誤訊息的字串。
  • name 錯誤的名稱。預設為 "Error"，但可以透過建立自定義錯誤類別進行更改。
  • stack 用於除錯的堆疊追蹤資訊。一個字串，指出發生錯誤時是由哪段程式碼引起的。

自定義錯誤類別

也可以擴展 Error 類別並建立自己的錯誤類別。這在需要特定錯誤處理的情況下非常有用。例如，當您需要處理不同類型的錯誤，例如 HTTP 請求錯誤或資料庫錯誤時，非常有效。

建立自定義錯誤的範例 

 1class CustomError extends Error {
 2    constructor(message: string, public errorCode: number) {
 3        super(message); // Call the constructor of the parent class 'Error'
 4        this.name = "CustomError"; // Set the name of the error
 5    }
 6}
 7
 8const customError = new CustomError("Invalid operation", 400);
 9console.log(customError.message);   // "Invalid operation"
10console.log(customError.name);      // "CustomError"
11console.log(customError.errorCode); // 400
  • 通過建立 CustomError 類別並加入錯誤代碼等資訊，可以管理更全面的錯誤資訊。

Error 類別的繼承

在 TypeScript 中，透過擴展 Error 類別建立自定義錯誤類別時，有幾點需要注意。

  1. 呼叫 super() 在自訂錯誤類別的建構子中，必須呼叫 super() 來執行 Error 類別的建構子。這確保了 message 和 stack 屬性能正確初始化。

  2. 新增屬性 如果你想在錯誤物件中加入額外資訊，可以在類別中定義新的屬性。例如，在上述的 CustomError 中，新增了一個 errorCode 屬性。

拋出與捕獲錯誤

你可以透過使用 Error 類別或自訂錯誤類別丟出錯誤，再透過捕捉來處理這些錯誤。

 1function riskyOperation() {
 2    throw new Error("Something went wrong during the operation");
 3}
 4
 5try {
 6    riskyOperation();
 7} catch (error) {
 8    if (error instanceof Error) {
 9        console.error(error.message);  // "Something went wrong during the operation"
10        console.error(error.name);     // "Error"
11    }
12}

在自定義錯誤的情況下，也可以使用 instanceof 來識別特定錯誤並進行適當處理。

 1class CustomError extends Error {
 2    constructor(message: string, public errorCode: number) {
 3        super(message);
 4        this.name = "CustomError";
 5    }
 6}
 7
 8try {
 9    throw new CustomError("Database connection failed", 500);
10} catch (error) {
11    if (error instanceof CustomError) {
12        console.error(`Error: ${error.message}, Code: ${error.errorCode}`);
13    }
14}

總結

在 TypeScript 中，Error 類別是執行標準錯誤處理的基本類別。此外，通過擴展 Error 類別以建立自定義錯誤，可以根據錯誤類型和額外資訊實現靈活的錯誤處理。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

TypeScript 裡的裝飾器TypeScript 中的 Promise 類別