iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
Modern Web

TypeScript 啟動!系列 第 17

[Day 17] TypeScript 處理錯誤

  • 分享至 

  • xImage
  •  

在專案開發中,發生錯誤資訊是稀鬆平常的,但是管理這些錯誤則是確保專案運行穩定度的關鍵部分。而 TypeScript 提供一些方法來處理淺在的錯誤情境,這一篇文章將會從最簡單的 null 值到使用 Option 型別來解釋錯誤管理的用法。

1. 回傳 null

在 JavaScript 和 TypeScript 中,當函式無法回傳有效值時,最基礎的策略是回傳 null

typescriptCopy code
function findUserById(id: number): User | null {
    const user = database.getUser(id);
    if (user) {
        return user;
    }
    return null;
}

**優點:**簡單且易於理解。

**缺點:**可能忘記檢查 null,這可能會導致運行時的錯誤,或是其他錯誤資訊~

2. 擲出例外

為了解決忘記檢查 null 的問題,我們可以使用 throw 來拋出錯誤。

typescriptCopy code
function findUserById(id: number): User {
    const user = database.getUser(id);
    if (user) {
        return user;
    }
    throw new Error(`User with ID ${id} not found!`);
}

**優點:**強制進入處理錯誤情境。

**缺點:**建立了異常流程,但可能使流程難以追踪。(假設建立很多一樣的情境就不知道錯誤在哪裡了)。

3. Option 型別

在某些程式語言,例如 **Rust****Scala** 中,Option 型別用於表達一個值可能存在或也可能不存在的特殊情境,針對這一類回傳數值不是使用 nullundefined。這樣的做法可以避免 runtime 錯誤,因為使用 Option 型別時,會自然而然強迫我們自己去處理這個值可能不存在的情況;以此來保證安全性。

當然實際上可能沒有內建 Option 型別,因此通常可能會自行撰寫或是去安裝相關套件。

首先我們先定義一下 option 型別,數值可能存在也可能不存在。

type Some<T> = [T];
type None = [];
type Option<T> = Some<T> | None;

代表今天如果要吐出 option 的話,將會是「有」或「沒有」。

接下來創造一個函式,找尋陣列裡面元素是否符合某些條件(這個回傳數值可能就會是有或沒有了)。

function findFirstEvenNumber(numbers: number[]): Option<number> {
    const found = numbers.find(n => n % 2 === 0);
    return found !== undefined ? [found] : [];
}

一但我們使用了 Option 型別的概念後,為了程式碼繼續的運行,我們應該處理這些可能會不存在的情況。

const numbers = [1, 3, 5, 8, 9];
const result = findFirstEvenNumber(numbers);

if (result.length > 0) {
    console.log(`Found an even number: ${result[0]}`);
} else {
    console.log('No even number found.');
}

就會去處理回傳是空還是有元素了。

Option 型別為 TypeScript 提供了一種安全和明確的方式來表示可能不存在的值。它避免了使用 nullundefined 的需要,並使我們能夠更容易地寫出不會在 runtime 時發生錯誤的代碼。透過使用 Option 型別,我們可以更清晰地表達意圖,並讓型別系統幫助我們避免錯誤。


上一篇
[Day 16] TypeScript 進階型別
下一篇
[Day 18] TypeScript 非同步型別檢查
系列文
TypeScript 啟動!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言