1.16 一个接受函数作为参数的高阶函数，其声明规范是怎样的？

在 TypeScript 中，一个接受函数作为参数的高阶函数应该充分利用类型系统来确保类型安全和函数的可读性。通过明确声明参数和返回值的类型，我们可以提高代码的可靠性和可维护性。

要声明一个接受函数作为参数的高阶函数，我们需要使用 TypeScript 提供的函数类型和泛型（如果需要）来定义参数和返回类型。

基本结构

// 泛型类型参数 F 代表传入的函数类型，R 代表返回的函数类型
type HigherOrderFunction<F, R> = (func: F) => R;

示例一：接受一个单参数函数并返回一个函数

一个简单的例子是接受一个单参数函数作为参数，再返回一个对原函数增强后的新函数。

// 声明接受单参数函数的高阶函数类型
type SimpleFunction = (x: number) => number;
 
const higherOrderFunction: HigherOrderFunction<SimpleFunction, SimpleFunction> = (func: SimpleFunction): SimpleFunction => {
  return (x: number) => {
    console.log(`Input value: ${x}`);
    const result = func(x);
    console.log(`Result value: ${result}`);
    return result;
  };
};
 
// 示例函数
const double = (x: number) => x * 2;
 
// 使用高阶函数
const enhancedDouble = higherOrderFunction(double);
console.log(enhancedDouble(5)); // 输出: Input value: 5, Result value: 10, 10

示例二：接受一个多参数函数并返回一个新函数

如果高阶函数接受的是一个多参数函数，我们可以使用泛型来通用化处理。

// 声明多参数函数的类型
type MultiArgFunction = (x: number, y: number) => number;
 
const higherOrderMultiArgFunction: HigherOrderFunction<MultiArgFunction, MultiArgFunction> = (func: MultiArgFunction): MultiArgFunction => {
  return (x: number, y: number) => {
    console.log(`Input values: ${x}, ${y}`);
    const result = func(x, y);
    console.log(`Result value: ${result}`);
    return result;
  };
};
 
// 示例函数
const add = (x: number, y: number) => x + y;
 
// 使用高阶函数
const enhancedAdd = higherOrderMultiArgFunction(add);
console.log(enhancedAdd(3, 7)); // 输出: Input values: 3, 7, Result value: 10, 10

示例三：泛型高阶函数

对于更加通用的高阶函数，我们可以使用泛型来处理不同类型的参数和返回值。

// 定义通用的高阶函数类型
type GenericFunction<T, R> = (arg: T) => R;
 
const genericHigherOrderFunction = <T, R>(func: GenericFunction<T, R>): GenericFunction<T, R> => {
  return (arg: T) => {
    console.log(`Input value: ${JSON.stringify(arg)}`);
    const result = func(arg);
    console.log(`Result value: ${JSON.stringify(result)}`);
    return result;
  };
};
 
// 示例函数
const lengthOfString = (str: string) => str.length;
const stringifyNumber = (num: number) => num.toString();
 
// 使用高阶函数
const enhancedLengthOfString = genericHigherOrderFunction(lengthOfString);
const enhancedStringifyNumber = genericHigherOrderFunction(stringifyNumber);
 
console.log(enhancedLengthOfString("Hello")); // 输出: Input value: "Hello", Result value: 5, 5
console.log(enhancedStringifyNumber(12345)); // 输出: Input value: 12345, Result value: "12345", "12345"

示例四：类型为回调函数的高阶函数

高阶函数经常用于处理回调函数，这种情况下我们可以进一步明确回调函数的类型。

// 定义回调函数类型
type CallbackFunction = (err: Error | null, result?: any) => void;
 
const higherOrderWithCallback = (func: (callback: CallbackFunction) => void) => {
  return (callback: CallbackFunction) => {
    console.log("Before executing function");
    func((err, result) => {
      if (err) {
        console.error("Error occurred:", err);
        callback(err);
      } else {
        console.log("Result obtained:", result);
        callback(null, result);
      }
    });
    console.log("After executing function");
  };
};
 
// 示例异步函数
const asyncFunction = (callback: CallbackFunction) => {
  setTimeout(() => {
    callback(null, "Success");
  }, 1000);
};
 
// 使用高阶函数
const enhancedAsyncFunction = higherOrderWithCallback(asyncFunction);
enhancedAsyncFunction((err, result) => {
  if (err) {
    console.error(err);
  } else {
    console.log(result); // 输出: Success
  }
});

总结

通过这些示例，我们可以看到如何在 TypeScript 中定义并使用接受函数作为参数的高阶函数。关键在于充分利用 TypeScript 的类型系统，包括函数类型和泛型，以提高代码的类型安全性和可读性。

基本结构：使用函数类型来声明高阶函数。
单参数函数：处理单参数函数并返回增强函数。
多参数函数：处理多参数函数，利用泛型通用化。
泛型高阶函数：实现更加通用的高阶函数。
回调函数：结合高阶函数和回调函数处理异步逻辑。

希望这些示例能帮助你理解 TypeScript 中高阶函数的声明和使用。如果你有任何问题或进一步的需求，请随时提问！

Woodman's Second Brain | 第二大脑

探索