Typescript入門-Day9:例外處理

閱讀時間約 5 分鐘

為什麼要使用「例外處理」

  • 提高程式的可靠性: 通過處理異常,我們可以避免程式因為異常情況而崩潰或產生未預期的行為,從而提高程式的可靠性。
  • 提供更好的反饋: 使用例外處理可以提供更具描述性的錯誤訊息,幫助開發者快速定位並修復問題。
  • 增加程式的容錯性: 通過捕獲和處理異常,我們可以使程式在面對錯誤時優雅地回退或提供替代方案,從而增加程式的容錯性。
  • 改善程式的可讀性: 通過將異常處理代碼與正常業務邏輯分離,可以使程式的結構更清晰、更易於理解。

語法

在 TypeScript 中,例外處理語句使用 try...catch...finally 塊來捕獲和處理異常。

try {
// 可能發生錯誤的代碼
} catch (error) {
// 處理錯誤的代碼
} finally {
// 無論是否發生錯誤都會執行的代碼
}

示例

try {
let result = riskyOperation();
console.log(result);
} catch (error) {
console.error("An error occurred:", error.message);
} finally {
console.log("This will always execute");
}

常見異常類型

在 TypeScript 中,常見的異常類型包括:

  • RangeError: 當數值不在預期範圍內時引發。
  • ReferenceError: 當引用一個不存在的變量時引發。
  • SyntaxError: 當語法錯誤時引發。
  • TypeError: 當變量或參數不是預期的類型時引發。
  • URIError: 當使用 encodeURIdecodeURI 時遇到錯誤的 URI 時引發。

示例

try {
// RangeError 示例
let num = new Array(-1);
} catch (error) {
console.error("RangeError:", error.message);
}

try {
// ReferenceError 示例
console.log(nonExistentVariable);
} catch (error) {
console.error("ReferenceError:", error.message);
}

try {
// SyntaxError 示例
eval('foo bar');
} catch (error) {
console.error("SyntaxError:", error.message);
}

try {
// TypeError 示例
null.f();
} catch (error) {
console.error("TypeError:", error.message);
}

try {
// URIError 示例
decodeURI('%');
} catch (error) {
console.error("URIError:", error.message);
}

主動觸發異常訊息

可以使用 throw 關鍵字主動引發異常訊息。

function riskyOperation() {
throw new Error("Something went wrong");
}

try {
riskyOperation();
} catch (error) {
console.error(error.message); // Something went wrong
}

主動觸發用戶自定義異常訊息

可以創建自定義的異常類型,並在需要時引發這些自定義異常。

class CustomError extends Error {
constructor(message: string) {
super(message);
this.name = "CustomError";
}
}

function riskyOperation() {
throw new CustomError("This is a custom error");
}

try {
riskyOperation();
} catch (error) {
if (error instanceof CustomError) {
console.error("CustomError caught:", error.message);
} else {
console.error("An unexpected error occurred:", error.message);
}
}

通過上述方式,可以有效地在 TypeScript 中處理各種異常情況,並確保程序在面對錯誤時能夠優雅地處理並提供有意義的錯誤訊息。

