面试题-TS(十)：如何处理可选属性和默认参数？

面试题-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中充分利用这两个特性，构建出更优雅的应用程序。