跳到主要内容

TypeScript 默认参数

在编写函数时，我们经常会遇到一些参数是可选的，或者在某些情况下我们希望参数有一个默认值。TypeScript 提供了默认参数的功能，允许我们在定义函数时为参数指定默认值。这样，当调用函数时如果没有传递该参数，函数将使用默认值。

什么是默认参数？​

默认参数是指在函数定义时为参数指定一个默认值。如果调用函数时没有传递该参数，函数将使用这个默认值。默认参数可以简化函数调用，减少代码中的重复逻辑，并提高代码的可读性。

基本语法​

在 TypeScript 中，默认参数的语法非常简单。你只需要在函数参数后面使用 = 符号来指定默认值。

typescript
function greet(name: string = "Guest"): string {
    return `Hello, ${name}!`;
}

在这个例子中，name 参数的默认值是 "Guest"。如果调用 greet() 时不传递任何参数，函数将使用默认值 "Guest"。

typescript
console.log(greet()); // 输出: Hello, Guest!
console.log(greet("Alice")); // 输出: Hello, Alice!

默认参数的位置​

默认参数可以出现在参数列表的任何位置，但通常建议将默认参数放在参数列表的末尾。这是因为如果默认参数出现在非末尾位置，调用函数时必须显式传递 undefined 来使用默认值。

typescript
function createUser(name: string, age: number = 18, isAdmin: boolean = false) {
    return { name, age, isAdmin };
}

console.log(createUser("Bob")); // 输出: { name: 'Bob', age: 18, isAdmin: false }
console.log(createUser("Alice", 25)); // 输出: { name: 'Alice', age: 25, isAdmin: false }
console.log(createUser("Charlie", 30, true)); // 输出: { name: 'Charlie', age: 30, isAdmin: true }
备注

如果默认参数不在参数列表的末尾，调用函数时必须显式传递 undefined 来使用默认值。

默认参数与可选参数的区别​

默认参数和可选参数在某些情况下看起来很相似，但它们有本质的区别。

  • 默认参数：在函数定义时为参数指定一个默认值。如果调用函数时没有传递该参数，函数将使用默认值。
  • 可选参数：在函数定义时使用 ? 符号标记参数为可选。如果调用函数时没有传递该参数，参数的值将是 undefined。
typescript
function greetOptional(name?: string): string {
    return `Hello, ${name || "Guest"}!`;
}

function greetDefault(name: string = "Guest"): string {
    return `Hello, ${name}!`;
}

console.log(greetOptional()); // 输出: Hello, Guest!
console.log(greetDefault()); // 输出: Hello, Guest!
提示

默认参数和可选参数可以结合使用，但通常建议优先使用默认参数，因为它们提供了更明确的默认值。

实际应用场景​

默认参数在实际开发中非常有用，尤其是在处理配置对象或可选参数时。以下是一个实际应用场景的示例：

typescript
interface UserOptions {
    username: string;
    email?: string;
    isAdmin?: boolean;
}

function createUser(options: UserOptions) {
    const { username, email = "no-reply@example.com", isAdmin = false } = options;
    return { username, email, isAdmin };
}

const user1 = createUser({ username: "Alice" });
console.log(user1); // 输出: { username: 'Alice', email: 'no-reply@example.com', isAdmin: false }

const user2 = createUser({ username: "Bob", email: "bob@example.com", isAdmin: true });
console.log(user2); // 输出: { username: 'Bob', email: 'bob@example.com', isAdmin: true }

在这个例子中，email 和 isAdmin 参数都有默认值。如果调用 createUser 时没有传递这些参数，函数将使用默认值。

总结​

默认参数是 TypeScript 中一个非常有用的功能，它允许我们在定义函数时为参数指定默认值。这样可以简化函数调用，减少代码中的重复逻辑，并提高代码的可读性。默认参数通常建议放在参数列表的末尾，以避免调用函数时出现不必要的复杂性。

警告

在使用默认参数时，确保默认值的类型与参数的类型一致，以避免类型错误。

附加资源与练习​

  • 练习：尝试编写一个函数，接受多个参数并使用默认参数来处理可选参数。
  • 进一步学习：了解 TypeScript 中的剩余参数（Rest Parameters）和函数重载（Function Overloads），它们可以与默认参数结合使用，提供更强大的功能。

通过掌握默认参数的使用，你将能够编写更加灵活和可维护的 TypeScript 代码。继续练习并探索更多 TypeScript 的高级功能吧！