• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript定义函数类型

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

函数类型

为函数定义类型

给函数定义类型,包括对参数和返回值的类型定义:

function add(arg1: number, arg2: number): number {
  return arg1 + arg2
}

// 箭头函数
const add = (arg1: number, arg2:number):number => {
  return arg1 + arg2
}

如果这里省略参数的类型,typescript 会默认这个参数是 any 类型;如果省略返回值的类型,那么当函数无返回值时,typescript 默认函数返回值是 void 类型,当函数有返回值时,typescript 会根据我们定义的逻辑推断出返回值的类型。

 

完整的函数类型

可以定义一个完整的函数类型,它包括参数类型和返回值类型,如下:

// 定义变量 add,指定类型为 (x: number, y: number)=> number
let add:(x: number, y: number)=> number

// 给变量赋值函数,其符合上面定义的函数类型
add = (arg1: number, arg2: number) => arg1 + arg2

可以看到函数类型中的参数名和实际函数的参数名不一致,这里需要注意,只要参数类型是匹配的,那么就认为它是有效的函数类型,而不在乎参数名是否正确。

 

使用接口定义函数类型

使用接口可以清晰地定义函数类型:

interface Add{
  (x: number, y: number): number
}

let add:Add = (arg1: number, arg2: number): number => arg1 + arg2

 

使用类型别名定义函数

类型别名是使用 type 关键字定义一个类型,可以用来定义函数类型:

type Add = (x: number, y: number) => number

let add:Add = (arg1: number, arg2: number): number => arg1 + arg2

 

函数参数

可选参数

定义函数类型时,使用 ? 来指定可选参数,但需要注意的是,可选参数必须放在必须参数后面,这跟在接口中定义可选参数不一样,在定义接口时,可选参数的位置在前在后都无所谓。

// error,x 是可选参数,放在必选参数 y 之前是错误的
type Add = (x?: number, y: number) => number

 

默认参数

默认参数与在 es6 中的实现一样,直接用 = 给出默认值。需要注意两个地方:一是默认参数的位置不讲究,它放在必选参数前后都行;二是当给默认参数指定默认值时,typescript 会识别默认参数的类型,当我们在调用函数时,如果给这个带默认值的参数传来别的类型的参数时则会报错:

let add = (x: number, y = 2) => {
  return x + y
}

add(1, '2') // error,类型“"2"”的参数不能赋给类型“number”的参数

 

可以显示地给默认参数指定类型:

let add = (x: number, y: number = 2) => {
  return x + y
}

 

剩余参数

对于不知道会传入多少参数的函数来说,在 javascript 中会使用 arguments 来获取参数列表。在 typescript 中,使用跟 es6 中一样的 ... 来将剩余参数收集到一个变量中。

const handleData = (arg1, ...arg2) => {
  console.log(arg2)
}

handleData(1,2,3,4,5,6) // [2,3,4,5,6]

 

给参数指定类型:

const handleData = (arg1: number, ...arg2: number[]) => {
  console.log(arg2)
}

 

函数重载

在一些强类型语言中,函数重载是指定义几个函数名相同,但参数个数或类型不同的函数,在调用时传入不同的参数,编译器会自动调用适合的函数。而在 javascript 中,是没有函数重载的,我们可以在函数内部判断参数的个数和类型来指定不同的处理逻辑。

const handleData = (value: any)=>{
  if(typeof value === 'string'){
    return value.split('')
  }else{
    return value.toString().split('').join('_')
  }
}

console.log(handleData('hello')) // ["h", "e", "l", "l", "o"]

console.log(handleData(123)) // 1_2_3

 

我们需要将上面这种情况在类型系统中表示出来。在 typescript 中有函数重载的概念,但不是定义几个同名实体函数,而是通过为一个函数指定多个函数类型定义,从而对函数调用的返回值进行检查。代码如下:

function handleData(value: string): string[]
function handleData(value: number): string
function handleData(value: any):any {
  if(typeof value === 'string'){
    return value.split('')
  }else{
    return value.toString().split('').join('_')
  }
}

console.log(handleData('hello')) // ["h", "e", "l", "l", "o"]

console.log(handleData(123)) // 1_2_3

console.log(handleData(false)) // error,类型“false”的参数不能赋给类型“string”的参数,类型“false”的参数不能赋给类型“number”的参数

首先使用 function 关键字定义了两个同名函数,这两个函数没有实际的函数体逻辑,只定义了函数名,参数及参数类型以及函数的返回值类型,这两个定义称为 “函数重载”。第三个使用 function 定义的同名函数,是一个完整的实体函数,它不算重载。这三个定义组成一个函数。当函数调用时,会从上到下匹配重载,当匹配不到时会报错。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Typescript安装发布时间:2022-07-18
下一篇:
用Typescript开发NodeJS项目发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap