3.函数

函数

一、基础语法

JS 中创建函数分为两种方式：函数声明、函数表达式。

1、函数声明

在 JS 中函数声明的语法如下：

function 函数名(形参名) {
    return 返回值;
}

在 TS 中函数声明的语法如下：

function 函数名(形参名: 数据类型): 返回值类型 {
    return 返回值;
}

2、函数表达式

在 JS 中函数表达式的语法如下：

const 变量名 = function(形参名) {
    return 返回值
}

在 TS 中函数表达式的语法涉及到变量的赋值，因此，TS 中函数表达式的语法分为以下几种情况：

1）只约束参数和返回值的类型

const 变量名 = function(形参名: 数据类型): 返回值类型 {
    return 返回值
}

2）只约束变量的类型

const 变量名: (形参名: 数据类型) => 返回值类型 = function(形参名) {
    return 返回值
}

3）约束参数、返回值以及变量的类型

const 变量名: (形参名: 数据类型) => 返回值类型 = function(形参名: 数据类型): 返回值类型 {
    return 返回值
}

通常，约束了变量 的类型，就不需要再去函数中约束参数和返回值的类型了。形式一和形式二任选其一即可。

二、函数参数

1、基本类型的参数

function foo(name: string, age: number) {
    console.log(name, age);
}
foo('张三', 20)

2、参数为数组

function foo(arr: number[]) {
    console.log(arr);
}
foo([1, 2, 3])

3、参数为对象

function foo(student: { name: string, age: number }) {
    console.log(student);
}

foo({ name: '张三', age: 20 })

4、参数的默认值

function foo(name: string, age: number = 20) {

}
foo('李四')

注意：通常将带默认值的参数放在所有形参的最后。

5、可选参数

可选参数，指的就是当前参数可以传也可以不传：

function foo(name: string, age?: number) {

}
foo('李四')

注意：通常将带可选参数放在所有形参的最后。

6、不定参数（剩余参数）

形参中在参数名的前面加上 ...，该参数就变成了不定参数。不定参数的值永远都是一个数组。

function foo(a: number, ...b: number[]) {

}
foo(1, 2, 3)

注意：不定参数必须放在所有形参的最后。

三、函数的返回值

1、基本类型的返回值

function foo(): string {
    return 'hello'
}

2、返回数组

function foo(): number[] {
    return [1, 2, 3]
}

3、返回对象

function foo(): { x: number, y: number } {
    return { x: 1, y: 2 }
}

4、没有返回值

function foo(): void {

}

四、箭头函数

const add = (x: number, y: number): number => x + y;
const add: (x: number, y: number) => number = (x, y) => x + y;