TypeScript项目开发中减少重复代码的最佳实践

TypeScript项目开发中减少重复代码的最佳实践

引用

CSDN

1.

https://blog.csdn.net/2401_85124858/article/details/139934847

在TypeScript项目开发中，减少代码重复是提高代码质量和开发效率的关键。本文将通过多个具体示例，详细介绍如何利用TypeScript的类型系统来避免重复代码，包括使用extends关键字、交叉运算符、映射类型以及内置工具类型等方法。

使用统一的类型签名

在开发过程中，我们经常会遇到需要定义多个相似函数的情况。为了避免代码重复，可以提取一个统一的类型签名：

type HTTPFunction = (url: string, opts: Options) => Promise;

const get: HTTPFunction = (url, opts) => { /* … */ };
const post: HTTPFunction = (url, opts) => { /* … */ };

利用extends关键字避免接口重复

在定义接口时，如果发现多个接口之间存在重复属性，可以使用extends关键字来继承：

interface Person {
  firstName: string;
  lastName: string;
}

interface PersonWithBirthDate extends Person {
  birth: Date;
}

或者使用交叉运算符（&）：

type PersonWithBirthDate = Person & { birth: Date };

使用映射类型优化状态管理

在处理复杂状态时，可以使用映射类型来避免重复声明相同的属性：

interface State {
  userId: string;
  pageTitle: string;
  recentFiles: string[];
  pageContents: string;
}

interface TopNavState {
  userId: State['userId'];
  pageTitle: State['pageTitle'];
  recentFiles: State['recentFiles'];
}

通过映射类型优化后的代码：

type TopNavState = {
  // TypeScript会自动推断出与前一个定义相同的类型
};

利用内置工具类型减少重复

TypeScript提供了多个内置工具类型来帮助开发者减少重复代码。例如，Pick类型可以选择性地提取另一个类型的某些属性：

type TopNavState = Pick<State, 'userId' | 'pageTitle' | 'recentFiles'>;

另一个常用的工具类型是Partial，可以将类型的所有属性变为可选：

interface Options {
  width: number;
  height: number;
  color: string;
  label: string;
}

type OptionsUpdate = Partial<Options>;

总结

通过上述方法，我们可以在TypeScript项目开发中有效地减少代码重复，提高代码质量和开发效率。掌握这些技巧对于TypeScript开发者来说至关重要。