【TypeScript】深入理解函数类型

TypeScript 作为现代 JavaScript 的超集，不仅扩展了语言的静态类型检查能力，还在函数的类型表达上提供了更多的灵活性。函数是任何应用的基础构建块，不论是本地函数、从模块导入的函数，还是类中的方法。在 TypeScript 中，函数不仅仅是可以调用的逻辑单元，它们同样可以作为值使用。因此，TypeScript 提供了多种方式来描述函数的调用方式和类型。在本文中，我们将深入探讨如何在 TypeScript 中编写函数类型。

一、函数类型表达式

1. 基础函数类型表达式

描述函数的最简单方法是使用函数类型表达式。这种类型表达的语法与箭头函数非常相似，能够清晰直观地描述函数的参数和返回类型。例如：

function greeter(fn: (a: string) => void) {
  fn("Hello, World");
}
 
function printToConsole(s: string) {
  console.log(s);
}
 
greeter(printToConsole);

在这里，fn: (a: string) => void 表示“一个接受 string 类型参数 a，且无返回值的函数”。这种语法与箭头函数类似，其中 => 用于连接参数类型和返回值类型。

2. 参数名称和类型

注意在函数类型表达式中，参数名称是必需的。虽然这个名称没有实际的意义，但在表达类型时是必要的。如果写成 (string) => void，TypeScript 会将其解释为“一个参数名为 string 且类型为 any 的函数”，这与我们的意图不符。因此，正确的写法应该是 (a: string) => void。

二、使用类型别名定义函数类型

在实际开发中，我们可能会多次使用同一种函数类型。为了避免重复编写函数类型表达式，我们可以通过类型别名来命名函数类型。例如：

type GreetFunction = (a: string) => void;
function greeter(fn: GreetFunction) {
  fn("Hello, World");
}

通过定义类型别名 GreetFunction，我们可以更加简洁地表达函数类型。这不仅提高了代码的可读性，也使得函数类型的复用更加方便。

三、调用签名（Call Signature）

在 JavaScript 中，函数不仅可以被调用，还可以拥有属性。然而，函数类型表达式的语法并不允许声明属性。如果我们想描述既可以调用又具有属性的对象类型，可以通过**调用签名（call signature）**的方式来实现：

type DescribableFunction = {
  description: string;
  (someArg: number): boolean;
};
function doSomething(fn: DescribableFunction) {
  console.log(fn.description + " returned " + fn(6));
}
 
function myFunc(someArg: number) {
  return someArg > 3;
}
myFunc.description = "default description";
 
doSomething(myFunc);

在这个例子中，DescribableFunction 描述了一个既可以通过数值参数调用、又拥有 description 属性的函数。与函数类型表达式不同，这里的语法使用了 : 而不是 => 来连接参数列表和返回类型。

四、构造签名（Construct Signature）

JavaScript 中的函数也可以通过 new 操作符来调用，这意味着这些函数被用作构造函数，通常用于创建新的对象。在 TypeScript 中，我们可以通过**构造签名（construct signature）**来描述构造函数的类型：

type SomeConstructor = {
  new (s: string): SomeObject;
};
function fn(ctor: SomeConstructor) {
  return new ctor("hello");
}

通过在调用签名前加上 new，我们就可以清晰地描述构造函数的行为。

有些对象（比如 JavaScript 中的 Date 对象）既可以通过函数调用，也可以通过 new 进行构造。为了表示这些对象，我们可以将调用签名和构造签名结合在同一个类型中：

interface CallOrConstruct {
  (n?: number): string;
  new (s: string): Date;
}
 
function fn(ctor: CallOrConstruct) {
  console.log(ctor(10));
  console.log(new ctor("10"));
}
 
fn(Date);

在这个例子中，CallOrConstruct 接口既描述了接受可选 number 参数并返回 string 的调用行为，也描述了通过 new 关键字接受 string 参数并返回 Date 对象的构造行为。

五、函数重载

在 TypeScript 中，函数可以根据不同的参数类型和数量进行重载。这意味着同一个函数名可以有多个不同的签名，TypeScript 会根据传入参数的类型自动选择匹配的签名。例如：

function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d);
  } else {
    return new Date(mOrTimestamp);
  }
}

const d1 = makeDate(12345678);
const d2 = makeDate(5, 5, 2020);

这里我们通过函数重载实现了两种不同的调用方式：一个接受时间戳，另一个接受年月日。重载签名帮助我们确保在调用时传入的参数符合预期，避免运行时错误。

六、可选参数和默认参数

在 TypeScript 中，函数的参数可以是可选的，也可以有默认值。可选参数在定义时使用 ? 标记，而默认参数则直接赋值：

function logMessage(message: string, userId?: string) {
  const time = new Date().toLocaleTimeString();
  console.log(`${time} - ${userId || "Guest"}: ${message}`);
}

logMessage("Hello, World");
logMessage("Hello, TypeScript", "User123");

可选参数 userId 可以被省略，而默认参数则可以确保在调用函数时参数具有默认值：

function greet(name: string = "Guest") {
  console.log(`Hello, ${name}`);
}

greet(); // 输出 "Hello, Guest"
greet("Alice"); // 输出 "Hello, Alice"

七、剩余参数

当我们不知道函数将会接收多少个参数时，可以使用剩余参数语法来表示。剩余参数使用 ... 来标记，它将所有传入的参数收集为一个数组：

function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 输出 10
console.log(sum(10, 20)); // 输出 30

剩余参数为我们提供了极大的灵活性，使函数能够处理任意数量的参数。

八、函数类型的灵活性

TypeScript 提供了强大的工具来描述函数的各种行为和特性，使我们可以编写健壮的、类型安全的代码。不论是函数类型表达式、调用签名、构造签名，还是函数重载，TypeScript 都能帮助我们确保代码的正确性，避免运行时错误。通过合理使用这些工具，我们可以在大型项目中实现更加稳定和可维护的代码结构。

推荐：

• JavaScript
• react
• vue

---