Typescript知识点 --- （4）函数

Web分享

2020-01-14

1、函数的定义方式（4种）

// （1）、命名函数
function add1(x: number, y: number): number {
  return x + y;
}

// （2）、匿名函数
let add2:(x: number, y: number) => number = function(x: number, y: number) {
  return x + y;
}

// （3）、类型别名
type add3 = (x: number, y: number) => number

// （4）、接口
interface add4 {
  (x: number, y: number): number
}

js中每个参数都是可选的，可传可不传，没传参时的值就是 undefined；ts中形参和实参的类型和数量必须一一对应

function add(x: number, y: number) {
  return x + y;
}

add(1, 2);
add(1, 2, 3);   // 应有 2 个参数，但获得 3 个
add(‘1‘, 2);    // 类型“"1"”的参数不能赋给类型“number”的参数
add(1);         // 应有 2 个参数，但获得 1 个

2、可选参数

ts中我们可以在参数名后面使用 ? 实现可选参数的功能，可选参数必须跟在必须参数后面

function add(x: number, y?: number) {
  return y ? x + y : x
}
add(1);

// error: 必选参数不能位于可选参数后
function add2(x: number, y?: number, z: number) {
  return x + y + z;
}


3、默认参数
 
ts中我们也可以为参数提供一个默认值，使用默认参数需注意两点：
（1）、如果带默认值的参数出现在必须参数之前，必须手动传入 undefined 来获得默认值
（2）、如果带默认值的参数后面没有必须参数，则无须传入任何内容就可以获得默认值

function add(a: number, b=1, c: number, d=2) {
  return a + b + c + d;
}

console.log(add(3, undefined, 4));  // 10 (3+1+4+2)
console.log(add(1, 2, 3, 4));       // 10 (1+2+3+4)
console.log(add(1, 2, 3));          // 8  (1+2+3+2) 
console.log(add(1,2));   // Expected 3-4 arguments, but got 2.

 
4、剩余参数
剩余参数会被当做个数不限的可选参数，需要放在参数列表的最后面

function add1(x: number, ...restParams: number[]) {
  return x + restParams.reduce((pre, cur) => pre + cur)
}

console.log(add1(1, 2, 3, 4));    // 10


5、重载
 
所谓重载，指的是不同函数使用相同的函数名，但是函数的参数个数或类型不同，返回类型可以相同也可以不同。调用的时候，根据函数的参数来区别不同的函数
 
重载的好处是不需要为了功能相近的函数使用选用不同的函数名称，以此来提高函数的可读性
 
ts中的重载要求我们先定义一系列名称相同的函数声明（即重载列表），并且在定义重载的时候，一定要把最精确的定义放在前面

function overload(...restParams: number[]): number;

function overload(...restParams: string[]): string;

function overload(...restParams: any[]) {
  let firstParam = restParams[0];
  if(typeof firstParam === ‘number‘) {
    return restParams.reduce((prev, curr) => prev + curr);
  }
  if(typeof firstParam === ‘string‘) {
    return restParams.join(‘‘);
  }
}

console.log(‘传入数字参数，返回求和: ‘, overload(1, 2, 3));
// 传入数字参数，返回求和:  6

console.log(‘传入字符参数，返回拼接: ‘, overload(‘a‘, ‘b‘, ‘c‘));
// 传入字符参数，返回拼接:  abc

typescript