1. 函数的4种定义方式
  2. TS对函数参数的要求
  3. 函数参数-可选参数,默认值,剩余参数
  4. 函数重载

函数的4中定义方式

  • 使用function定义函数
    • 需要明确指出参数的类型
    • 依靠TS的类型推断,函数返回值类型可省略
  • 通过一个变量定义一个函数类型
  • 通过类型别名定义一个函数类型
  • 通过接口定义一个函数类型

    注意:后三种仅仅是定义了函数类型,没有具体实现,调用前需要编写函数体进行实现

  1. // 使用function定义函数
  2. function add1(x: number, y: number) {
  3.   return x + y;
  4. }
  6. // 通过一个变量定义一个函数类型
  7. let add2: (x: number, y: number) => number;
  9. // 通过类型别名定义一个函数类型
  10. type add3 = (x: number, y: number) => number;
  12. // 通过接口定义一个函数类型
  13. interface add4 {
  14.   (x: number, y: number): number;
  15. }

TS对函数参数的要求

在 js 中,对函数参数的个数是没有限制的 而在 ts 中,形参和实参必须一一对应,多参少参,都会提示缺少参数

  • 少传参时,会提示缺少参数:

    image.png

  • 多传参时

    image.png

    函数参数

    可选参数

    当需要参数可传可不传时,可以设置为可选参数 和设置对象类型接口的可选属性相似,也是使用参数名+?进行设置

  1. function add5(x: number, y?: number) {
  2.     return y ? x + y : x;
  3. }
  4. add5(1);
  6. function add5_1(x: number, y?: number, z: number) {
  7.     return y ? x + y + z : x + z;
  8. }

注意：可选参数只能位于必选参数之后
image.png

默认值

  1. // 参数默认值
  2. function add6(x: number, y = 0, z: number, q = 1) {
  3.     return x + y + z + q;
  4. }
  5. // 在必选参数前,默认参数是不可以省略的
  6. // 必须明确传入undefined来获取他的默认值,否则会造成参数赋值错位
  7. console.log(add6(1, undefined, 3)); // 5

剩余参数

当参数不固定时,可以使用剩余参数 和 es6 相同,剩余参数以数组形式存在

  1. // 剩余参数
  2. function add7(x: number, ...rest: number[]) {
  3.     return x + rest.reduce((pre, cur) => pre + cur);
  4. }
  5. console.log(add7(1, 2, 3, 4, 5)); // 15

函数重载

定义：当两个函数名称相同,参数个数,类型不同时,就实现了函数重载 优势：不需要再单纯的为了相似功能函数选用不同的函数名称,增强了函数的可读性 TS中的函数重载： 函数支持多个参数,如果是数字返回所有参数和,如果是字符串返回字符串拼接

  1. // 先定义一组相同名称的函数声明(重载列表)
  2. // 然后,在一个类型最宽泛的版本中实现重载,再定义一个相同名称的数组
  4. // 函数重载
  5. function add8(...rest: number[]): number;
  6. function add8(...rest: string[]): string;
  7. function add8(...rest: any[]): any {
  8.     let first = rest[0];
  9.     if (typeof first === "string") {
  10.         return rest.join("");
  11.     }
  12.     if (typeof first === "number") {
  13.         return rest.reduce((pre, cur) => pre + cur);
  14.     }
  15. }
  16. console.log(add8(1, 2, 3)); // 6
  17. console.log(add8("a", "b", "c")); // abc

TS编译器在处理函数重载时,会先查询重载列表(就是前面定义的列表), 按顺序进行尝试,选择最先匹配的函数定义,所以需要将最容易匹配的函数定义写在最前面

学习笔记出自于梁宵老师课程