返回

理解 Utility Types:参数和返回类型 - 下

前端

在我们的上篇博文中,我们探讨了 Utility Types 的概念、基本类型以及联合类型。本篇博文将继续深入学习 Utility Types 中的参数类型和返回类型,并介绍如何使用这些工具优化您的 TypeScript 代码。

参数类型

推断与约束

在 TypeScript 中,函数的参数类型可以自动推断。考虑以下代码:

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

在这个例子中,编译器会自动推断出 ab 的类型为 number,因为它们被用作数字加法运算的操作数。这种自动推断功能非常方便,但有时您可能需要明确指定参数类型,以提高代码的可读性和可维护性。

TypeScript 允许您通过在参数类型前加上类型注释来指定参数类型。例如:

function add(a: number, b: number): number {
  // 这里可以执行一些其他操作
  return a + b;
}

在某些情况下,您可能需要约束参数类型。例如,您可能需要确保一个函数只接受某些类型的参数。您可以使用类型保护来实现这一目的。考虑以下代码:

function isPositive(n: number): boolean {
  return n > 0;
}

这个函数接受一个参数 n,并返回一个布尔值来指示该参数是否是正数。我们可以使用类型保护来确保这个函数只接受数字类型的参数。例如:

function isPositive(n: number): boolean {
  if (typeof n !== 'number') {
    throw new Error('Parameter must be a number');
  }
  return n > 0;
}

现在,这个函数将抛出一个错误,如果您试图传入一个非数字类型的参数。

函数重载

TypeScript 允许您为同一个函数定义多个重载版本。这在您需要处理不同类型或数量的参数时非常有用。例如,考虑以下代码:

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

在这个例子中,我们定义了一个名为 add 的函数,它具有两个重载版本。第一个版本接受两个数字参数并返回一个数字,而第二个版本接受两个字符串参数并返回一个字符串。第三个版本是默认版本,它接受任何类型