(二)typeScript函数

110 阅读1分钟

函数的语法就不一一赘述了,在ts中对函数的使用更加明确

1.  基本用法

 function userInfo(name: string, age: number): string { 

           return `name{name}--{age}` 

         } 

        console.log(userInfo('张三', 20))//输出  张三--20

       参数和返回值类型必须一一对应,函数如果没有返回值,用void标识

2.方法可选参数

2.1     在es5中,函数的形参和实参类型可以不一样,但在ts中必须一样,如果不一样就需要设置可选参数,在参数后添加 ?  表示可传可不传

function buildName(firstName: string, lastName?: string) { 

    if (lastName) 

       return firstName + " " + lastName;

   else

     return firstName; 

     let result1 = buildName("Bob"); // 正确 

     let result2 = buildName("Bob", "Adams", "Sr."); // 错误,参数太多了 

     let result3 = buildName("Bob", "Adams"); // 正确

可选参数必须跟在必需参数后面,如果都是可选参数就没关系。 如果上例我们想让 firstName 是可选的,lastName 必选,那么就要调整它们的位置,把 firstName 放在后面。

2.2默认参数

参数如果设置了默认值,在函数调用时不传参数,则使用默认值

例:function calculate_discount(price:number,rate:number = 0.50) { 

          var discount = price * rate; 

          console.log("计算结果: ",discount); 

       }

         calculate_discount(1000) 

         calculate_discount(1000,0.30)

匿名函数除没有函数名,其他与标准函数一样

var   res = function(a:number, b:number){

       return a*b

   }

console.log(res(2,10))//输出20

2.3  剩余参数

使用三点运算符,接受新参传过来的值

function sum(...result:number):number{

    var sum = 0;

    for( var i=0;i<result.length;i++){

       sum+= result[i]

   }

    return sum

}

console.log(sum(1,2,3,4,5))//输出15

2.4 函数重载

例:  function   userInfo(){...}

        function userInfo(){...}

在ES5中同名函数,执行时后面的函数会覆盖掉前面的函数,而在ts中不会,ts中函数名可以相同,参数不同,返回的值类型也不同,每一个函数必须要有一个独一无二的参数类型列表

function   userInfo(name:string):string;

function userInfo(name:string,age:number):string;

function userInfo(name:string,age?:any):any{

    if(age){

       return '我叫'+ name + '我的年龄是'+ age

    } else {

    return '我叫:'+name

  }

}

console.log(userInfo('张三'))//输出   我叫张三    正确

console.log(userInfo(123))// 错误

console.log(userInfo('张三', 20))//输出   我叫张三,我的年龄是20    正确

2.5  箭头函数

箭头函数中的this指向上下文

var  foo = (x:number)=>{

    return x + 10

    console.log(x)

}

foo(100)//输出110