TypeScript函数参数可选destruct

在TypeScript中，可以使用可选参数和解构来使函数的参数更加灵活。

可选参数

在定义函数时，可以使用?来声明某个参数为可选参数。可选参数在函数调用时可以不传入参数值，此时参数的值为undefined。

function greeting(name?: string) {
  if (name) {
    return `Hello, ${name}!`;
  } else {
    return "Hello!";
  }
}

console.log(greeting());       // "Hello!"
console.log(greeting("John")); // "Hello, John!"

解构

解构是将数组或对象的元素赋值给变量。在函数中使用解构可以将函数参数的部分或全部解构为变量，使其更易读和清晰。

function invoiceTotal({subtotal, tax = 0.05}: {subtotal: number, tax?: number}) {
  return subtotal + (subtotal * tax);
}

console.log(invoiceTotal({subtotal: 100});         // 105
console.log(invoiceTotal({subtotal: 100, tax: 0.1}); // 110

上面的代码中，invoiceTotal函数使用了解构来从传递的对象中获取subtotal和tax参数。如果在调用函数时没有传递tax参数，则默认为0.05。

可选参数和解构

可选参数和解构可以一起使用，可以更灵活地定义函数参数。

function order({id, quantity = 1, description = ""}: {id: string, quantity?: number, description?: string}) {
  console.log(`${quantity} - ${description} (${id})`);
}

order({id: "123", quantity: 2, description: "Apple"}); // "2 - Apple (123)"
order({id: "456", quantity: 3});                       // "3 -  (456)"

上面的代码中，order函数接收一个对象参数，使用了解构将传递的值分别赋值给id、quantity和description变量。其中quantity和description都是可选参数，如果在调用函数时没有传递对应的值，则会使用默认值。