TypeScript 获取函数的参数类型、返回值类型及定义返回函数类型

 更新时间:2025年06月27日 11:01:05   作者:ZHWenDong  
这篇文章主要介绍了TypeScript 获取函数的参数类型、返回值类型及定义返回函数类型,需要的朋友可以参考下

事例:

function test(lzwme: string, idx: number) {
  return {
    lzwme,
    idx,
  };
}

1 获取函数的参数类型

使用预定义的 Parameters 可以获取到一个函数的参数类型列表。
获取 test 函数的参数类型:

type TestArgsType = Parameters<typeof test>;
// TestArgsType => [lzwme: string, idx: number]

获取 idx 参数的类型:

type TestArgsType = Parameters<typeof test>[1];
// TestArgsType => idx: number

我们看一下 Parameters 的定义:

type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

我们可以看到,其实它主要是通过 infer P 获取到 T 的参数类型列表 P 并返回,如果 T 不是函数则返回 never

2 获取函数的返回值类型

使用预定义的 ReturnType 可以获取到一个函数的参数类型列表。

获取 test 函数的返回值类型:

type TestReturnType = ReturnType<typeof test>;

我们再看一下 ReturnType 的定义:

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

与 Parameters 十分类似,不同的是通过 infer R 获取并返回 T 的返回值类型。

TypeScript定义返回函数类型

一般函数声明:

//第一种形式
let c: Function;
c = function(): void {
console.log('It work');
}

//第二种形式
function test(): Function{
return function():void{
console.log('it work');
}
}

let a:Function = test();
a();

//第三种形式,箭头函数
let d: (para: string) => string;
d = function(param: string): string {
return param;
}

//第四种形式,类型别名,箭头函数
type e = (para: string) => string;
const f:e = function(pass: string): string{

return pass;

}

//第五种形式,接口
interface g{
(para: string): string;
}
const h: g = function(pass: string): string{
return pass;
}

箭头函数:

其实这里只是涉及一个简单的声明定义而已。

正如:

let myAdd: (x:number, y:number) => number =
function(x: number, y: number): number { return x + y; };

只是一个函数类型声明(或匿名函数),如果我们用一个简单的变量声明定义,那其完整格式如下:

let x: number = 10;

其上的 number 部分相当于开头的 (x:number, y:number) => number,这一部分即是类型(或函数类型),只是一种定义;哪怕你使用:

let myAdd: (aaaaaaaaaaaaaaaaaaaaaa:number, bbbbbbbbbbbbbbbbbbbbbbbb:number) => number =
function(x: number, y: number): number { return x + y; };

也是可以的。

同样,一个变量的声明定义也可以是这样:

let x = 10;

这一点自然是归咎于TS自动推导能力了。因此,如上也可以简化成:

const myAdd = (x: number, y: number) =&gt; x + y;

= 的前部分一样省略了,交由ts自动推导;而后,就是一个实际的匿名函数写法了。

以上就是TypeScript 获取函数的参数类型、返回值类型及定义返回函数类型的详细内容,更多关于TypeScript 获取函数的参数类型、返回值类型及定义返回函数类型的资料请关注脚本之家其它相关文章!

相关文章

  • 解决layui-open关闭自身窗口的问题

    解决layui-open关闭自身窗口的问题

    今天小编就为大家分享一篇解决layui-open关闭自身窗口的问题,具有好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • bootstrap Table实现合并相同行

    bootstrap Table实现合并相同行

    这篇文章主要为大家详细介绍了bootstrapTable实现合并相同行,fastadmin框架同样使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 浅谈redux, koa, express 中间件实现对比解析

    浅谈redux, koa, express 中间件实现对比解析

    这篇文章主要介绍了浅谈redux, koa, express 中间件实现对比解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 跨域资源共享 CORS 详解

    跨域资源共享 CORS 详解

    所有浏览器都支持该功能IE浏览器不能低于IE10.整个CORS通信过程都是浏览器自动完成不需要用户参与。对于开发者来说CORS通信与同源的AJAX通信没有差别代码完全一样浏览器一旦发现AJAX请求跨源就会自动添加一些附加的头信息有时还会多出一次附加的请求,但用户不会有感觉。
    2016-04-04
  • 如何创建一个JavaScript弹出DIV窗口层的效果

    如何创建一个JavaScript弹出DIV窗口层的效果

    我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果
    2013-09-09
  • 详解javascript中对数据格式化的思考

    详解javascript中对数据格式化的思考

    本篇文章主要介绍了详解javascript中对数据文本格式化的思考 ,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • JavaScript:ES2019 的新特性(译)

    JavaScript:ES2019 的新特性(译)

    这篇文章主要介绍了JavaScript:ES2019 的新特性(译),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • javascript跨域总结之window.name实现的跨域数据传输

    javascript跨域总结之window.name实现的跨域数据传输

    本文给大家介绍window.name实现的跨域数据传输,自己亲自实践了一下,真的非常好用,特此分享到脚本之家网站供大家参考
    2015-11-11
  • 返回页面顶部top按钮通过锚点实现(自写)

    返回页面顶部top按钮通过锚点实现(自写)

    用户在使用系统时,会有很多表单的操作然而很多表单就会很长,所以就需要一个返回页面顶部的top按钮啦,于是自己写了一个,喜欢的朋友可以参考下
    2013-08-08
  • 基于JavaScript实现瀑布流效果(循环渐近)

    基于JavaScript实现瀑布流效果(循环渐近)

    本文给大家介绍基于javascript实现循环渐近瀑布流效果,代码简单易懂,非常具有参考价值,需要的朋友参考下吧
    2016-01-01

最新评论