ts-pattern 如何提高代码的可读性？

我第一次接触 ts-pattern

几个月前，我正在审查一个客户的代码库，其中充斥着分布在多个文件中的大量 switch 语句和对象文字，这使得可读性和可维护性变得混乱。

在与我的队友 Erick 进行结对编程期间，他分享了他的屏幕并向我展示了他正在测试的一个库。

那是我第一次使用ts-pattern🤩，说实话，它真的让我大吃一惊！它的可读性和可维护性提升令人难以置信。

这是ts-pattern文档的链接。

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

用例

1. 替换复杂的 Switch 语句

传统的 switch 语句：

const status = "success";

let message;
switch (status) {
  case "success":
    message = "Operation was successful!";
    break;
  case "error":
    message = "There was an error.";
    break;
  default:
    message = "Unknown status.";
}
console.log(message);  // Output: Operation was successful!

使用 ts 模式：

import { match } from 'ts-pattern';

const status = "success";

const message = match(status)
  .with("success", () => "Operation was successful!")
  .with("error", () => "There was an error.")
  .otherwise(() => "Unknown status.");

console.log(message);  // Output: Operation was successful!

比较：

使用 ts-pattern 的可读性非常清晰，无需 break 语句，并且模式匹配直接关注 case。在 ts-pattern 中添加或删除条件更加容易，而且您无需担心在 switch case 中忘记 break 语句。

2. API 响应的对象匹配

使用对象匹配：

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

let userName;
if (apiResponse.status === 200 && apiResponse.data.user.name === 'John') {
  userName = "Hello, John!";
} else {
  userName = "User not found.";
}

console.log(userName);  // Output: Hello, John!

使用 ts 模式：

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

const userName = match(apiResponse)
  .with({ status: 200, data: { user: { name: "John" } } }, () => "Hello, John!")
  .otherwise(() => "User not found.");

console.log(userName);  // Output: Hello, John!

比较：

ts-pattern 减少了深度嵌套 if 条件的需要，使逻辑更加清晰流畅。模式匹配直接反映了对象的结构，使其更易于理解和修改。

3.状态管理

使用 switch 进行状态管理：

const appState = { status: "loading" };

let displayMessage;
switch (appState.status) {
  case "loading":
    displayMessage = "Loading...";
    break;
  case "success":
    displayMessage = "Data loaded successfully!";
    break;
  case "error":
    displayMessage = "Failed to load data.";
    break;
  default:
    displayMessage = "Unknown state.";
}

console.log(displayMessage);  // Output: Loading...

使用 ts 模式：

const appState = { status: "loading" };

const displayMessage = match(appState.status)
  .with("loading", () => "Loading...")
  .with("success", () => "Data loaded successfully!")
  .with("error", () => "Failed to load data.")
  .otherwise(() => "Unknown state.");

console.log(displayMessage);  // Output: Loading...

比较：

ts-pattern 通过消除重复的 case 和 break 语句来简化状态管理。随着状态数量的增加，ts-pattern 的扩展性会更好，出现逻辑错误的可能性也会更低。

通过将 switch 语句、对象字面量和传统条件语句与 ts-pattern 进行比较，可以明显看出 ts-pattern 提供了一种更优雅、更可扩展的方法。无论您是处理复杂状态、对象匹配还是验证，ts-pattern 都能减少样板代码，提高可读性，并最大限度地减少潜在错误。不妨一试。

我会尽量持续在这里发文章🤪。谢谢。

文章来源：https://dev.to/tauantcamargo/how-ts-pattern-can-improve-your-code-readability-37dd