优雅的使用TypeScript的建议-优快云博客

本文链接：https://blog.youkuaiyun.com/qq2468103252/article/details/143572507

优雅的使用TypeScript的建议🎉

随着 TypeScript 越来越受欢迎，开发人员因其类型安全性、可扩展性和现代 Web 应用程序中的强大工具而接受了它。无论您是新手小白还是老油条，完善 TypeScript 技能都可以显著提高代码库的质量、可维护性和可读性。本文将引导您了解实用技巧和最佳实践，以帮助您编写更好的 TypeScript 代码。

为什么要注重编写更好的 TypeScript 代码？

TypeScript 提供了强大的类型和工具，但在交付价值、减少错误和维护干净、可读的代码方面，编写代码的方式很重要。了解如何有效利用 TypeScript 的功能可确保：

减少错误：强类型可以通过在编译时捕获问题来帮助防止许多运行时错误。
提高代码质量：干净的 TypeScript 代码更易于理解、测试和维护。
增强协作：清晰的类型和接口使您的代码库更容易被其他人获取和使用。

1. 利用严格类型选项

TypeScript 的编译器选项允许您强制执行更严格的类型检查规则。"strict": true在您的设置中设置tsconfig.json是一个很好的开始，但请考虑启用其他选项，例如：

“noImplicitAny”：避免无意中使用任何类型。
“strictNullChecks”：确保变量不能为空或未定义，除非明确允许。
“strictFunctionTypes”：强制正确的函数类型推断，防止出现细微的错误。

更严格的类型通常可以揭示隐藏的错误并使您的代码库更加可靠。

2. 明智地使用类型和接口

type和都interface允许您定义对象的形状，但是它们各有优点：

interface：定义对象时使用接口，尤其是当您期望对象具有一致的形状以便可以从继承或将来的扩展中获得更好的维护性。
```
interface User {
  id: number;
  name: string;
  email: string;
}
```
type：使用类型进行联合或创建不需要扩展的更复杂的数据结构。
```
type Status = "active" | "inactive" | "pending";
```

了解何时使用每种方法将会产生更易于维护、更可预测的代码。

3.unknown优先选择any

类型any经常被误用，因为它允许任何类型的数据，违背了 TypeScript 的类型安全目的。相反，unknown当类型不确定时，请选择。与不同any，unknown需要先进行类型检查，然后才能对其进行操作，从而确保安全性。

function processInput(input: unknown) {
  if (typeof input === "string") {
    console.log(input.toUpperCase());
  }
}

4. 使用只读和不可变类型以确保安全

添加readonly属性可以防止意外变异，这在许多情况下很有价值，特别是在处理一旦初始化就不应改变的数据结构时。

interface Product {
  readonly id: number;
  readonly name: string;
  price: number;
}

使用readonly不应改变的属性可以减少错误并明确代码中某些数据的不变性。

5. 定义可重用的实用程序类型

TypeScript 提供了多种实用类型（Partial、Pick、Omit、Readonly等），可让您的代码更简洁，并有助于避免重复定义。例如，如果您想要一个User具有所有可选属性的版本，请使用Partial<User>。

type OptionalUser = Partial<User>;

这些实用类型简化了处理类型的变化，使您的代码更加通用。

6.明确定义返回类型

定义函数时，请务必指定返回类型。这不仅使代码更可预测，而且还可以帮助 TypeScript 在函数行为稍后发生变化时捕获错误。

function getUser(id: number): User | null {
  // logic to fetch user
}

明确的返回类型可以减少歧义并有助于确保函数按预期运行。

7. 安全地处理 Null 和 Undefined

如果处理不当，像null和这样的类型通常会导致运行时错误。TypeScript 提供了( ) 和( ) 运算符来妥善处理这些情况。undefinedoptional chaining?.nullish coalescing??

const userName = user?.profile?.name ?? "Guest";

这些运算符可帮助您避免与空值有关的常见陷阱，而无需进行复杂的嵌套检查。

8. 利用枚举获取有意义的值

TypeScript 中的枚举允许您定义一组命名常量。它们使您的代码更具表现力，并防止使用任意字符串或数字。

enum UserRole {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST",
}

function assignRole(role: UserRole) {
  // logic here
}

处理一组固定的选项时，枚举特别有用，可以使代码自文档化并减少错误。

9.never用于详尽检查

使用联合类型时，使用never以确保对switch案例进行详尽检查。这可确保如果将新案例添加到联合中，而未处理这些案例，则 TypeScript 将抛出错误。

type Shape = Circle | Square | Triangle;

function getArea(shape: Shape) {
  switch (shape.type) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.side * shape.side;
    default:
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

这种never类型检查技术降低了未处理情况的风险，确保代码详尽且类型安全。

10.保持函数纯粹而简洁

编写纯函数（没有副作用的函数）有助于防止不可预测的行为并使测试更简单。 TypeScript 在函数式编程中使用时非常有用，因为它在函数设计中强制纯粹性，鼓励您保持函数简洁且可预测。

function add(a: number, b: number): number {
  return a + b;
}

纯函数更易于测试、调试和理解，从而使您的 TypeScript 代码更加健壮。

希望上述的建议对各位的TypeScript编码生涯有所帮助🧐