如何写出更好的TypeScript代码：简洁、有效且可扩展的最佳实践指南

随着 TypeScript 的日益流行，开发人员因其类型安全性、扩展性和强大的工具支持而在现代 web 应用中被广泛使用它。无论你是新手还是资深开发者，提升你的 TypeScript 技巧都能显著提升代码库的质量、可维护性和可读性。本指南会带你了解一些实用技巧和最佳实践，帮助你写出更好的 TypeScript 代码。

……

TypeScript 带来了强大的类型支持和开发工具，但在创造价值、减少错误和保持干净、可读的代码方面，你如何编写代码仍然很重要。有效地利用 TypeScript 的特性确保以下几点：

• 减少错误：强类型可以在编译时捕获许多问题，从而帮助避免许多运行时错误。
• 高质量的 TypeScript 代码：整洁的 TypeScript 代码更易于理解、测试和维护。
• 促进协作：清晰的类型和接口让其他开发者更容易上手并参与其中。

...

TypeScript的编译器选项允许你启用更严格的类型检查规则。在你的tsconfig.json中设置"strict": true是一个很好的起点，但还可以考虑启用其他选项，例如：

• "noImplicitAny" : 避免不小心使用 any 类型。
• "strictNullChecks" : 确保变量不会被设置为 null 或 undefined，除非明确允许。
• "strictFunctionTypes" : 强制正确的函数类型推断，避免细微错误。

更严格的类型系统常常能发现隐藏的错误，使你的代码库更加稳定可靠。

等等

type 和 interface 都允许你定义对象的结构，但各有千秋，但各自有其特点：

• 接口：在定义对象时使用接口，特别是在期望对象具有一致的行为或形状时，尤其是在可以从中受益于继承或未来扩展的情况。

    interface 用户 {
      id: number;
      name: string;
      email: string;
    }

全屏模式, 退出全屏

类型定义：使用类型来定义联合或更复杂的数据结构，当你不需要扩展性时。

类型 Status = "active" | "inactive" | "pending"; // 状态类型定义为“active”（活动）、"inactive"（非活动）或 "pending"（待定）

进入全屏，退出全屏

这样的理解将使代码更易维护和更可预测，理解何时使用每一种。

此处省略内容

any 类型常被误用，这与 TypeScript 的类型安全性目的背道而驰。当不确定类型时，可以考虑使用 unknown。与 any 不同，使用 unknown 类型时必须先进行类型检查，从而确保了类型安全。

处理输入函数 processInput(input: unknown) 的作用是处理输入，如果输入是字符串类型，将输入转换为大写并打印到控制台。

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

点击全屏模式，点击退出全屏模式

……

给属性加上 readonly 可以防止意外更改，在许多场景中这很有价值，特别是在处理一旦初始化就不应更改的数据结构时。这种情况

接口 Product {
  只读 id: 数字;
  只读 name: 字符串;
  price: 数字;
}

点击全屏进入全屏模式，点击退出退出全屏模式

使用 readonly 关键字为不应被修改的属性，可以减少错误并明确某些数据的不可变性，使这些数据的不可变性更加明确。

此处省略内容

TypeScript 提供了几个实用类型（如 Partial、Pick、Omit、Readonly 等），可以帮助代码更简洁，并避免重复定义。例如，如果你想让 User 的所有属性都是可选的，可以使用 Partial<User>。

    type OptionalUser = Partial<User>;

全屏进入 全屏退出

这些实用类型简化了处理不同类型差异的过程，让处理不同情况变得简单，也让你的代码更灵活。

此处省略部分内容 *
此处省略内容。

定义函数时，总是要指定返回类型。这样做不仅让代码更易于预测，还帮助 TypeScript 在函数行为后来改变时捕获错误。

    function getUser(id: number): User | null {
      // 获取用户
    }

切换到全屏模式，退出全屏

明确的返回值类型可以减少歧义性，并有助于确保函数按预期工作。

像 null 和 undefined 这样的类型，如果它们没有被妥善处理，可能会导致运行时错误。TypeScript 提供了可选链操作符 (?.) 和空值合并操作符 (??) 来优雅地处理这些问题。

    const userName = user?.profile?.name ?? "Guest"; // 如果用户有 profile 且有 name，则取 name，否则取 "Guest"

进入全屏 切出全屏

这些操作符可以帮助你避免与空值相关的常见问题，而无需复杂的条件嵌套。

在 TypeScript 中，可以使用枚举（Enums）来定义一组具有明确名称的常量。它们使代码更具表现力，并避免使用任意字符串或数字。

    枚举 UserRole 枚举类型 {
      Admin = "ADMIN",
      User = "USER",
      Guest = "GUEST",
    }

    函数 assignRole(角色: UserRole) {
      // 逻辑如下
    }

全屏,退出全屏

在处理一组固定的选项时，枚举特别有用，这不仅使代码更易于理解，还能减少错误的发生。

当处理联合类型（union types）时，使用 never 来确保在 switch 语句的每个 case 中进行彻底检查。这可以确保如果在联合类型中添加了新的成员，TypeScript 会在未处理这些新增成员时抛出错误。

    type Shape = 类型 Shape;

    function getArea(形状: 形状) {
      switch (形状.类型) {
        case "圆形":
          return Math.PI * 形状.radius ** 2;
        case "正方形":
          return 形状.side * 形状.side;
        case "三角形":
          const _exhaustiveCheck: never = 形状;
          return _exhaustiveCheck;
      }
    }

进入全屏 退出全屏

这种方法可以避免never类型检查中的未处理情况，减少未处理情况，确保代码的全面性和类型安全性。

编写没有副作用的纯函数有助于防止意外行为，并使测试变得更加简单。在函数式编程领域，TypeScript 表现尤为出色，因为它强制执行函数设计的纯度，鼓励我们编写简洁和可预测性的函数。

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

全屏模式 退出全屏

纯函数更易于测试、调试和理解，使您的 TypeScript 代码更加强大且更容易维护。

编写更好的 TypeScript 代码意味着专注于强类型支持、代码一致性以及使你的代码库更加健壮、可维护和可扩展的最佳实践。当你应用这些技巧时，你会发现你的 TypeScript 代码变得更加整洁、更少错误，并且更令人愉快。记住，编写更好的 TypeScript 是一个不断前行的过程，而这些实践将帮助你不断提升技能。

准备增强你的 TypeScript 技能吗？试试把这些小技巧用在你下一个项目中，看看它们能不能让你的开发更顺手。让我们一起把每一行 TypeScript 代码都写得更好！

读得开心吗？觉得文章有启发或有帮助的话，可以支持一下我的工作，买我一杯咖啡。你的支持将帮助我继续创作更多这样的内容。点击这里 为我买一杯虚拟咖啡。干杯，谢谢！