ts-pattern 如何让你的代码更易读？-原创手记-慕课网

chatgpt 生成的图片

我第一次接触ts-pattern

几个月前，我检查了客户的代码库，里面充满了分散在许多文件中的switch语句和对象字面量定义，这让代码变得难以阅读和维护。

在我与队友Erick的结对编程会话中，他分享屏幕并展示给我一个他正在测试的库（library）。

这是我第一次接触“ts-pattern 🤩”，老实说，它真的让我眼前一亮！可读性和可维护性的提升真的让我感到非常惊讶。

这里有一个链接指向ts-pattern文档。

让我给你展示一些实际应用的例子，ts-pattern 可以真正发挥作用。我首先想到的一个问题是：_我可以在这个任何 TypeScript 项目中使用它吗？_答案是 YES 🙌。

示例

1.简化复杂的switch语句

传统 switch 语句:

     const status = "success";  

    let message;  
    switch (status) {  
      case "success":  
        message = "操作顺利完成！";  
        break;  
      case "error":  
        message = "出现错误。";  
        break;  
      default:  
        message = "未知状态。";  
    }  
    console.log(message);  // 输出结果：操作顺利完成！

采用 ts-pattern：

    import { match } from 'ts-pattern';

    const status = "success";

    const message = match(status)
      .with("success", () => "操作成功了！")
      .with("error", () => "出错了。")
      .otherwise(() => "状态未知。");

    console.log(message);  // 控制台输出消息；// 输出: 操作成功!

比一比：
（此处应保留原有格式，没有实际内容，因此不添加任何额外的中文字符）

使用 ts-pattern，代码可读性很高，无需 break 语句，并且模式匹配直接针对各个情况。维护性方面，添加或移除条件更方便，也无需担心忘记 break 语句的烦恼。

2. API响应中的对象匹配功能

通过对象匹配，

    const apiResponse = {  
      状态码: 200,  
      数据: {  
        用户: {  
          id: 1,  
          名字: 'John',  
        },  
      },  
    };  

    let 用户名;  
    if (apiResponse.状态码 === 200 && apiResponse.数据.用户.名字 === 'John') {  
      用户名 = "你好，John!";  
    } else {  
      用户名 = "找不到该用户。";  
    }  

    控制台日志(用户名);  // 输出: 你好，John!

用 ts-pattern:

    const apiResponse = {  
      status: 200,  
      data: {  
        user: {  
          id: 1,  
          name: 'John',  
        },  
      },  
    };  

    const userName = match(apiResponse)  
      .with({ status: 200, data: { user: { name: "John" } } }, () => "嗨，John!")  
      .otherwise(() => "用户不存在。");  

    console.log(userName);  // 输出：嗨，John!

比较一下：

ts-pattern 减少了对深层嵌套 if 条件的需求，使逻辑更清晰流畅。从而使代码更易读，模式匹配直接映射了对象的结构，从而使理解和修改更简单。

3. 状态管理（State Management）

使用开关来管理状态：

    const appState = { status: "loading" };  // 这可能会改变 :b

    let displayMessage;  
    switch (appState.status) {  
      case "loading":  
        displayMessage = "加载中...";  
        break;  
      case "success":  
        displayMessage = "数据加载成功了！";  
        break;  
      case "error":  
        displayMessage = "无法加载数据，请检查您的网络连接。";  
        break;  
      default:  
        displayMessage = "未知情况。";  
    }  

    console.log(displayMessage);  // 输出：加载中...

使用 ts-pattern（一种特定的模式或技术术语）：
或者
使用 ts-pattern（通常在中文技术社区中直接使用其英文形式）：


    const appState = { status: "loading" };  // 这可能改变 :b  

    const displayMessage = 根据 appState.status  
      .with("loading", () => "加载中...")  
      .with("success", () => "数据加载成功了！")  
      .with("error", () => "加载数据失败了。")  
      .otherwise(() => "未知状态了。");  

    console.log(displayMessage);  // 输出: 正在加载...

来比较一下：

ts-pattern 让这一切变得简单，省去了重复的 case 和 break 语句，随着状态数量的增加，ts-pattern 能更好地扩展，逻辑错误的机会更少。

通过比较 switch 语句、对象字面量和传统的条件判断语句与 ts-pattern，很明显 ts-pattern 提供了一种更优雅且可扩展的方法。不论是处理复杂的状态、对象匹配或是验证，ts-pattern 都能减少冗余代码，提升可读性，还能减少潜在错误，试试看。

会尽量更稳定地在这里发文章 🤪。谢谢。