TypeScript类型体操--为函数追加参数

大家好,我是苏先生,2024年我的第一愿景就是做一个可行的副业,求大佬带我~~

好文推荐

前言

前边几篇文章我们一共实现了42 个工具类型,按照本专栏的规划,还差57个...

本节我们继续学习一个新的工具类型

提示

对于语法层面的知识点本系列(类型体操开头的标题)不会展开说明哈,可以自行搜索学习其他大佬的优质文章或者等我后续更新补充

题目

实现

首先,为其确定名称和参数

ts 复制代码
type AppendArgument<T,U>

泛型参数部分,T是要被扩展的函数,U则是新的函数要追加的参数,显然,T应该是函数类型,U则为任意类型

ts 复制代码
type AppendArgument<T extends Function, U>

对于TypeScript而言,函数的运行逻辑是不需要我们关心的,只需要关注入参和返回值类型即可。想要拿到对应的参数,需要使用infer,而infer的前置条件是extends

故,需要构建条件类型

ts 复制代码
type AppendArgument<T extends Function, U> = T extends (...args:infer P)=>infer R ? ... : ...

显然,当条件成立的时候,拿推断出来的P和R与U组装成一个新的函数类型返回,不成立的时候给never即可

ts 复制代码
?(...args:[...P,A])=>R:never

故完整实现如下

ts 复制代码
type AppendArgument<T extends Function, U> = 
  T extends (...args:infer P)=>infer R 
  ?
    (...args:[...P,U])=>R
  :
    never

使用示例如下

下期预告

  • 【知识点】巧用装饰器自动修正TypeScript中的类this指向

  • 【类型体操】斐波那契序列

根据参数T返回其对应的斐波那契数

ts 复制代码
type Result1 = Fibonacci<3> // 2
type Result2 = Fibonacci<8> // 21

如果本文对您有用,希望能得到您的点赞和收藏

订阅专栏 ,每更新1-2篇类型体操,等你哟😎

相关推荐
行走的陀螺仪1 小时前
高级前端 Input 公共组件设计方案(Vue3 + TypeScript)
前端·javascript·typescript·vue·组件设计方案
by__csdn6 小时前
微前端架构:从理论到实践的全面解析
前端·javascript·vue.js·架构·typescript·vue·ecmascript
Hao_Harrision14 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨| RandomChoicePicker(标签生成)
前端·typescript·react·vite7·tailwildcss
Hao_Harrision14 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨| FAQ Collapse(问题解答折叠面板)
前端·typescript·react·vite7·tailwildcss
by__csdn15 小时前
javascript 性能优化实战:垃圾回收优化
java·开发语言·javascript·jvm·vue.js·性能优化·typescript
by__csdn15 小时前
JavaScript性能优化:减少重绘和回流(Reflow和Repaint)
开发语言·前端·javascript·vue.js·性能优化·typescript·vue
凯小默15 小时前
【TypeScript+Vue3+Vite+Vue-router+Vuex+Mock 进行 WEB 前端项目实战】学习笔记共 89 篇(完结)
typescript·echarts·mock·vue3·vite·vuex·vue-router
深兰科技16 小时前
坦桑尼亚与新加坡代表团到访深兰科技,促进AI在多领域的应用落地
java·人工智能·typescript·scala·perl·ai大模型·深兰科技
今天不要写bug1 天前
vue项目基于vue-cropper实现图片裁剪与图片压缩
前端·javascript·vue.js·typescript
ttod_qzstudio1 天前
Vue 3 + TypeScript 严格模式下的 Performance.now() 实践:构建高性能前端应用
typescript·performance