typescript学习笔记三：typescript中的函数定义

桃扇骨 2023-01-05 01:15 379阅读 0赞

1.ts函数的定义

函数声明

  1. function action():string{
  2.   return '去打篮球'  //正确
  3. }
  5. function action():string{
  6.   return 123    //错误写法，限制了返回类型为字符串，不能是数值
  7. }

函数表达式

  1. var action1 = function():number{
  2.  return 123
  3. }
  4. action1(); //调用方法

2.ts函数定义方法传参

传入的参数和返回的类型都被限制

  1. function getInfo(name:string,age:number):string{
  2.   return `${name}现在${age}了`  
  3. }
  5. var getInfo1 = function(name:string,age:number):string{
  6.    return `${name}--${age}`  
  7. }

3.ts没有返回值的函数方法

  1. function run():void{
  2.     console.log('无返回参数')
  3. }

4.ts函数的可选参数

参数后面的限制类型冒号(:)前加问号(?)，参数可传可不传；
可选参数必须配置在参数的最后面；

  1. function getInfo(name:string,age?:number):string{
  2.   if(age){
  3.     return `${name}--${age}` 
  4.   }else{
  5.     return `${name}--不知年龄`  
  6.   }
  7. }

5.ts函数的默认参数

默认参数没有位置顺序限制

  1. function getInfo(name:string,age:number = 20):string{
  2.   if(age){
  3.     return `${name}--${age}` 
  4.   }else{
  5.     return `${name}--不知年龄`  
  6.   }
  7. }
  9. console.log(getInfo('张三'))  //张三--20
  10. console.log(getInfo('张三',30))  //张三--30

6.ts函数的剩余参数

  1. function getSum(a:number,b:number,c:number,d:number,):number{
  2.     return a+b+c+d
  3. }
  4. console.log(getSum(1,2,3,4))  //10
  6. //三点运算符 接受新传过来的值
  7. function getSum1(...nums:number[]):number{
  8.     return a+b+c+d
  9.     var sum = 0
  10.     for(var i =  0 ; i < nums.length; i++){
  11.      sum += nums[i]
  12.     }
  13.     return sum
  14. }
  15. console.log(getSum1(1,2,3,4))  //10
  17. //三点运算符 结合实参 
  18. function getSum1(a:number,...nums:number[]):number{
  19.     return a+b+c+d
  20.     var sum = 0
  21.     for(var i =  0 ; i < nums.length; i++){
  22.      sum += nums[i]
  23.     }
  24.     return sum
  25. }
  26. //把1赋值给a,234赋值给nums数组
  27. console.log(getSum1(1,2,3,4))  //10

7.ts函数重载

ts中的重载，通过为同一个函数提供多个函数类型定义来试下多种功能的目的；

  1. //es5中出现同名方法，下面的会覆盖上面的方法
  2. function css(config){}
  3. function css(config，value){}
  5. //ts中，支持同名方法
  6. function getInfo(name:string):string{}
  7. function getInfo(age:number):number{}
  8. function getInfo(str:any):any{
  9.   if(typeof str === 'string'){
  10.      return `我叫${str}`
  11.   }else{
  12.     return `我年龄是${str}`
  13.   }
  14. }
  16. function getInfo(name:string):string{}
  17. function getInfo(name:string,age:number):number{}
  18. function getInfo(name:any,age?:number):any{
  19.   if(age'){
  20.      return `${name} -- ${age}`
  21.   }else{
  22.     return `我是${name}`
  23.   }
  24. }

8.ts箭头函数

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

  1. setTimeout( () => {
  2.    alert('我是箭头函数')
  3. },1000)

发表评论

表情：
评论列表 （有 0 条评论，379人围观）

还没有评论，来说两句吧...

相关阅读