如何优雅的给柯里化函数添加类型标注

2023-08-24
北京
本文字数：1314 字
阅读完需：约 4 分钟

写在前面

首先介绍一下什么叫函数柯里化：函数柯里化是一种常见的函数式编程技术，它可以将一个接受多个参数的函数转化为一系列只接受单个参数的函数，这些函数可以被组合使用。

例如：

declare function curry(fn: Function): Functionfunction sum(a: number, b: number, c: number) {    return a + b + c;}const currySum = curry(sum);const result = currySum(1)(2)(3);

复制代码

抛出问题

如果我们像上面那样给柯里化函数添加类型标注会有什么问题吗？

首先像上面那样给柯里化函数添加类型标注不够友好，其次上面的类型标注只能告诉使用者入参是个函数，返回值是个函数，返回函数再调用时需要哪些参数，有什么返回值我们都是不知道的，即使我们参数类型写错，参数个数写错也不会有提示，失去了使用 TS 的意义。

解决问题

既然上面那样写不友好我们又该如何优雅的给柯里化函数添加类型标注呢？

我们观察上面的 curry 函数，发现返回的 Function 是和传入的 Function 有关系的，那我们要如何把两个的关系关联起来呢？这就需要用到泛型了，首先我们看传入的函数，函数无非就是有入参和返回值两个类型，这样我们可以定义两个类型，并且把函数类型展开来写，如下：

declare function curry<A extends any[], R>(fn: (...args: A) => R): Functionfunction sum(a: number, b: number, c: number) {    return a + b + c;}const currySum = curry(sum);const result = currySum(1)(2)(3);

复制代码

我们看到，我们定义了 A 和 R 两个泛型，A 代表入参的类型，R 代表返回值类型，借助 TS 类型推导我们就可以知道入参的类型了。接下来我们考虑返回值的类型，返回值无非有以下几种情况：

如果入参函数没有参数，则返回的函数也不需要函数可以直接执行 ()=>R
如果入参函数有一个参数，则返回的函数也得需要一个参数(x)=>R
如果入参函数有多个参数，则返回的函数需要接收一个参数并且返回一个新的函数 (x)=>新的函数

那么我们就根据上面的几种情况来实现一下返回值的类型标注，为了看起来方便，我把返回值的类型重新定义一个类型：

/** * 1.() => R * 2.(x) => R * 3.(x) => 新的函数 */type Curried<A, R> = A extends []    ? () => R    : A extends [infer ARG]        ? (params: ARG) => R        : A extends [infer ARG, ...infer REST]            ? (params: ARG) => Curried<REST, R>            : never

复制代码

我们用三目运算符来进行几种情况判断，实现出来返回类型如上面，接收两个泛型，根据上面的三种情况依次判断，如果是多个参数则递归调用 Curried。

完整的代码如下：

/** * 1.() => R * 2.(x) => R * 3.(x) => 新的函数 */type Curried<A, R> = A extends []    ? () => R    : A extends [infer ARG]        ? (params: ARG) => R        : A extends [infer ARG, ...infer REST]            ? (params: ARG) => Curried<REST, R>            : never

declare function curry<A extends any[], R>(fn: (...args: A) => R): Curried<A, R>function sum(a: number, b: number, c: number) {    return a + b + c;}const currySum = curry(sum);const result = currySum(1)(2)(3);

复制代码

到此我们就优雅的实现了给柯里化函数添加类型标注了。

发布于: 刚刚阅读数: 4

汽车之家客户端前端团队

关注

前端技术创新体验优化分享经验共同进步 2018-11-25 加入

通过技术的创新和优化，为用户创造更好的使用体验，并与更多的前端开发者分享我们的经验和成果。我们欢迎对前端开发感兴趣的朋友加入我们的团队，一同探讨技术，共同进步。

发布

暂无评论

创作场景

如何优雅的给柯里化函数添加类型标注

写在前面

抛出问题

解决问题

汽车之家客户端前端团队

评论