美文网首页
TypeScript中的函数

TypeScript中的函数

作者: 一号聪明 | 来源:发表于2019-09-22 21:21 被阅读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))    // 错误写法

相关文章

  • typescript函数

    typescript函数的隐式定义 在typescript中的函数并不需要刻意去定义,比如我们实现一个加法函数: ...

  • TypeScript中的函数

    函数的定义 ES5中的定义 TypeScript中的定义 定义方法的传参 没有返回值的方法 方法的可选参数(可选参...

  • Typescript中的函数

    1. 函数表达式 2. 可选参数 3 默认函数 4. 剩余函数 5 函数重载 6 箭头函数

  • TypeScript中的函数

    TypeScript中的函数相比ES5新增了一些功能,比如规范了传参的类型,函数返回值的类型,可选参数, 默认参数...

  • typeScript学习02

    typescript中的函数 ts中函数定义 ts中函数的传参 ts中的函数的可选参数(js中函数的形参和实参可以...

  • TypeScript的函数

    1. 函数声明 1.1 函数声明法 1.2 函数表达式 1.3 匿名函数 TypeScript中的函数也是...

  • TypeScript中的函数详解

    一、写法 声明式 ts在传参时都会规定参数的类型,还有它返回值的类型也会在函数执行之前都已经规定好,如果传参的类型...

  • TypeScript 函数中的 this 参数

    从 TypeScript 2.0 开始,在函数和方法中我们可以声明 this 的类型,实际使用起来也很简单,比如:...

  • typescript语法

    参考:typescript参考1 typescript参考2 函数参数类型定义 声明函数参数默认值 ...

  • 通俗易懂TypeScript系列四:函数(上)

    1、函数定义 在TypeScript中函数的定义中跟JavaScript一样,都支持函数声明和函数表达式写法 1、...

网友评论

      本文标题:TypeScript中的函数

      本文链接:https://www.haomeiwen.com/subject/yiyuuctx.html