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 请求时,某些查询参数可能是可选的。例如,分页参数 page
和 limit
可能是可选的。
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
。 - 可选参数与默认参数不同,默认参数在省略时会使用预先定义的默认值。
附加练习
- 编写一个函数
calculateArea
,接受width
和height
作为参数,其中height
是可选的。如果height
未提供,则计算正方形的面积。 - 修改
fetchData
函数,使其支持更多的可选查询参数,如sort
和filter
。