【TS】函数和函数类型

在使用函数的时候,通常会给函数传值,或者给函数一个返回值调用,这个时候就会涉及到函数类型。
函数类型分为两个方面:
1、函数参数
2、函数返回值
语法: function 函数名( 参数 : 参数类型 ) : 返回值类型 { return 返回值 }
函数有几种不同的写法,分别为:声明函数、匿名函数。

声明函数: 也称为函数声明命名函数,下面是声明函数的写法:

  function add ( x : number ,y : number) : number {
    return x + y
  }
  console.log(add(1,2));  // 打印 3

函数add需要两个参数,xy,并且这两个参数的类型都为数字,且这个函数必须有一个返回值,返回值为numberadd() : number 这个 number 就是返回值规定的类型。


匿名函数: 也称为匿名函数函数表达式,以表达式的形式呈现,写法跟声明函数一样,在括号内规定数据类型,括号外面规定返回值类型。

const add2 = function ( x : number , y : number ) : number {
    return  x + y
}
console.log(add2(3,3)); // 打印 6

函数add需要两个参数,xy,并且这两个参数的类型都为数字,且这个函数必须有一个返回值,返回值为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

你可能感兴趣的:(TypeScript,javascript,前端,vue.js,typescript)