ts在函数的参数签名如果是?的参数怎么获取参数值

目录

1. 1. 使用 if 语句进行类型检查
2. 2. 使用逻辑或 (||) 运算符提供默认值
3. 3. 使用空值合并运算符 (??)
4. 4. 在函数签名中直接设置默认值
5. 📎 参考文章

在 TypeScript 中，如果一个函数的参数签名中带有 ?，表示该参数是可选的（optional）。这意味着调用函数时可以不传入这个参数，此时它的值会是 undefined。 要获取这个可选参数的值，你可以在函数体内部像获取任何其他参数一样直接引用它。不过，由于它可能是 undefined，所以在使用它之前，你需要进行类型检查或者提供一个默认值，以确保代码的健壮性。

1. 使用 if 语句进行类型检查#

这是最基本、最常见的获取可选参数值的方法。你可以检查参数是否为 undefined。 代码示例:

function greet(name: string, title?: string) {
  if (title) { // 检查 title 是否存在，它会自动排除 null 和 undefined
    console.log(`Hello, ${title} ${name}!`);
  } else {
    console.log(`Hello, ${name}!`);
  }
}

// 调用示例
greet("Alice");           // 输出: "Hello, Alice!"
greet("Bob", "Dr.");      // 输出: "Hello, Dr. Bob!"
greet("Charlie", undefined); // 输出: "Hello, Charlie!"

---

2. 使用逻辑或 (||) 运算符提供默认值#

如果你想为可选参数提供一个后备值，可以使用 || 运算符。当 title 为 falsy 值（如 undefined, null, '', 0 等）时，会使用 || 后面的值。 代码示例:

function greetWithDefault(name: string, title?: string) {
  const displayTitle = title || "Mr./Ms.";
  console.log(`Hello, ${displayTitle} ${name}!`);
}

// 调用示例
greetWithDefault("David");        // 输出: "Hello, Mr./Ms. David!"
greetWithDefault("Eve", "Ms.");   // 输出: "Hello, Ms. Eve!"
greetWithDefault("Frank", "");    // 输出: "Hello, Mr./Ms. Frank!"

---

3. 使用空值合并运算符 (??)#

如果你只关心参数是否是 null 或 undefined，并且不希望像 || 运算符那样将空字符串 '' 或数字 0 视为默认值，可以使用 ?? 运算符。 代码示例:

function greetWithNullish(name: string, title?: string) {
  const displayTitle = title ?? "Mr./Ms.";
  console.log(`Hello, ${displayTitle} ${name}!`);
}

// 调用示例
greetWithNullish("Grace");        // 输出: "Hello, Mr./Ms. Grace!"
greetWithNullish("Henry", "");    // 输出: "Hello,  Henry!" (注意这里的空字符串被保留了)

---

4. 在函数签名中直接设置默认值#

这是 TypeScript 和现代 JavaScript 推荐的方式。你可以在参数签名中直接为可选参数设置一个默认值。这样，当调用时没有传入该参数或传入 undefined 时，该默认值就会被自动使用。 代码示例:

function greetWithParamDefault(name: string, title: string = "Mr./Ms.") {
  console.log(`Hello, ${title} ${name}!`);
}

// 调用示例
greetWithParamDefault("Ivy");        // 输出: "Hello, Mr./Ms. Ivy!"
greetWithParamDefault("Jack", "Dr."); // 输出: "Hello, Dr. Jack!"
greetWithParamDefault("Kate", undefined); // 输出: "Hello, Mr./Ms. Kate!"

📎 参考文章#