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)

  

posted @ 2020-07-30 10:13  温少昌  阅读(254)  评论(0编辑  收藏  举报