在使用函数的时候,通常会给函数传值,或者给函数一个返回值调用,这个时候就会涉及到函数类型。
函数类型分为两个方面:
1、函数参数
2、函数返回值
语法: function 函数名( 参数 : 参数类型 ) : 返回值类型 { return 返回值 }
函数有几种不同的写法,分别为:声明函数、匿名函数。
声明函数: 也称为函数声明
、命名函数
,下面是声明函数的写法:
function add ( x : number ,y : number) : number {
return x + y
}
console.log(add(1,2)); // 打印 3
函数add
需要两个参数,x
和y
,并且这两个参数的类型都为数字,且这个函数必须有一个返回值,返回值为number
。 add() : number
这个 number
就是返回值规定的类型。
匿名函数: 也称为匿名函数
,函数表达式
,以表达式的形式呈现,写法跟声明函数一样,在括号内规定数据类型,括号外面规定返回值类型。
const add2 = function ( x : number , y : number ) : number {
return x + y
}
console.log(add2(3,3)); // 打印 6
函数add需要两个参数,x
和y
,并且这两个参数的类型都为数字,且这个函数必须有一个返回值,返回值为number。 add() : number
这个 number
就是返回值规定的类型。
无返回值
并不是所有的函数都有返回值,函数可以没有返回值,如果没有返回值,或者返回值为空,在函数()
后面: () : xxx
换成void
即可,void
就是无返回值,写成any
也行,any
可以返回任何类型。
// 无返回值 无返回值使用 void 或 any 即可
const emptys = ( params : number) : void => {
console.log(params);
}
emptys(2)
函数类型的完整写法
const add3 : ( x : number , y : number ) => number = function ( x : number , y : number ) : number {
return x + y
}
console.log(add3(10,10)); // 打印 20
步骤拆解:
1、add3 : ( x : number , y : number ) : number
这里为规定的函数类型,在这个地方定义了后,函数里面传参必须符合这里定义的规则。传两个参数
,类型为number
,返回值为number
。
2、function ( x : number , y : number ) : number { return x + y }
这里就是给函数传参和函数返回值类型规范,这里的规范必须符合前面定义的规范,否则报错。
一般不会用这种写法, 比较繁琐,这里只是举例说明一下。
函数类型使用接口
在函数类型传参中,既然在传参这里规定了数据类型,直接写在函数体上比便于阅读,看起来复杂且长,所以可以使用接口来优化代码,使阅读起来更加简洁。
// 定义接口
interface IPerson {
username : string
age : number
}
const person = (data : IPerson) : string => {
return `姓名:${data.username},年龄:${data.age}`
}
在person
函数中,传入的值必须是符合 IPerson
接口的规范,函数必须有返回值,返回值为 string
类型
// 参数
let obj = {
username : '东方不败',
age : 18
}
console.log(person(obj)); // 打印 姓名:东方不败,年龄:18
另外,接口是可以继承的,也就是说可以将多个接口组装成一个新的接口,在函数类型中使用这个接口,来大大减少类型规范方面的代码量。关于接口继承方面,请看另一篇【TS】接口和接口继承。
案例源码:https://gitee.com/wang_fan_w/ts-seminar
如果觉得这篇文章对你有帮助,欢迎点亮一下star