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。