TypeScript函数的定义

typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验,语法类型和类型不匹配会报错,typeScript中的函数中分别函数的定义、可选参数、默认参数、剩余参数、函数重载、箭头函数（es6）

TypeScript函数的定义

• 1、函数的定义
• 2、可选参数
• 3、默认参数
• 4、剩余参数
• 5、函数重载
• 6、箭头函数 es6

  1、函数的定义

• es5定义函数的方法

  //函数声明法
       function run(){
           return 'run';
       }
   //匿名函数
       var run2=function(){
           return 'run2';
       }

• ts中定义函数的方法

  //函数声明发
  function run():string{
      return 'str';
  }
  //匿名函数
  var fun = function():number{
      return 123
  }
  console.log(fun())

• 错误写法 因为返回的是number类型的不是string类型的

  function run_():string{
       return 123
  }

• ts中定义方法传参

  function getInfo(name:string,age:number){
      return name +'-----'+age;
  }
  console.log(getInfo('wanglei',12))

• 匿名传参

  var fun_ = function(name:string,age:number):string{
      return name +'-----'+age;
  }
  console.log(fun_('wanglei',12))

• 没有返回值的函数

  function run_():void{
      console.log('run')
  }
  run_()

  2、方法的可选参数 ？问号表示可选参数

• es5里面方法的实参和行参可以不一样，**但是ts中必须一样，如果不一样就需要配置可选参数**

  function getInfo_(name:string,age?:number):string{
      if(age){
          return `${name} --- ${age}`;
      }else{
          return `${name} ---年龄保密`;
      }
  }
  //如果没有？号不传age会报错
  console.log(getInfo_('王磊'))
  console.log(getInfo_('王磊',12))

• **注意:可选参数必须配置到参数的最后面**

  3、默认参数 可选参数

• es5里面没法设置默认参数，es6和ts中都可以设置默认参数

   function getPerson(name:string,age:number=20):string{
      if(age){
          return `${name} --- ${age}`;
      }else{
          return `${name} ---年龄保密`;
      }
  }
  console.log(getPerson('王磊')) //王磊 20
  console.log(getPerson('王磊',15)) //王磊 15

  4、剩余参数

  function sum(a:number,b:number,c:number,d:number):number{
      return a+b+c+d;
  }
  console.log(sum(1,2,3,4))

• 三点运算符 接受新参传过来的值

  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,6)) ;
  
  function sum_a(a:number,b:number,...result:number[]):number{
      var sum=a+b;
      console.log(sum)
      for(var i=0;i<result.length;i++){
          sum+=result[i];
      }
      return sum;
  }
  console.log(sum_a(1,2,3,4,5,6))

  5、ts函数重载

• java中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。
• typescript中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
• ts为了兼容es5 以及 es6 重载的写法和java中有区别。
• **es5中出现同名方法，下面的会替换上面的方法 **

  function getInfo(name:string):string;
  function getInfo(age:number):number;
  function getInfo(str:any):any{
      if(typeof str==='string'){
          return '我叫：'+str;
      }else{
          return '我的年龄是'+str;
      }
  }
  alert(getInfo('张三'));   //正确
  alert(getInfo(20));   //正确
  //alert(getInfo(true));    //错误写法

赏

谢谢你请我吃糖果

支付宝

微信