• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript - 3.函数

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

函数声明法

// function run():string{
//     return 'run';
// }


//错误写法,返回类型错误
// function run():string{
//     return 123;
// }

匿名函数

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


    // alert(fun2()); /*调用方法*/

ts中定义方法传参

    /*
        function getInfo(name:string,age:number):string{

                return `${name} --- ${age}`;
        }

        alert(getInfo('zhangsan',20));

    */

//匿名方法
var getInfo=function(name:string,age:number):string{
	return `${name} --- ${age}`;
}

alert(getInfo('zhangsan',40));

//没有返回值的方法
 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} ---年龄保密`;
                }
        }

        alert(getInfo('zhangsan'))
        alert(getInfo('zhangsan',123))

(3)默认参数 可选参数

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

 function getInfo(name:string,age:number=20):string{
                            if(age){
                                return `${name} --- ${age}`;
                            }else{
                                return `${name} ---年龄保密`;
                            }                     
                }

(4)剩余参数,三点运算符

/*
function sum(...result:number[]):number{
	var sum=0;

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

		sum+=result[i];  
	}

	return sum;

}
alert(sum(1,2,3,4,5,6)) ;
*/
//剩余参数(三点运算符)必须在最后
function sum(a:number,b:number,...result:number[]):number{
	var sum=a+b;

	for(var i=0;i<result.length;i++){
	sum+=result[i];  
	}
	return sum;
}

alert(sum(1,2,3,4,5,6)) ;

(5)函数重载

  • java中方法的重载:重载指的是两个或者两个以上同名函数,但它们的参数不一样,这时会出现函数重载的情况。
  • typescript中的重载:通过为同一个函数提供多个函数类型定义来试下多种功能的目的。

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

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

            }

            function css(config,value){


            }
        */

es5出现同名方法会覆盖前面,下面看ts中的重载
示例1:

function getInfo(name:string):string;
function getInfo(age:number):string;
function getInfo(str:any):any{

	if(typeof str==='string'){

		return '我叫:'+str;
	}else{

		return '我的年龄是'+str;
	}

}

alert(getInfo('张三'));   //正确


alert(getInfo(20));   //正确


alert(getInfo(true));    //错误写法

示例2:

               function getInfo(name:string):string;
                function getInfo(name:string,age:number):string;
                function getInfo(name:any,age?:any):any{
                    if(age){

                        return '我叫:'+name+'我的年龄是'+age;
                    }else{

                        return '我叫:'+name;
                    }
                }

                // alert(getInfo('zhangsan'));  /*正确*/

                // alert(getInfo(123));  错误

                // alert(getInfo('zhangsan',20));

(6)箭头函数

注意:this指向的问题 箭头函数里面的this指向上下文

//es5
// setTimeout(function(){
//     alert('run')
// },1000)



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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
地底,TypeScript和全球3D建筑发布于CesiumJS1.70发布时间:2022-07-18
下一篇:
React入门(4)React+TypeScript发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap