请解释接口的函数类型 (Function Types) 的定义和用法

推荐答案

在 TypeScript 中，接口的函数类型用于定义函数的签名。它描述了函数的参数类型和返回值类型，但不包含函数的具体实现。函数类型的接口可以用于约束函数的形状，确保函数符合预期的结构。

interface SearchFunc {
  (source: string, subString: string): boolean;
}

在这个例子中，SearchFunc 接口定义了一个函数类型，该函数接受两个参数：source 和 subString，类型分别为 string，并且返回一个 boolean 类型的值。

本题详细解读

1. 函数类型接口的定义

函数类型接口的定义方式与普通接口类似，但它的属性是一个函数签名。函数签名由参数列表和返回值类型组成，参数列表中的每个参数都需要指定类型，返回值类型也需要明确指定。

interface MyFunction {
  (param1: string, param2: number): boolean;
}

在这个例子中，MyFunction 接口定义了一个函数类型，该函数接受两个参数：param1 是 string 类型，param2 是 number 类型，并且返回一个 boolean 类型的值。

2. 函数类型接口的使用

函数类型接口可以用于约束函数的形状。你可以将一个符合接口定义的函数赋值给该接口类型的变量。

let mySearch: SearchFunc;

mySearch = function(source: string, subString: string): boolean {
  return source.search(subString) > -1;
};

在这个例子中，mySearch 变量被声明为 SearchFunc 类型，因此它必须符合 SearchFunc 接口定义的函数签名。mySearch 函数接受两个 string 类型的参数，并返回一个 boolean 类型的值。

3. 可选参数和默认参数

函数类型接口也支持可选参数和默认参数。你可以在接口中定义可选参数，或者在实现函数时使用默认参数。

// www.javascriptcn.com code example
interface MyFunction {
  (param1: string, param2?: number): boolean;
}

let myFunc: MyFunction;

myFunc = function(source: string, subString?: number): boolean {
  return subString !== undefined && source.length > subString;
};

在这个例子中，param2 是一个可选参数，因此在实现函数时可以选择是否传递该参数。

4. 函数类型接口的灵活性

函数类型接口不仅可以用于约束函数的形状，还可以用于定义回调函数、事件处理函数等。通过使用函数类型接口，你可以确保函数的参数和返回值类型符合预期，从而提高代码的可读性和可维护性。

interface EventHandler {
  (event: Event): void;
}

function addEventListener(eventType: string, handler: EventHandler) {
  // 添加事件监听器
}

在这个例子中，EventHandler 接口定义了一个事件处理函数的类型，该函数接受一个 Event 类型的参数，并且没有返回值。通过使用 EventHandler 接口，你可以确保传递给 addEventListener 的函数符合预期的结构。