函数类型

函数类型

// 1.函数类型 
function foo(){
  console.log('foo');
}
type fnType = () => void
function boo(fn:fnType){
  fn()
}
boo(foo)

// 2.定义常量时，编写函数的类型
type addType = (x: number, y: number) => number
const add: addType = (x, y) => {
  return x + y
}

// 案例：定义一个函数，接收两个参数，一个是数字，一个是函数，函数接收两个数字，返回一个数字
function calc(x: number, y: number, fn:(num1:number,num2:number) => number){
  return fn(x,y)
}

calc(1,2,(a,b) => a + b)
calc(1,2,(a,b) => a * b)

函数参数和返回值类型

// 给参数加上类型注解
// 给返回值加上类型注解
// 在开发中，通常情况下可以不写返回值类型，因为ts可以自动推断出返回值类型
function sum(a: number, b: number) {
    return a + b;
}

函数的重载(联合类型)

/**
 * 函数的重载(联合类型)
 * 通过联合类型有两个缺点：
 *  1. 进行很多的逻辑判断（类型缩小）
 *  2.返回值类型不确定
 */
function add(a: number|string, b: number|string){
  if(typeof a === 'number' && typeof b === 'number'){
    return a + b;
  }else if(typeof a === 'string' && typeof b === 'string'){
    return a + b;
  }
};

add(10, 20);

函数的重载(重载)

// 函数的重载：函数名相同，参数不同，返回值不同
function add(num1: number,num2:number): number; // 函数的重载 没有函数体
function add(num1: string,num2:string): string; // 函数的重载 没有函数体

function add(num1: any,num2:any){
  return num1 + num2;
}

const result = add(10, 20);
console.log(result);

const result1 = add('10', '20');
console.log(result1);

// 在函数的重载中，必须要有一个函数是没有函数体的，这个函数就是用来做函数的重载的 实现函数是不能直接调用的
// add({name:'coderlzp'},{age:18})