4.2 可选参数与默认参数 - 全栈应用开发修炼手册课程

🎯 学习目标

掌握可选参数的定义方法
理解默认参数的使用
学会正确处理可选参数的空值
了解可选参数与默认参数的区别

❓ 可选参数

// 使用 ? 标记可选参数
function greet(name: string, greeting?: string): string {
  if (greeting) {
    return `${greeting}, ${name}!`;
  }
  return `Hello, ${name}!`;
}

greet('Alice');              // "Hello, Alice!"
greet('Bob', 'Hi');          // "Hi, Bob!"

// 可选参数必须放在必需参数后面
function buildName(firstName: string, lastName?: string) {
  return lastName ? `${firstName} ${lastName}` : firstName;
}

buildName('John');           // "John"
buildName('John', 'Doe');    // "John Doe"
      

⚠️

可选参数位置

可选参数必须放在必需参数之后，否则会编译错误。

⚙️ 默认参数

// 使用 = 设置默认值
function greet(name: string, greeting: string = 'Hello'): string {
  return `${greeting}, ${name}!`;
}

greet('Alice');              // "Hello, Alice!"
greet('Bob', 'Hi');          // "Hi, Bob!"
greet('Charlie', undefined); // "Hello, Charlie!"

// 默认参数可以放在前面（不推荐）
function buildName(firstName: string = 'John', lastName: string) {
  return `${firstName} ${lastName}`;
}

buildName(undefined, 'Doe'); // "John Doe"
buildName('Jane', 'Smith');  // "Jane Smith"
      

📊 对比表格

特性	可选参数	默认参数
语法	param?: type	param: type = default
不传参时值	undefined	默认值
位置要求	必须在必需参数后	无限制
类型推断	type \| undefined	type

📝 本节小结

✅

• ? 标记可选参数，值为 undefined
• = 设置默认参数值
• 可选参数必须在必需参数后
• 默认参数不影响类型推断