跳到主要内容

TypeScript 重构技巧

介绍​

在编写 TypeScript 代码时，随着项目规模的扩大，代码可能会变得复杂且难以维护。重构是优化代码结构、提升代码质量的重要手段。通过重构，我们可以使代码更简洁、更易读，同时减少潜在的 bug。本文将介绍一些常见的 TypeScript 重构技巧，帮助你编写更高效的代码。

1. 使用类型别名和接口​

在 TypeScript 中，类型别名（type）和接口（interface）是定义复杂类型的主要方式。合理使用它们可以提升代码的可读性和可维护性。

示例：使用类型别名​

typescript
// 重构前
function printUserInfo(user: { name: string; age: number; email: string }) {
  console.log(`Name: ${user.name}, Age: ${user.age}, Email: ${user.email}`);
}

// 重构后
type User = {
  name: string;
  age: number;
  email: string;
};

function printUserInfo(user: User) {
  console.log(`Name: ${user.name}, Age: ${user.age}, Email: ${user.email}`);
}

示例：使用接口​

typescript
// 重构前
function printUserInfo(user: { name: string; age: number; email: string }) {
  console.log(`Name: ${user.name}, Age: ${user.age}, Email: ${user.email}`);
}

// 重构后
interface User {
  name: string;
  age: number;
  email: string;
}

function printUserInfo(user: User) {
  console.log(`Name: ${user.name}, Age: ${user.age}, Email: ${user.email}`);
}
提示
  • 如果需要扩展类型，优先使用 interface，因为它支持继承。
  • 如果需要定义联合类型或交叉类型，使用 type 更合适。

2. 使用枚举代替魔法值​

魔法值（Magic Values）是指在代码中直接使用的未解释的常量值。使用枚举（enum）可以避免魔法值，使代码更具可读性。

示例：使用枚举​

typescript
// 重构前
function getStatusMessage(status: number) {
  if (status === 1) {
    return "Pending";
  } else if (status === 2) {
    return "Approved";
  } else if (status === 3) {
    return "Rejected";
  }
}

// 重构后
enum Status {
  Pending = 1,
  Approved = 2,
  Rejected = 3,
}

function getStatusMessage(status: Status) {
  if (status === Status.Pending) {
    return "Pending";
  } else if (status === Status.Approved) {
    return "Approved";
  } else if (status === Status.Rejected) {
    return "Rejected";
  }
}
备注

枚举不仅提升了代码的可读性，还提供了类型安全性，避免了无效的状态值。

3. 使用可选链和空值合并​

可选链（Optional Chaining）和空值合并（Nullish Coalescing）是 TypeScript 中的两个强大特性，可以简化对可能为 null 或 undefined 的值的处理。

示例：使用可选链​

typescript
// 重构前
function getUserEmail(user: { email?: string }) {
  if (user && user.email) {
    return user.email;
  }
  return "No email provided";
}

// 重构后
function getUserEmail(user: { email?: string }) {
  return user?.email ?? "No email provided";
}

示例：使用空值合并​

typescript
// 重构前
function getDefaultValue(value: string | null | undefined) {
  return value !== null && value !== undefined ? value : "Default";
}

// 重构后
function getDefaultValue(value: string | null | undefined) {
  return value ?? "Default";
}
警告

空值合并运算符（??）仅在值为 null 或 undefined 时生效，而逻辑或运算符（||）会在值为假值（如 0 或空字符串）时也生效。

4. 使用函数重载​

函数重载（Function Overloading）允许我们为同一个函数定义多个签名，以处理不同类型的输入。

示例：使用函数重载​

typescript
// 重构前
function processInput(input: string | number) {
  if (typeof input === "string") {
    return input.toUpperCase();
  } else if (typeof input === "number") {
    return input.toFixed(2);
  }
}

// 重构后
function processInput(input: string): string;
function processInput(input: number): string;
function processInput(input: string | number): string {
  if (typeof input === "string") {
    return input.toUpperCase();
  } else {
    return input.toFixed(2);
  }
}
注意

函数重载的签名仅用于类型检查，实际的函数实现需要处理所有可能的输入类型。

5. 使用泛型提高代码复用性​

泛型（Generics）允许我们编写可重用的代码，适用于多种类型。

示例：使用泛型​

typescript
// 重构前
function getFirstElement(arr: number[]): number {
  return arr[0];
}

function getFirstStringElement(arr: string[]): string {
  return arr[0];
}

// 重构后
function getFirstElement<T>(arr: T[]): T {
  return arr[0];
}
提示

泛型可以显著提高代码的复用性，同时保持类型安全性。

实际案例：重构一个用户管理系统​

假设我们有一个简单的用户管理系统，以下是重构前后的对比：

重构前​

typescript
type User = {
  id: number;
  name: string;
  age: number;
  email?: string;
};

function getUserInfo(user: User) {
  let email = user.email ? user.email : "No email provided";
  return `Name: ${user.name}, Age: ${user.age}, Email: ${email}`;
}

重构后​

typescript
interface User {
  id: number;
  name: string;
  age: number;
  email?: string;
}

function getUserInfo(user: User) {
  const email = user?.email ?? "No email provided";
  return `Name: ${user.name}, Age: ${user.age}, Email: ${email}`;
}

通过重构，代码变得更简洁、更易读，同时减少了潜在的错误。

总结​

通过本文的学习，你应该掌握了以下 TypeScript 重构技巧：

  1. 使用类型别名和接口定义复杂类型。
  2. 使用枚举代替魔法值。
  3. 使用可选链和空值合并简化代码。
  4. 使用函数重载处理多种输入类型。
  5. 使用泛型提高代码复用性。

附加资源与练习​

Happy Coding! 🚀