02_TypeScript中的函数es5中定义函数的方法函数声明法匿名函数法ts中定义函数的方法函数声明法匿名函数法le

es5中定义函数的方法

函数声明法

function f1() {
  console.log('f1');
}

匿名函数法

let f2 = function(){
  	console.log('f2');
}

ts中定义函数的方法

函数声明法

function f3():string { //在ts中函数的返回值也需要定义一下，这里定义的返回值是string，所以return返回值只能是字符串类型的数据
	return 'f3.string'
}

//错误写法
function f4():string { //可以看到这里定义函数返回值是字符串类型，返回值确实数字类型，所以是错的
     return 123
 }

匿名函数法

let f4 = function ():number { return 111 } f4(); ```

ts中定义方法传参

ts中定义方法传参,控制每个参数的数据类型，同时需要定义函数返回值

函数声明法传递参数

function getUserInfo(name:string,age:number):string { //这里需要传递两个参数，第一个参数name是字符串类型，第二个参数age的类型是数字类型，同时函数也有返回值，字符串类型的返回值
	return `${name}---${age}` //这里使用的是`${}`模版字符串进行的拼接方式，不明白这里的操作直接搜模版字符串就可以了
}
console.log(getUserInfo('zhangsan', 20)); //这里调用getUserInfo方法，传递参数的时候必须按照两个参数的数据类型传递。第一个参数必须是字符串，第二个参数必须是数字
console.log(getUserInfo('zhangsan', '20')); //错误写法，第二个参数的类型变成了字符串类型

//参数可以是任意类型
function getUserInfo2(name:any,age:any):string { //这里需要传递两个参数，两个参数可以是任意类型
  	return `${name}---${age}` 
}
console.log(getUserInfo2('zhangsan', 20)); //这里调用getUserInfo方法，传递参数的时候可以是任意类型
console.log(getUserInfo2('zhangsan', '20')); //正确写法，第二个参数的类型变成了字符串类型

匿名函数法传递参数

let getInfo = function (name:string,age:number):string { //这里需要传递两个参数，第一个参数name是字符串类型，第二个参数age的类型是数字类型，同时函数也有返回值，字符串类型的返回值
	return `${name}---${age}` //这里使用的是`${}`模版字符串进行的拼接方式，不明白这里的操作直接搜模版字符串就可以了
}
console.log(getInfo('zhangsan', 20)); //这里调用getUserInfo方法，传递参数的时候必须按照两个参数的数据类型传递。第一个参数必须是字符串，第二个参数必须是数字
console.log(getUserInfo('zhangsan', '20')); //错误写法，第二个参数的类型变成了字符串类型

//参数可以是任意类型
let getInfo2 = function (name:any,age:any):string { //这里需要传递两个参数，两个参数可以是任意类型
  	return `${name}---${age}` 
}
console.log(getInfo2('zhangsan', 20)); //这里调用getUserInfo方法，传递参数的时候可以是任意类型
console.log(getInfo2('zhangsan', '20')); //正确写法，第二个参数的类型变成了字符串类型

函数没有返回值的方法

void类型，表示没有任何类型，一般用于定义方法的时候该方法没有返回值，在数据类型里面介绍过这个用法

  function f5():void {
      console.log('f5没有返回值');
  }
  console.log(f5());
  
  //同时也可以是传递参数的没有返回值的函数。函数命名法或者匿名函数法都是可以使用void来进行定义函数没有返回值的
  //函数命名法
  function getVoid(name:string,age:number):void { //当然这里也是可以使用any的
    	console.log(`${name}---${age}`)  //这里只有输出没有return返回值
  }
  getVoid();
  
  //匿名函数法
  let  getVoid2 = function (name:string,age:number):void { //当然这里也是可以使用any的
    	console.log(`${name}---${age}`)  //这里只有输出没有return返回值
  }
  getVoid2();

可选参数

//可选参数，函数里面的参数有的时候不是必须要传的,在可选参数里面判断一下使用一个？来判断
function getInfos(name:string,age?:number):string {
    if(age){
        return `${name}---${age}`;
    }else {
        return `${name}--年龄保密`;
    }
}

console.log(getInfos('wangwu')); //age前面有个？表示这个参数可以传也可以不传。这里没有传递age参数
console.log(getInfos('wangwu1', 123)); //这里有传递age参数

默认参数


//默认参数 ： 在es5里面没有可选参数，在es6和ts中是可以配置默认参数的
function getInfoss(name:string,age:number = 20) {
    // if(age){
    //     return `${name}---${age}`
    // }else {
    //     return `${name}---年龄保密`
    // }
    return `${name}---${age}`
}

console.log(getInfoss('wangmali')); //这里没有传递age，默认值就是20
console.log(getInfoss('wangmazi', 40)); //这里有传递age的值是40

三点运算符接受参数

//三点运算符，接收传过来的值
function sum2(...res:number[]):number {
    var sum2 = 0;
    for (let i = 0; i <res.length ; i++) {
        sum2+=res[i];
    }
    return sum2
}
console.log(sum2(1, 2, 3, 4, 5));

function sum3(a:number,...res:number[]):number {
    var sum3 = a;
    for (let i = 0; i <res.length ; i++) {
        sum3+=res[i];
    }
    return sum3
}
console.log(sum3(1, 2, 3, 4, 5)); //这里同样是三点运算符，但是第一个a的值是1，如果还有b，b的值就是传进去值的第二个值，这里是2，后面剩下的才是三点运算符接收的值

ts函数的重载

java中的方法重载：指的是两个或两个以上同名的函数，但是他们的参数不一样，这时会出现函数重载的情况 TypeScript中的重载：指的是同一个函数提供多个函数类型定义来实现多种功能的目的

//这里有两个函数，函数名都一样，只是里面的参数类型不一样，即使返回值的类型一样也是不同的函数，所以我们这里用any进行了一次判断，对传递参数进行数据判断，以此来决定应该返回什么类型。
function getnames(name:string):string; 
function getnames(age:number):number;
function getnames(str:any):any {
    if(typeof str =='string'){
        return `我是:${str}`
    }else {
        return `年龄：${str}`
    }
}
console.log(getnames('akangwu')); //返回值是字符串
console.log(getnames(22)); //返回值是数字