✨ TypeScript 中的广告创意

我爱❤️ TypeScript。

特别是在经历了 JavaScript 臭名昭著的“无法访问未定义的值”错误之后。

然而，即使 TypeScript 很棒，仍然有搬起石头砸自己脚的方法。

在这篇文章中，我将分享 TypeScript 中的 5 个不良做法以及如何避免它们。

？下载我的免费 101 React Tips And Tricks Book，抢占先机。

1. 将错误声明为 Any 类型

例子

在下面的代码片段中，我们捕获错误然后将其声明为类型any。

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err: any) {
    toast(`Failed to do something: ${err.message}`);
  }
}

为什么不好❌

不保证错误具有字符串类型的消息字段。

不幸的是，由于类型断言，代码让我们假设它确实如此。

代码可以在开发中使用特定的测试用例，但在生产中可能会严重损坏。

该怎么办呢✅

不要设置错误类型。默认情况下应该是未知的。

相反，您可以执行以下任一操作：

• 选项 1： 使用类型保护检查错误的类型是否正确。

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err) {
    const toastMessage = hasMessage(err)
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;
    toast(toastMessage);
  }
}

// We use a type guard to check first
function hasMessage(value: unknown): value is { message: string } {
  return (
    value != null &&
    typeof value === "object" &&
    "message" in value &&
    typeof value.message === "string"
  );
}

// You can also simply check if the error is an instance of Error
const toastMessage = err instanceof Error
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;

• 选项 2（推荐）： 不要对错误做出假设

不要对错误类型做出假设，而是显式处理每种类型并向用户提供适当的反馈。

如果无法确定具体的错误类型，最好显示完整的错误信息而不是部分详细信息。

有关错误处理的更多信息，请查看这个优秀的指南：编写更好的错误消息。

2. 具有多个相同类型的连续参数的函数

例子

export function greet(
  firstName: string,
  lastName: string,
  city: string,
  email: string
) {
  // Do something...
}

为什么不好❌

• 您可能会意外地以错误的顺序传递参数：

// We inverted firstName and lastName, but TypeScript won't catch this
greet("Curry", "Stephen", "LA", "stephen.curry@gmail.com")

• 很难理解每个参数代表什么，尤其是在代码审查期间，当在声明之前看到函数调用时

该怎么办 ✅

使用对象参数来阐明每个字段的用途并最大程度地减少错误风险。

export function greet(params: {
  firstName: string;
  lastName: string;
  city: string;
  email: string;
}) {
  // Do something...
}

3. 具有多个分支且无返回类型的函数

例子

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err: any) {
    toast(`Failed to do something: ${err.message}`);
  }
}

为什么不好❌

• 添加新的 AnimalType 可能会导致返回结构错误的对象。

• 返回类型结构的更改可能会导致代码其他部分出现难以追踪的问题。

• 拼写错误可能会导致推断出不正确的类型。

该怎么办 ✅

显式指定函数的返回类型：

async function asyncFunction() {
  try {
    const response = await doSomething();
    return response;
  } catch (err) {
    const toastMessage = hasMessage(err)
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;
    toast(toastMessage);
  }
}

// We use a type guard to check first
function hasMessage(value: unknown): value is { message: string } {
  return (
    value != null &&
    typeof value === "object" &&
    "message" in value &&
    typeof value.message === "string"
  );
}

// You can also simply check if the error is an instance of Error
const toastMessage = err instanceof Error
      ? `Failed to do something: ${err.message}`
      : `Failed to do something`;

4. 添加不必要的类型而不是使用可选字段

例子

export function greet(
  firstName: string,
  lastName: string,
  city: string,
  email: string
) {
  // Do something...
}

为什么不好❌

• 无法扩展：添加新字段需要创建多个新类型

• 使类型检查更加复杂，需要额外的类型保护

• 导致类型名称混乱且维护更加困难

该怎么办 ✅

使用可选字段来保持类型简单且易于维护：

// We inverted firstName and lastName, but TypeScript won't catch this
greet("Curry", "Stephen", "LA", "stephen.curry@gmail.com")

5. 在不同的组件级别使属性可选

例子

disabled 属性在所有组件中都是可选的。

export function greet(params: {
  firstName: string;
  lastName: string;
  city: string;
  email: string;
}) {
  // Do something...
}

为什么不好❌

• 很容易忘记传递禁用的属性，导致部分启用的表单

该怎么办 ✅

将共享字段设为必填对于内部组件。

这将确保正确的道具传递。这对于较低级别的组件尽早发现任何疏忽尤其重要。

在上面的示例中，所有内部组件现在都需要禁用。

function getAnimalDetails(animalType: "dog" | "cat" | "cow") {
  switch (animalType) {
    case "dog":
      return { name: "Dog", sound: "Woof" };
    case "cat":
      return { name: "Cat", sound: "Meow" };
    case "cow":
      return { name: "Cow", sound: "Moo" };
    default:
      // This ensures TypeScript catches unhandled cases
      ((_: never) => {})(animalType);
  }
}

注意：如果您正在为库设计组件，我不建议这样做，因为必填字段需要更多工作。

概括

TypeScript 很棒，但没有工具 ?️ 是完美的。

避免这 5 个错误将帮助您编写更干净、更安全、更易于维护的代码。

有关更多提示，请查看我的免费电子书，101 React Tips & Tricks。

？发现错误

？本周提示

这是一个包装？.

<script> // Detect dark theme var iframe = document.getElementById('tweet-1869351983934738523-882'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1869351983934738523&theme=dark" } </script>发表评论？分享您所犯的 Typescript 错误。<script> // Detect dark theme var iframe = document.getElementById('tweet-1869050042931449902-927'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1869050042931449902&theme=dark" } </script>

别忘了加上“???”。

如果您正在学习 React，请免费下载我的 101 React Tips & Tricks 书。

如果您喜欢这样的文章，请加入我的免费时事通讯，FrontendJoy。

如果您想要每日提示，请在 X/Twitter 或 Bluesky 上找到我。

以上是✨ TypeScript 中的广告创意的详细内容。更多信息请关注PHP中文网其他相关文章！