不再使用try/catch：TypeScript中更优雅的错误处理方式

嗨，大家好呀。

你有没有觉得过在用 TypeScript 开发应用程序中，这种 try-catch 语法用起来有点麻烦？

我幸运地在YouTube上发现了一个精彩的视频，讲解了TypeScript中简单处理错误的方法。
这里我来分享视频中的几点体会，作为回顾参考。

首先，我定义了一个简单的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 重写之前的代码，可以这样写。

    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("出错了");
    }

进入全屏 退出全屏

下面的代码并不理想。
即使只是一个拼写错误，“出现了错误”的信息还是显示在了控制台。我只想在调用getUser时发生的错误进行处理。

    const wait = (duration: number) => {
      ...
    };

    const getUser = async (id: number) => {
    　...
    };

    try {
      const user = await getUser(1);
      console.log(usr);               // ← 这里有一个拼写错误，应该是user而不是usr
      // ... (很多代码)
    } catch (error) {
      console.log("捕获到错误");
    }

全屏；退出全屏

好的，那么就用 let 来试试看解决它。

    const wait = (duration: number) => {
      ...
    };

    const getUser = async (id: number) => {
    　...
    };

    let 用户;

    try {
      用户 = await getUser(1);
      // ... (很多代码)
    } catch (错误) {
      console.log("出错了");
    }

    console.log(usr); // ← ReferenceError: 无法找到变量: usr

进入全屏/退出全屏

我确实是因为一个拼写错误得到了一个错误，但这段代码仍然不够理想，因为我可能会不小心重新定义用户这个对象，就像下面的例子。

    const wait = (duration: number) => {
      ...
    };

    const getUser = async (id: number) => {
    　...
    };

    let 用户;

    try {
      用户 = await getUser(1);
      // ... (很多相关代码)
    } catch (err) {
      console.log("发生了错误");
    }

    用户 = 1; // ← ❌ 可能会导致错误。

点击此处进入全屏模式或退出全屏模式

这不更简单、更易读吗？
再说，用户变量是不能改变的，因此不会引发意外的错误。

    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 [err, user] = await catchError(getUser(1));

    if (err) {
      console.log(err);
    }

    console.log(user);

全屏，退出

通过利用这个功能来处理错误，我们可以大大简化代码，让代码更简洁、更易维护。这样做的好处是，我们不再需要在代码中到处添加多个“try/catch”块，从而使错误处理更加一致和简洁。这是一种更聪明、更有效的方法来处理TypeScript中的错误。

请看一下这个我们参考的视频，他讲解得很清楚。
编程愉快☀️