具有通用类型的 Typescript 包装函数

标签 typescript typescript-generics

如何在不更改 Typescript 中的泛型类型的情况下包装函数?

function x() {
  console.log('Original Function');
}

function wrapper<T extends Function>(func: T): T {
  // Typescript compiler error:
  // Type '() => void' is not assignable to type 'T'.
  return () => {
    console.log('Wrapped Function');
    func.call(null);
  }
}

const xWrapped = wrapper(x);
xWrapped(); // logged 'Wrapped Function' & 'Original Function'

最佳答案

这里有一个替代方案,它保留参数并返回内部函数的类型,而不依赖于可变参数类型。

function x(message: string): void {
    console.log(`inner ${message}`);
}

export function wrapper<Args extends any[], Return>(
    operation: (...operationParameters: Args) => Return, 
    ...parameters: Args
): Return {
    console.log(`outer `);

    return operation(...parameters);
}

x("abc");
wrapper(x, "xyz");

// output:
//
// inner abc
// outer
// inner xyz

wrapperx 调用, TS 编译器将其类型推断为 function wrapper<[string], void>(operation: (operationParameters_0: string) => void, parameters_0: string): void .

如果您尝试调用 wrapper(x, 123) ,它以漂亮的类型安全失败:Argument of type '123' is not assignable to parameter of type 'string'.

关于具有通用类型的 Typescript 包装函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45020874/

相关文章:

javascript - 为什么我无法在 Angular 5 和 TypeScript 中使文本区域部分不可编辑?

Typescript 实现接受多种类型输入的通用函数

reactjs - Typescript 中 React 组件的通用参数数量可变

TypeScript:读取对象中值的通用类型

typescript - 我可以将字符串文字映射到类型的类型吗?

angular - 从 Angular 对话框模板提交表单

javascript - 如何检查响应是否属于特定接口(interface)类型?

reactjs - 将 react-redux useSelector 与 typescript 一起使用

javascript - Angular 2如何从对象数组中获取键值?

typescript - 将泛型类型限制为 Typescript 中的几个类之一