TypeScript函数的定义和使用（附带实例）

无论是在 JavaScript 中，还是在 TypeScript 中，函数都是非常重要的类型，只不过 TypeScript 为函数添加了额外的功能，让开发者可以更容易地使用。

和 JavaScript 函数一样，TypeScript 函数可以创建具名函数和匿名函数。此外，TypeScript 函数还增加了函数类型、可选参数、默认参数及剩余参数的相关内容，下面分 3 个部分进行介绍。

TypeScript函数类型

在 JavaScript 中我们会通过下面的代码来定义函数，具体如下：

//具名函数
function sum(x, y) {
    return x + y;
}
// 匿名函数
let mySum = function(x, y) {
    return x + y;
}

下面使用 TypeScript 为上面定义的函数的参数添加类型，代码如下：

function sum(x: number, y: number): number {
    return x + y;
}

let mySum = function(x: number, y: number): number {
    return x + y;
}

上面的代码先为函数的每个参数添加类型，再为函数本身添加返回值类型。而 TypeScript 能够根据返回语句自动推断出返回值类型。

改写后 mySum 函数的完整类型如下：

let mySum2: (x: number, y: number) => number = function (
  x: number,
  y: number
): number {
  return x + y;
};

TypeScript可选参数和默认参数

TypeScript 中的每个函数参数默认都是必需的。编译器会检查开发者是否为每个参数都传入了值。简单地说，传递给一个函数的参数个数必须与函数期望的参数个数一致。

在 JavaScript 中，每个参数都是可选的，在没有传参时，参数的值就是 undefined。而在 TypeScript 中，我们可以在参数名后面添加“？”，以实现可选参数的功能。比如，我们想让 lastName 是可选参数，就可以书写为“lastName？：string”。

在 TypeScript 中，开发者也可以为参数设置一个默认值。当开发者没有传递这个参数或传递的值是 undefined 时，就使用这个默认值，我们也将这样的参数叫作有默认初始值的参数。比如将 firstName 参数的默认值设置为“A”，就可以书写为“firstName：string='A'”。

完整代码如下：

function concatName(firstName: string = 'A', lastName?: string): string {
    if (lastName) {
        return firstName + '-' + lastName;
    } else {
        return firstName;
    }
}

console.log(concatName('C', 'D'));
console.log(concatName('C'));
console.log(concatName());

TypeScript剩余参数

默认参数和可选参数有一个共同点，它们表示某一个参数。在某种场景下，如果想同时操作多个参数，或者并不能明确知道会有多少个参数传递进来，就可以使用剩余参数。

在 TypeScript 中，可以把所有参数收集到一个变量中，这样剩余参数会被当作个数不限的可选参数，代码如下：

function info(x: string, ...args: string[]) {
    console.log(x, args);
}

info('abc', 'c', 'b', 'a');