TypeScript可选参数|极客笔记

TypeScript可选参数

1. 引言

在开发中，我们经常会遇到需要某些参数是可选的情况，即使没有传递这些参数，程序也能正常运行。在 TypeScript 中，我们可以使用可选参数来实现这个功能。本文将详细介绍 TypeScript 中可选参数的使用方法和注意事项。

2. 可选参数的定义和使用

在 TypeScript 中，我们可以使用问号（?）来表示一个参数是可选的。例如：

function greet(name: string, age?: number) {
    console.log(`Hello,  ${name}!`); if (age) { console.log(`You are$ {age} years old.`);
    }
}

greet("Alice"); // Output: Hello, Alice!
greet("Bob", 20); // Output: Hello, Bob! You are 20 years old.

在上面的示例中，age 参数被定义为可选参数。当只传递一个参数调用 greet 函数时，输出只包含问候语；当传递两个参数调用函数时，除了问候语外，还会输出年龄信息。

需要注意的是，可选参数必须位于必选参数后面。换句话说，如果一个参数是可选的，那么它之前的所有参数都必须是必选的。例如，下面的函数定义是错误的：

function saySomething(message?: string, name: string) {
    // ...
}

3. 可选参数对函数重载的影响

在 TypeScript 中，函数重载是一种定义多个函数签名的方法，以达到不同参数个数或类型的调用。可选参数对函数重载的定义和使用有一些影响。

function add(a: number, b: number): number;
function add(a: number, b: number, c: number): number;

function add(a: number, b: number, c?: number): number {
    if (c) {
        return a + b + c;
    }
    return a + b;
}

console.log(add(1, 2)); // Output: 3
console.log(add(1, 2, 3)); // Output: 6

在上面的代码中，我们定义了一个名为 add 的函数，使用了函数重载的方式。第一个函数签名表示只接受两个参数的调用，返回值为两个参数的和；第二个函数签名表示接受三个参数的调用，返回值为三个参数的和。注意最后的具体实现中，c 参数被定义为可选参数。

4. 默认参数值

除了可选参数，TypeScript 还支持给参数指定默认值。可以在参数声明时使用等号（=）给参数设置默认值。例如：

function greet(name: string, age: number = 18) {
    console.log(`Hello,  ${name}! You are$ {age} years old.`);
}

greet("Alice"); // Output: Hello, Alice! You are 18 years old.
greet("Bob", 20); // Output: Hello, Bob! You are 20 years old.

在上面的示例中，age 参数被赋予了默认值 18。当只传递一个参数调用 greet 函数时，age 参数取默认值；当传递两个参数调用函数时，age 参数取传递的实际值。

需要注意的是，默认参数只能位于必选参数后面，与可选参数一样。如果给一个参数指定了默认值，那么它之前的所有参数都必须是必选参数。例如，下面的函数定义是错误的：

function saySomething(message = "Hello", name: string) {
    // ...
}

5. 剩余参数

除了可选参数和默认参数，TypeScript 还提供了一种特殊的参数类型，即剩余参数（Rest Parameters）。剩余参数是一个用来表示一个参数序列的占位符，可以接收任意数量的参数。在函数定义时，可以使用三个点（…）将参数列表标记为剩余参数。

TypeScript可选参数