TypeScript Basic Tutorial (3)


TypeScript中的函数

  • 函数的定义
  • 可选参数
  • 默认参数
  • 剩余参数
  • 函数重载
  • 箭头函数 es6

函数的定义

es5定义函数的方法:

//函数声明法
function run(){
  return 'run';
}

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

ts中定义函数的方法:

//函数声明法
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();

方法可选参数

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

function getInfo(name:string,age?:number):string{
  if(age){
    return `${name} --- ${age}`;
  }else{
    return `${name} ---年龄保密`;
  }
}
alert(getInfo('zhangsan'))
alert(getInfo('zhangsan',123))

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

//错误写法
function getInfo(name?:string,age:number):string{
  if(age){
    return `${name} --- ${age}`;
  }else{
    return `${name} ---年龄保密`;
  }
}
alert(getInfo('zhangsan'))

默认参数 可选参数

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

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

剩余参数

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

在TS中,三点运算符 接受新参传过来的值:

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)) ;

ts函数重载

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

es5中出现同名方法,下面的会替换上面的方法:

function css(config){
  }
function css(config,value){
  }

ts中的重载:

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));    //错误写法
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));  /*正确*/

箭头函数 es6

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

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

文章作者: Chaoqiang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Chaoqiang !
评论
 上一篇
TypeScript Basic Tutorial (4) TypeScript Basic Tutorial (4)
es5里面的类最简单的类function Person(){ this.name='张三'; this.age=20; } var p=new Person(); alert(p.name); 构造函数和原型链里面增加方法func
下一篇 
TypeScript Basic Tutorial (2) TypeScript Basic Tutorial (2)
typeScript中的数据类型typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,在typescript中主要给我们提供了以下数据类型: 布尔类型(boolean) 数字类型(number) 字符串类型(stri
  目录