05.Typescript 函数类型

函数类型

在 TypeScript 中编写函数，需要给形参和返回值指定类型：

function point(x: number, y: number) :string {
    return `坐标点：（x:${x},y:${y}）`
}

let point = function (x: number, y: number): string {
    return `坐标点：（x:${x},y:${y}）`
}

参数 x 和 y 都是 number 类型， 整个函数的返回一个模板字符串，值为 string 类型。

我们可以给每个参数添加类型之后再为函数本身添加返回值类型。TypeScript 能够根据返回语句自动推断出返回值类型，因此我们通常省略它。

完整函数类型

上面的代码只是对 = 等号右侧的匿名函数进行了类型定义，等号左侧的 point 同样可以添加类型：

let point: (x: number, y: number) => string = function (x: number, y: number): string {
    return `坐标点：（x:${x},y:${y}）`
}

函数类型包含两部分：参数类型和返回值类型。 当写出完整函数类型的时候，这两部分都是需要的。

这里要注意：函数类型的 => 和 箭头函数的 => 是不同的含义。

函数参数

参数个数保持一致

TypeScript 每一个参数都是必须的。这不是指不能传递 null 或 undefined 作为参数，而是说编译器会检查用户是否为每个参数都传入了值。简短地说，传递给一个函数的参数个数必须与函数期望的参数个数一致。

function fullName(firstName: string, lastName: string): string {
    return firstName + ' ' + lastName;
}

let result1 = fullName('Sherlock', 'Holmes')
let result2 = fullName('Sherlock', 'Holmes', 'character') // Error, Expected 2 arguments, but got 3
let result3 = fullName('Sherlock')                        // Error, Expected 2 arguments, but got 1

可选参数

JavaScript 里，每个参数都是可选的，可传可不传。没传参的时候，它的值就是undefined。

function fullName(firstName, lastName) {
    console.log(firstName); //Tom
    console.log(lastName);  //undefined
    return firstName + ' ' + lastName;
}
let result1 = fullName('Tom');

在 TypeScript 中 fullName 函数传入多余或少于的参数，均不允许。那如何定义可选参数呢？

在 TypeScript 里我们可以在参数名旁使用 ? 实现可选参数的功能。例如，将 lastName 设置为可选参数。

function fullName(firstName: string, lastName?: string): string {
    return firstName + ' ' + lastName;
}

let result1 = fullName('Sherlock', 'Holmes')              // Sherlock Holmes
let result2 = fullName('Sherlock')                        // Sherlock undefined

注意：

• 可选参数必须跟在必须参数后面。如果我们仅设置 firstName 为可选参数，则必须调整他们的位置，把 firstName 放在后面。

function fullName(lastName: string, firstName?: string): string {
    return firstName + ' ' + lastName;
}

• 调用函数时，因为参数颠倒，注意传参顺序

let result1 = fullName('Bush','George')           // George Bush
let result2 = fullName('Bush')                    // undefined Bush

默认参数

上面的 fullName 函数在 firstName 没有传参的情况下，得到的结果是 undefined Bush，我们可以使用默认参数，让代码更加优雅。

在 ES6 中，我们允许给函数的参数添加默认值。同样的，Typescript 也能设置默认参数。

function fullName(firstName: string, lastName: string = 'Smith'): string {
    return firstName + ' ' + lastName;
}

let result1 = fullName('Mickel', 'Jackson')              // Mickel Jackson
let result2 = fullName('Tom')                            // Tom Smith

注意：

• Typescript 会将默认参数识别为可选参数，但是默认参数不需要放在必须参数的后面，可随意调整位置。

function fullName(firstName: string = 'Mickel', lastName: string): string {
    return firstName + ' ' + lastName;
}

• 如果带默认值的参数出现在必须参数前面，用户必须明确的传入undefined 值来获得默认值。

let result1 = fullName(undefined, 'Jackson')    // Mickel Jackson

剩余参数

必要参数，默认参数和可选参数有个共同点：它们只能表示某一个参数。有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。

在 JavaScript 里，你可以使用 arguments 来访问所有传入的参数。

// n个数字求和
function sum(x, y, z) {
    console.log(arguments); // [10,11,12,13,14]
    let arr = [...arguments];
    return arr.reduce((total, item) => total + item);
}
sum(10, 11, 12, 13, 14)

代码解释

1. 虽然 sum 函数形参只有 x，y，z 这3个，但是 sum 函数可以计算 n 个数字之和，这一切归功于 arguments，它可以获取函数所有的实参。
2. arguments 是一个参数的类数组对象，除了length属性和索引之外没有任何 Array 属性。我们通过扩展运算符 ... 将其转换为真实数组再求和。

在 TypeScript 里，你可以使用剩余参数，把所有参数收集到一个变量里：

function sum(...rest: number[]) {
    console.log(rest); // [10,11,12,13,14]
    return rest.reduce((total, item) => total + item);
}
sum(10, 11, 12, 13, 14)

注意：

• 剩余参数会被当做个数不限的可选参数。 可以一个都没有，同样也可以有任意个。
• 与 arguments 不同，剩余参数 rest 默认就是数组，拥有 Array 所有的属性和方法。
• rest 剩余参数只能是最后一个参数。