大家好。
在使用 TypeScript 開發應用程式時，您是否曾經覺得 Try/Catch 有點不方便？
我很幸運地在 YouTube 上找到了一個有趣的影片，它描述瞭如何以簡單的方式處理 TypeScript 中的錯誤。
我將分享影片中的見解作為評論。
定義 getUser 函數以進行錯誤處理
首先，我定義了一個簡單的 getUser 函數來說明錯誤處理。
它會傳回具有給定 id 的新使用者。
const wait = (duration: number) => {
return new Promise((resolve) => {
setTimeout(resolve, duration);
});
};
const getUser = async (id: number) => {
await wait(1000);
if (id === 2) {
throw new Error("404 - User does not exist");
}
return { id, name: "Noah" };
};
const user = await getUser(1);
console.log(user); // { id: 1, name: "Noah" }使用 try/catch 進行錯誤處理
使用try/catch重寫之前的程式碼，看起來像這樣。
const wait = (duration: number) => {
...
};
const getUser = async (id: number) => {
...
};
try {
const user = await getUser(1);
console.log(user); // { id: 1, name: "Noah" }
} catch (error) {
console.log("There was an error");
}try/catch 的問題①：它處理 try 區塊內發生的每個錯誤
下面的程式碼並不理想。
即使這只是拼字錯誤，控制台中也會顯示「有錯誤」。我只想處理此 try/catch 區塊中的 getUser 中專門發生的錯誤。
const wait = (duration: number) => {
...
};
const getUser = async (id: number) => {
...
};
try {
const user = await getUser(1);
console.log(usr); // ← There was an error
// ... (a lot of code)
} catch (error) {
console.log("There was an error");
}try/catch 的問題②：使用 let 的陷阱
好吧，讓我們嘗試使用let來解決它。
const wait = (duration: number) => {
...
};
const getUser = async (id: number) => {
...
};
let user;
try {
user = await getUser(1);
// ... (a lot of code)
} catch (error) {
console.log("There was an error");
}
console.log(usr); // ← ReferenceError: Can't find variable: usr我從拼字錯誤中得到了一個實際錯誤，但這段程式碼仍然不理想，因為我可能會意外地重新定義使用者物件，如下所示。
const wait = (duration: number) => {
...
};
const getUser = async (id: number) => {
...
};
let user;
try {
user = await getUser(1);
// ... (a lot of code)
} catch (error) {
console.log("There was an error");
}
user = 1 // ← ❌ It might lead to a bug.解決方案
它更簡單、更易讀，你不覺得嗎？
此外，使用者變數是不可變的，不會導致意外錯誤。
const wait = (duration: number) => {
...
};
const getUser = async (id: number) => {
...
};
const catchError = async <T>(promise: Promise<T>): Promise<[undefined, T] | [Error]> => {
return promise
.then((data) => {
return [undefined, data] as [undefined, T];
})
.catch((error) => {
return [error];
});
};
const [error, user] = await catchError(getUser(1));
if (error) {
console.log(error);
}
console.log(user);請觀看我們引用的影片。他解釋得很仔細。
如果您有任何其他好的選擇可以嘗試/捕捉，我很想聽聽它們！
我從未在實際工作中實際使用過這種模式。我將根據評論探索最佳實踐。
快樂編碼☀️
原文出處：https://dev.to/noah-00/no-more-trycatch-a-better-way-to-handle-errors-in-typescript-5hbd
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章