一起学Typescript | 3、Typescript函数声明

朝着全栈加速前进
126 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情

关于基础数据类型，可查看上文中 Typescript数据类型的介绍

函数声明方式

在 JavaScript 中我们所熟悉的函数声明方式可以分为以下几种：

  • 函数声明
  • 函数表达式
  • 箭头函数（ES6）

image.png

函数类型声明

Typescript 中的函数也是需要声明类型的。那么函数中都有哪些部分涉及到类型呢？一定是参数类型和返回值类型了。

语法格式：

image.png

由于Typescript 的约束，调用函数时传入的参数也需要一一对应。以下是三种函数的不同声明方式在Typescript 中的使用：

function sum(a: number, a: number): number {
    return a + b;
}

let sum2 = function (a: number, b: number): number {
    return a + b;
}

let sum3 = (a: number, b: number): number => {
    return a + b;
}
sum(3, 2)

函数的参数

  • 可选参数
  • 默认参数
  • 剩余参数

可选参数：函数也可以像数组一样配置可选参数，即参数可传可不传。另外，可选参数的位置需要写在必选参数之后。

形式如下：str2?: string

function sayHello(str1: string, str2?: string) {
    // TODO    
}

默认参数：如果是 ES6 语法，调用函数时可以设置默认参数，即为参数赋默认值，如果调用的时候未传入参数则使用默认值。

注：Typescript 会自动认为此参数是可选参数，但不需要再关注可选参数与必选参数之间的位置关系，写在前后都可以正常运行

function sayHello(str1: string = '你好鸭', str2: string) {
    // TODO    
}

let say = sayHello('hello', '11111');
let duck = sayHello(undefined, '22222');

剩余参数：依旧是我们熟悉的ES6配方，它可以将不确定数量的参数作为一个数组传入函数，有了它的存在真的提供了很多便利。它和可选参数一样，都需要放在函数参数的最后。

语法：...items

实现：

function myFunc(a1: any[], ...items: any[]) {
    // TODO
}
myFunc(1,2,3,4,5)

上述代码：传入：a1：1，items：[2,3,4,5]

函数重载

函数的重载也是面向对象中的概念，重载的函数方法名相同，参数不同。 注：参数名不同、参数数量不同、参数类型不同 都属于参数不同

在 Typescript 中，有需要函数重载的地方，就要多声明几个函数的类型。

function getValue(x: number): number;
function getValue(x: string): string;
function getValue(x: number | string): number | string | void {
    // TODO
}
avatar
文章
阅读
粉丝