跳到主要内容

TypeScript 函数接口

介绍​

在 TypeScript 中，接口（Interface）不仅可以用来描述对象的形状，还可以用来描述函数的形状。函数接口是一种定义函数类型的方式，它规定了函数的参数类型和返回值类型。通过使用函数接口，你可以确保函数在调用时遵循特定的签名，从而提高代码的可读性和类型安全性。

基本语法​

函数接口的基本语法如下：

typescript
interface FunctionName {
  (param1: type1, param2: type2, ...): returnType;
}
  • FunctionName 是接口的名称。
  • (param1: type1, param2: type2, ...) 是函数的参数列表及其类型。
  • returnType 是函数的返回值类型。

示例​

以下是一个简单的函数接口示例：

typescript
interface AddFunction {
  (a: number, b: number): number;
}

const add: AddFunction = (a, b) => {
  return a + b;
};

console.log(add(2, 3)); // 输出: 5

在这个例子中，AddFunction 接口定义了一个函数类型，该函数接受两个 number 类型的参数，并返回一个 number 类型的值。add 函数遵循了这个接口的定义。

可选参数与默认参数​

函数接口也可以支持可选参数和默认参数。

可选参数​

typescript
interface GreetFunction {
  (name: string, greeting?: string): string;
}

const greet: GreetFunction = (name, greeting = "Hello") => {
  return `${greeting}, ${name}!`;
};

console.log(greet("Alice")); // 输出: Hello, Alice!
console.log(greet("Bob", "Hi")); // 输出: Hi, Bob!

在这个例子中，greeting 参数是可选的，如果未提供，则使用默认值 "Hello"。

默认参数​

typescript
interface MultiplyFunction {
  (a: number, b?: number): number;
}

const multiply: MultiplyFunction = (a, b = 1) => {
  return a * b;
};

console.log(multiply(5)); // 输出: 5
console.log(multiply(5, 3)); // 输出: 15

在这个例子中，b 参数是可选的，并且有一个默认值 1。

实际应用场景​

函数接口在实际开发中非常有用，特别是在你需要定义回调函数或高阶函数时。

回调函数示例​

typescript
interface CallbackFunction {
  (error: Error | null, result?: any): void;
}

function fetchData(callback: CallbackFunction) {
  // 模拟异步操作
  setTimeout(() => {
    const error = Math.random() > 0.5 ? new Error("Something went wrong") : null;
    const result = error ? null : { data: "Some data" };
    callback(error, result);
  }, 1000);
}

fetchData((error, result) => {
  if (error) {
    console.error("Error:", error.message);
  } else {
    console.log("Result:", result);
  }
});

在这个例子中，CallbackFunction 接口定义了一个回调函数的类型，该回调函数接受一个 Error 对象和一个可选的结果作为参数。

高阶函数示例​

typescript
interface OperationFunction {
  (a: number, b: number): number;
}

function createCalculator(operation: OperationFunction) {
  return (a: number, b: number) => operation(a, b);
}

const add = createCalculator((a, b) => a + b);
const subtract = createCalculator((a, b) => a - b);

console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2

在这个例子中，createCalculator 是一个高阶函数，它接受一个 OperationFunction 类型的函数作为参数，并返回一个新的函数。

总结​

TypeScript 的函数接口提供了一种强大的方式来定义函数的类型，确保函数在调用时遵循特定的签名。通过使用函数接口，你可以提高代码的可读性和类型安全性，特别是在处理回调函数和高阶函数时。

附加资源与练习​

  • 练习: 尝试定义一个函数接口，该接口描述一个接受字符串数组并返回字符串的函数。然后实现这个函数并调用它。
  • 资源: 阅读 TypeScript 官方文档中关于 函数类型 的部分，了解更多高级用法。
提示

在编写函数接口时，尽量保持接口的简洁和明确，避免过度复杂的类型定义。