跳到主要内容

TypeScript 可选参数

在 TypeScript 中,函数参数可以是可选的。这意味着在调用函数时,某些参数可以省略,而不会导致编译错误。可选参数为函数提供了更大的灵活性,特别是在处理不确定输入的情况下。

什么是可选参数?

可选参数是指在函数定义中,某些参数可以被省略而不影响函数的调用。在 TypeScript 中,我们可以通过在参数名后面添加一个问号(?)来标记一个参数为可选参数。

基本语法

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

在上面的例子中,age 是一个可选参数。这意味着在调用 greet 函数时,可以只传递 name 参数,而不传递 age 参数。

调用示例

typescript
console.log(greet("Alice")); // 输出: Hello, Alice!
console.log(greet("Bob", 30)); // 输出: Hello, Bob! You are 30 years old.
备注

可选参数必须位于必选参数之后。如果尝试将可选参数放在必选参数之前,TypeScript 会报错。

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

可选参数和默认参数都可以让函数在调用时省略某些参数,但它们的行为有所不同。

  • 可选参数:如果省略了可选参数,它的值将是 undefined
  • 默认参数:如果省略了默认参数,它的值将是预先定义的默认值。

示例对比

typescript
// 可选参数
function greetOptional(name: string, age?: number): string {
return `Hello, ${name}! Age: ${age}`;
}

// 默认参数
function greetDefault(name: string, age: number = 25): string {
return `Hello, ${name}! Age: ${age}`;
}

console.log(greetOptional("Alice")); // 输出: Hello, Alice! Age: undefined
console.log(greetDefault("Bob")); // 输出: Hello, Bob! Age: 25
提示

如果你希望参数在省略时有一个默认值,而不是 undefined,请使用默认参数。

实际应用场景

可选参数在实际开发中非常有用,特别是在处理不确定输入的情况下。以下是一些常见的应用场景:

1. 表单验证

在表单验证函数中,某些字段可能是可选的。例如,用户可以选择是否填写他们的电话号码。

typescript
function validateForm(name: string, email: string, phone?: string): boolean {
if (!name || !email) {
return false;
}
if (phone && !isValidPhoneNumber(phone)) {
return false;
}
return true;
}

2. API 请求

在发送 API 请求时,某些查询参数可能是可选的。例如,分页参数 pagelimit 可能是可选的。

typescript
function fetchData(endpoint: string, queryParams?: { page?: number, limit?: number }) {
const url = new URL(endpoint);
if (queryParams?.page) {
url.searchParams.set("page", queryParams.page.toString());
}
if (queryParams?.limit) {
url.searchParams.set("limit", queryParams.limit.toString());
}
return fetch(url.toString());
}

3. 配置对象

在处理配置对象时,某些配置项可能是可选的。例如,配置一个日志记录器时,日志级别可能是可选的。

typescript
interface LoggerConfig {
level?: string;
format?: string;
}

function configureLogger(config: LoggerConfig) {
const level = config.level || "info";
const format = config.format || "json";
// 配置日志记录器
}

总结

可选参数是 TypeScript 中一个非常有用的特性,它允许我们在定义函数时指定某些参数是可选的。通过使用可选参数,我们可以编写更加灵活和健壮的代码,特别是在处理不确定输入的情况下。

关键点回顾

  • 可选参数通过在参数名后添加 ? 来定义。
  • 可选参数必须位于必选参数之后。
  • 可选参数在省略时的值为 undefined
  • 可选参数与默认参数不同,默认参数在省略时会使用预先定义的默认值。

附加练习

  1. 编写一个函数 calculateArea,接受 widthheight 作为参数,其中 height 是可选的。如果 height 未提供,则计算正方形的面积。
  2. 修改 fetchData 函数,使其支持更多的可选查询参数,如 sortfilter

进一步阅读