面试题-TS(10)：如何处理可选属性和默认参数？
1. 可选属性
1.1 什么是可选属性？
在TypeScript中，可选属性是指在定义接口或类时，指定某些属性不是必须的，可以存在也可以不存在。使用可选属性可以让我们定义更灵活的数据结构，允许对象中包含额外的属性，而不会报错。
1.2 如何定义可选属性？
在接口中，我们可以在属性名后面加上?来定义可选属性。在类中，我们可以在属性声明时赋予undefined初始值，也可以在构造函数参数中使用?来指定可选属性。
以下是一个简单的可选属性的示例：
// 定义接口
interface Person {
name: string;
age?: number; // 可选属性
}
// 定义类
class MyClass {
name: string;
age?: number; // 可选属性
constructor(name: string, age?: number) {
this.name = name;
this.age = age;
}
}
1.3 如何使用可选属性？
在使用对象时，我们可以根据需要赋值给可选属性，也可以不赋值，它们都是合法的。
// 使用接口
const person1: Person = {
name: "John" };
const person2: Person = {
name: "Alice", age: 25 };
// 使用类
const obj1 = new MyClass("Bob");
const obj2 = new MyClass("Eve", 30);
在上面的示例中，我们创建了两个Person类型的对象，其中age属性是可选的。在使用类MyClass创建对象时，age参数也是可选的，可以根据需要传递。
2. 默认参数
2.1 什么是默认参数？
在TypeScript中，默认参数是指在函数声明时为参数提供默认值。当函数调用时未传递该参数或传递undefined时，将使用默认值。
2.2 如何定义默认参数？
在函数声明中，我们可以为参数指定默认值。这可以通过在参数名后面使用赋值操作符=来实现。
以下是一个带有默认参数的示例：
// 带有默认参数的函数
function greet(name: string, greeting: string = "Hello") {
console.log(`${greeting}, ${name}!`);
}
2.3 如何使用默认参数？
在调用带有默认参数的函数时，我们可以选择不传递该参数，这样函数会使用默认值。
greet("John"); // 输出：Hello, John!
greet("Alice", "Hi"); // 输出：Hi, Alice!
greet("Bob", undefined);// 输出：Hello, Bob! (undefined会使用默认值)
在上面的示例中，我们调用了greet函数，其中第二个参数greeting是带有默认值的。在第一个例子中，我们未传递第二个参数，所以函数使用了默认值"Hello"。在第二个例子中，我们传递了第二个参数"Hi"，所以函数使用了我们传递的值。在第三个例子中，我们传递了undefined，这也会使用默认值。
3. 可选属性和默认参数的灵活性应用
3.1 函数中的可选参数和默认参数
在函数中，可选参数和默认参数可以一起使用，以提供更大的灵活性。我们可以将一些参数定义为可选的，将一些参数定义为带有默认值的。
以下是一个例子：
function sendMessage(message: string, recipient?: string, sender: string = "Unknown") {
console.log(`From: ${sender}, To: ${recipient || "Everyone"}, Message: ${
message}`);
}
在上面的示例中，我们定义了一个sendMessage函数，其中recipient和sender参数是可选的和带有默认值的。这样，我们在调用函数时，可以只传递必要的参数，而其他参数会使用默认值。
sendMessage("Hello"); // 输出：From: Unknown, To: Everyone, Message: Hello
sendMessage("Hi", "John"); // 输出：From: Unknown, To: John, Message: Hi
sendMessage("Hey", "Alice", "Bob"); // 输出：From: Bob, To: Alice, Message: Hey
3.2 对象中的可选属性和默认属性
在对象中，我们可以将一些属性定义为可选属性，将一些属性定义为带有默认值的属性。这样可以创建更灵活的对象结构，允许对象中包含额外的属性，并提供默认值。
以下是一个例子：
interface Person {
name: string;
age?: number;
gender?: string;
}
function createPerson(info: Person) {
const {
name, age = 0, gender = "Unknown" } = info;
console.log(`Name: ${name}, Age: ${age}, Gender: ${
gender}`);
}
在上面的示例中，我们定义了一个Person接口，其中age和gender属性是可选的和带有默认值的。在createPerson函数中，我们解构传入的info对象，并使用默认值来处理未传递的属性。
createPerson({
name: "John" }); // 输出：Name: John, Age: 0, Gender: Unknown
createPerson({
name: "Alice", age: 25 }); // 输出：Name: Alice, Age: 25, Gender: Unknown
createPerson({
name: "Bob",gender: "Male" }); // 输出：Name: Bob, Age: 0, Gender: Male
在上面的示例中，我们分别创建了三个Person对象，其中age和gender属性都是可选的。函数会根据传入的对象使用默认值，或者使用对象中的值。
4. 小结
可选属性和默认参数是TypeScript中用于提供灵活性的两个重要特性。可选属性允许我们在定义接口和类时指定某些属性是可选的，而默认参数允许我们为函数参数提供默认值。在使用这两个特性时，我们可以根据需要为对象和函数提供更灵活的数据结构和调用方式。通过合理使用可选属性和默认参数，我们可以使代码更简洁、更易于维护，并提高代码的可读性和可复用性。让我们在TypeScript中充分利用这两个特性，构建出更优雅的应用程序。
