TypeScript中的函数

2019-09-22  本文已影响0人  一号聪明

函数的定义

ES5中的定义

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

TypeScript中的定义

// 函数的声明
function run():string{ // 定义返回值的类型
    return '大盘鸡拌面'
    // return  123    错误的写法
}
// 匿名函数
var Fn = function():number {
  return  123
}
Fn()  //调用,跟ES5相似

定义方法的传参

// 声明式跟匿名函数一样 
function getInfo (name:string, age:number):string{
   return   `姓名:${name}----年龄:${age}`
}
alert(getInfo('大盘鸡拌面',18))  //正确写法
alert(getInfo('大盘鸡拌面','18'))  //错误写法

没有返回值的方法

function fun():void{
    console.log('hello')
}
fun()

方法的可选参数(可选参数必须配置到参数的最后面)

//  es5里面方法的实参和形参可以不一样,但是ts中必须一样,如果不一样配置可选参数
function getInfo (name:string,age?:number):string{
  // age    undefind
  if (age) {
    return   `姓名:${name}----年龄:${age}`
  } else {
    return   `姓名:${name}----年龄:保密`
  }
}
alert(getInfo('大盘鸡拌面'))  //如果上面参数中age后面不添加?,ts编译会报错。这就是配置可选参数

默认参数(ES5里面没办法设置默认参数,ES6和Ts中都可以设置默认参数)

function getInfo (name:string,age:number=18):string{
    return   `姓名:${name}----年龄:${age}`  //age   18
}
alert(getInfo ('天秀'))

剩余参数(...运算符的应用)

// 普通版
function sum (a:number,b:number,c:number) :number{
  return a + b + c
}
alert(sum(1,2,3))   // 6
//进化版
function count (...result:number[]):number{
  let sum = 0
  for(let i = 0; i<result.length; i++){
    sum += i  
  }
  return sum
}  
alert(count(12,123,2,3,4,13,2,3,4,55,6,)) //实参这边就可以随便传了

TS函数重载

1. java中的方法重载,重载是指两个或者两个以上同名函数,但是他们的参数不一样,这是会出现重载的情况
2.TS中的重载 :通过为同一个函数提供多个函数类型定义来试下多种功能的目的
3.TS为了兼容es5以及es6重载的写法跟java有区别
4.es5中出现同名方法,下面的方法会替换上面的方法
function getInfo(name:string):string;
function getInfo(age:number):number;
function getInfo(str:any):any{
  if (typeof str==='string') {
     return '昵称:' + str;
  } else {
    return '年龄' + str
  }
}
alert(getInfo('张三'))  //昵称张三
alert(getInfo(20))      //年龄20 
alert(getInfo(true))    // 错误写法
上一篇 下一篇

猜你喜欢

热点阅读