乐趣区

关于前端:TS函数和函数类型

jiezi

在应用函数的时候，通常会给函数传值，或者给函数一个返回值调用，这个时候就会波及到函数类型。
函数类型分为两个方面：
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

退出移动版