TypeScript入门笔记(三):函数

TypeScript学习手册:
https://www.tslang.cn/docs/handbook/basic-types.html

一:定义函数的方法

1:一般函数定义的方法(es5)

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

2:ts里面定义函数的方法
函数声明法

//传递参数和返回值都要进行指定类型
//返回类型必须是string类型,不能写成别的数据类型,否则会报错
 function run():string{
     return '123';
  }
 run();
 console.log(run())

匿名函数的写法


 var  run2=function():string{//指定返回值类型为string字符串类型
     return '1243';
  }

 run2(); //调用方法
 console.log(run2())



或者指定返回值类型为number类型

var  run2=function():number{//指定返回值类型为number类型
    return 234;
 }

run2();//调用方法
console.log(run2())

注意:

//没有参数返回的时候,要定义返回的数据类型
var  fun2=function():number{
 return 123;
}
alert(fun2());

3:ts定义方法传参,参数是有类型的

//声明式
function  getInfo(name:string,age:number):string{
    return   `${name} --- ${age}`;
}
console.log(getInfo('zhang',23));


//匿名式定义法
 var getInfo = function(name:string,age:number):string{
     return   `${name} --- ${age}`;
  }
 console.log(getInfo('zhang',23));


//没有返回值的方法,void表示没有返回值
function  run():void{
 console.log('runnn')
}
run();

二:函数方法可选参数

es5里面方法的实参和形参可以不一样,但是ts中必须一样,如果不一样,必须配置可选参数。
方法可选参数,用问号表示,注意:可选参数必须配置到最后一个位置。

function  getInfo(name:string,age?:number):string{
    if(age){
        return   `${name} --- ${age}`;
    }else{
        return   `${name} ---年龄保密}`;
    } 
 }
 console.log(getInfo('zhang'));
 console.log(getInfo('zhang' ,2345));

 //如果调用函数的时候,不传第二个参数,则要在第二个函数age?上加一个问号。
 //问号就表示这个age可以传,可以不传。

三:函数方法默认参数

es5里面没有办法设置默认参数,es6和ts中都可以设置默认参数,如果没有传年龄的参数,则默认为number=20,如果传参数,就是传的那个年龄的参数,和上面的可选参数是类似的。

位置可以放在第一个参数,也可以放在最后一个参数的位置。

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

四:函数方法剩余参数

求和:

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

同理:求积

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

三点运算符,接收形参传过来的值(剩余参数)(把sum里面所有传过来的参数全部赋值给result数组)

//三点运算符,接收形参传过来的值,
function   sum(...result:number[]):number{
   var sum=0;
//遍历result,拿到值
   for(var i=0;i<result.length;i++){
       sum+=result[i]
   }
   return sum;
    }
    sum (1,2,3,4,3);
    console.log(sum (1,2,3,4,3));

另一种写法,把1赋给a,2赋给b,后面三个数赋给...result


//另一种写法

function   sum(a:number,b:number,...result:number[]):number{
    //把1赋值给a,把2赋值给b,把后面三个数赋值给三点运算符
    var sum=a+b;
    for(var i=0;i<result.length;i++){
        sum+=result[i]
    }
    return sum;
     }
     sum (1,2,3,4,3);
     console.log(sum (1,2,3,4,3));

五:TypeScript的函数重载

实现java里面的面向对象的一种编程的体验,ts为了兼容es5和es6重载的写法和Java中式有一定的区别的。

// ts重载,通过为同一个函数提供多个函数类型定义来实现多种功能的目的
//重载就相当于同名的函数,当es5中出现同名方法,下面的会替换上面的方法
function css(config){
}
function css(config,value){ }

TypeScript的重载,分别返回了字符串(王小婷)和number类型(20)

function  getInfo(name:string):string;
function  getInfo(age:number):number;
function  getInfo(str:any):any{
    if(typeof  str==='string'){
        return  '我叫:'+str;
    }else{
        return '我年龄:' +str;
    }
}
console.log(getInfo('王小婷'));
console.log(getInfo(20));

参考链接:https://www.bilibili.com/video/av38379328?p=1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343