zoukankan      html  css  js  c++  java
  • 2、typeScript中的函数

    typeScript中的函数有一下几种形式:

    1、普通函数

    2、可选参数

    3、默认参数

    4、剩余参数

    5、函数重载

    6、箭头函数

    一、普通函数

    es5中的普通函数定义:

    function run(){
      return 'run'
    }
    

    es5中的匿名函数定义:

    var run2 = function(){
      return 'run2'
    }
    

    ts中的普通函数定义:

    //ts中的函数声明
    function run():string{
      return 'run'
    }
    // 错误写法
    function run1():string{
      return 123;
    }
    

    ts中的匿名函数定义: 

    var fun2=function():number{
      return 123;
    }
    

    二、可选参数

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

    function getInfo(name:string,age:number):string{
      if(age){
        return `${name} --- ${age}`;
      }else{
        return `${name} --- 年龄保密哦`;
      }
    }
    console.log(getInfo('wen',28))//wen --- 28
    console.log(getInfo('wen'))//wen ---年龄保密哦
    //注意:可选参数必须配置到参数的最后面
    function getInfoSele(name:string,age?:number):string{
      if(age){
        return `${name} --- ${age}`;
      }else{
        return `${name} --- 年龄保密哦`;
      }
    }
    console.log(getInfoSele('wen',28))//wen --- 28
    console.log(getInfoSele('wen'))//wen ---年龄保密哦
    
    

    三、默认参数

    es5中没发设置默认参数,es6和ts中都可以设置默认参数

    function getInfoInit(name:string,age:number=18):string{
      if(age){
        return `${name} --- ${age}`;
      }else{
        return `${name} --- 年龄保密哦`;
      }
    }
    console.log(getInfoInit('wen'))//wen --- 18 
    console.log(getInfoInit('wen',28))//wen --- 28

    四、剩余参数

    function sum(a:number,b:number,c:number,d:number){
      return a+b+c+d;
    }
    
    alert(sum(1,2,3,4));//10
    // 三点运算符 接受新参数传过来的值
    function sum1(a:number,b:number,...result:number[]):number{
      var sum = a+b;
      for (let i = 0; i < result.length; i++) {
        sum+=result[i];
      }
      return sum;
    }
    alert(sum1(1,2,3,4));
    

    五、ts函数重载

    java中方法的重载,重载值得是两个或者两个以上同名阐述,但他们的参数不一样,这是会出现函数重载的情况。

    typescript中的重载:通过为同一个函数提供多个函数类定义来实现多种功能目的。

    ts为了兼容es5以及es6重载的写法和java中有区别。

    //es5中出现同名方法,下面的回替换上面的方法
    function css(config){
    
    }
    function css(config,value){
    
    }
    

    ts中的重载

    function getList(name:string):string;
    function getList(age:number):string;
    function getList(str:any):any{
      if(typeof str === 'string'){
        return "我叫:"+str;
      }else{
        return "我的年龄是:"+str;
      }
    }
    alert(getList('wen'));//ok
    alert(getList(20));//ok
    alert(getList(true));//error
    

    六、箭头函数

    this指向的问题,箭头函数里面的this指向上下文。

    setTimeout(()=>{
        alert('run');
    },1000)
    

      

  • 相关阅读:
    (二)vue的生命周期及相关的运行流程
    Vue接入百度地图显示及相关操作
    前端开发环境的介绍
    更改博客园的样式
    Ant Design of Vue 组件库的使用
    Vue 更换页面图标和title
    (四) Vue 相关的路由配置(及子路由配置)
    SVN创建分支的相关操作
    vs code插件自动压缩 min.css
    敲开通往架构师的门
  • 原文地址:https://www.cnblogs.com/wenshaochang123/p/13402230.html
Copyright © 2011-2022 走看看