9會員
99內容數
日後將分享關於我的經驗(日常、工作、技術),並期待未來能創造屬於我的宇宙。
留言0
查看全部
發表第一個留言支持創作者!
Michael楊 的其他內容
Typescript入門-Day3:環境建置
閱讀時間約 3 分鐘
Typescript入門-Day4:資料型別
閱讀時間約 5 分鐘
Typescript入門-Day5:運算符
閱讀時間約 6 分鐘
Typescript入門-Day6:流程控制
閱讀時間約 5 分鐘
Typescript入門-Day7:函數
閱讀時間約 4 分鐘
Typescript入門-Day8:物件導向
閱讀時間約 15 分鐘
你可能也想看
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
95
[TypeScript] 快速上手 satisfies,讓你輕鬆推論型別與類型檢查本文帶你深入探索 TypeScript 中的 satisfies 特性,能幫助你實現精確的型別推導與型別檢查。透過實際案例,展示如何使用 satisfies 提升代碼的型別安全與程式碼的整潔,是每位 TypeScript 開發者不可或缺的知識。
Thumbnail
[TypeScript] 10 分鐘學會 TS 中必會的 5 種型別防禦 Type Guard本文介紹 TypeScript 常遇到的混合型別,以及如何透過五種型別防禦(Type Guard)來解決。涵蓋了使用型別斷言、型別謂詞、in 運算子、typeof 運算子以及 instanceof 運算子這幾種方式。透過本文的學習,能夠更好地運用 TypeScript 進行程式碼開發。
Thumbnail
2024-03-26
10
【前端開發】TypeScript 的型別推論、型別註記與型別斷言上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
TS 筆記 | TypeScript 基礎TypeScript 基礎語法
Thumbnail
2023-11-16
8
react + typescript + webpack 如何設定 webpack alias前言 create react app 是一個可以快速設定 react 專案的一個工具,在建立專案時已經把 babel,webpack 都已經預先封裝設置好,如果我們要修改 webpack alias 設定該如何設定呢 什麼是 alias alias 在 webpack 設定意義叫做,檔案路徑
Thumbnail
2023-11-06
2
【前端開發】TypeScript 是什麼?優化 JavaScript 開發體驗的程式語言自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
Thumbnail
學習用TypeScript | React | TailwildCSS 跟JayLin一起做待辦事項 AppTodo App是一個很好學習程式語言的專案開始,JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
Thumbnail
發佈在
JayLinXR
2023-05-16
6
Typescript: 他實際上沒有驗證你的型別Typescript: It's not actually validating your types. - DEV Community 👩‍💻👨‍💻 有時他會讓你誤解: 我遇到一個相信 typescript 保證型別就是你說的那樣. 但我必須告訴你: Typescript 不是這樣做的.
Thumbnail
2022-08-15
0
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
95
[TypeScript] 快速上手 satisfies,讓你輕鬆推論型別與類型檢查本文帶你深入探索 TypeScript 中的 satisfies 特性,能幫助你實現精確的型別推導與型別檢查。透過實際案例,展示如何使用 satisfies 提升代碼的型別安全與程式碼的整潔,是每位 TypeScript 開發者不可或缺的知識。
Thumbnail
[TypeScript] 10 分鐘學會 TS 中必會的 5 種型別防禦 Type Guard本文介紹 TypeScript 常遇到的混合型別,以及如何透過五種型別防禦(Type Guard)來解決。涵蓋了使用型別斷言、型別謂詞、in 運算子、typeof 運算子以及 instanceof 運算子這幾種方式。透過本文的學習,能夠更好地運用 TypeScript 進行程式碼開發。
Thumbnail
2024-03-26
10
【前端開發】TypeScript 的型別推論、型別註記與型別斷言上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
TS 筆記 | TypeScript 基礎TypeScript 基礎語法
Thumbnail
2023-11-16
8
react + typescript + webpack 如何設定 webpack alias前言 create react app 是一個可以快速設定 react 專案的一個工具,在建立專案時已經把 babel,webpack 都已經預先封裝設置好,如果我們要修改 webpack alias 設定該如何設定呢 什麼是 alias alias 在 webpack 設定意義叫做,檔案路徑
Thumbnail
2023-11-06
2
【前端開發】TypeScript 是什麼?優化 JavaScript 開發體驗的程式語言自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
Thumbnail
學習用TypeScript | React | TailwildCSS 跟JayLin一起做待辦事項 AppTodo App是一個很好學習程式語言的專案開始,JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
Thumbnail
發佈在
JayLinXR
2023-05-16
6
Typescript: 他實際上沒有驗證你的型別Typescript: It's not actually validating your types. - DEV Community 👩‍💻👨‍💻 有時他會讓你誤解: 我遇到一個相信 typescript 保證型別就是你說的那樣. 但我必須告訴你: Typescript 不是這樣做的.
Thumbnail
2022-08-15
0