美文网首页
2021-09-10 TypeScript中函数的理解

2021-09-10 TypeScript中函数的理解

作者: 走花鹿 | 来源:发表于2021-09-10 18:53 被阅读0次

使用方式

和JavaScript使用方式类似,可以通过funciton关键字、箭头函数等形式去定义,例如下面一个简单的加法函数:

const add = (a:number,b:number)=> a+b

上述只定义了函数的两个参数类型,这个时候整个函数虽然没有被显式定义,但是实际上TypeScript 编译器是能够通过类型推断到这个函数的类型,如下图所示:

typescript编译器的提示
当鼠标放置在第三行 add 函数名的时候,会出现完整的函数定义类型,通过 : 的形式来定义参数类型,通过 => 连接参数和返回值类型

我们也可以显式地写上返回类型,如下:

const add = (a:number,b:number):number=> a+b

当我们没有提供函数实现的情况下,有两种声明函数类型的方式,如下所示:

// 方式一
type LongHand = {
  (a: number): number;
};

// 方式二
type ShortHand = (a: number) => number;

当存在函数重载时,只能使用方式一的形式

可选参数

当函数的参数可能是不存在的,只需要在参数后面加上 ? 代表参数可能不存在,如下:

const add = (a: number, b?: number) => a + (b ? b : 0)

这时候参数b可以是number类型或者undefined类型,即可以传一个number类型或者不传都可以

剩余类型

剩余参数与JavaScript的语法类似,需要用 ... 来表示剩余参数

如果剩余参数 rest 是一个由number类型组成的数组,则如下表示:

const add = (a: number, ...rest: number[]) => rest.reduce(((a, b) => a + b), a)

函数重载

允许创建数项名称相同但输入输出类型或个数不同的子程序,它可以简单地称为一个单独功能可以执行多项任务的能力

关于typescript函数重载,必须要把精确的定义放在前面,最后函数实现时,需要使用 |操作符或者?操作符,把所有可能的输入类型全部包含进去,用于具体实现

这里的函数重载也只是多个函数的声明,具体的逻辑还需要自己去写,typescript并不会真的将你的多个重名 function的函数体进行合并

例如我们有一个add函数,它可以接收 string类型的参数进行拼接,也可以接收 number 类型的参数进行相加,如下:

// 上边是声明
function add (arg1: string, arg2: string): string
function add (arg1: number, arg2: number): number
// 因为我们在下边有具体函数的实现,所以这里并不需要添加 declare 关键字

// 下边是实现
function add (arg1: string | number, arg2: string | number) {
  // 在实现上我们要注意严格判断两个参数的类型是否相等,而不能简单的写一个 arg1 + arg2
  if (typeof arg1 === 'string' && typeof arg2 === 'string') {
    return arg1 + arg2
  } else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
    return arg1 + arg2
  }
}

区别

从上面可以看到:

  • 从定义的方式而言,typescript 声明函数需要定义参数类型或者声明返回值类型
  • typescript 在参数中,添加可选参数供使用者选择
  • typescript 增添函数重载功能,使用者只需要通过查看函数声明的方式,即可知道函数传递的参数个数以及类型

参考文章

相关文章

  • 2021-09-10 TypeScript中函数的理解

    使用方式 和JavaScript使用方式类似,可以通过funciton关键字、箭头函数等形式去定义,例如下面一个简...

  • 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入门

    字符串新特性变量和参数新特性函数新特性匿名函数for of循环TypeScript语言中的面向对象特性 理解ES5...

  • TypeScript中的函数详解

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

  • TypeScript 函数中的 this 参数

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

网友评论

      本文标题:2021-09-10 TypeScript中函数的理解

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