【TS】函数和函数类型

在使用函数的时候，通常会给函数传值，或者给函数一个返回值调用，这个时候就会涉及到函数类型。

函数类型分为两个方面：

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