第3章：函数

可选参数与默认参数

可选参数

在 TypeScript 中，函数的参数可以通过添加 ? 标记为可选参数。这意味着调用函数时可以省略这些参数，而不会导致编译错误。

语法示例：

function greet(name: string, age?: number): string {
    if (age) {
        return `Hello, ${name}! You are ${age} years old.`;
    }
    return `Hello, ${name}!`;
}

特点：

  1. 可选参数必须位于必选参数之后。
  2. 未传递可选参数时，其值为 undefined。
  3. 类型检查会确保可选参数的使用是安全的。

错误示例：

function invalidGreet(age?: number, name: string) {} // 错误：必选参数不能跟在可选参数后

默认参数

TypeScript 支持为参数指定默认值，当调用者未提供该参数时，将使用默认值。默认参数的语法与 JavaScript 一致。

语法示例：

function createUser(
    name: string,
    role: string = "user",
    isActive: boolean = true
) {
    return { name, role, isActive };
}

特点：

  1. 默认参数可以位于必选参数之后或之前（但通常推荐放在末尾）。
  2. 默认值可以是任意表达式，甚至是函数调用。
  3. 默认参数的类型可以自动推断，无需显式注解。

进阶用法：

function logMessage(message: string, timestamp: Date = new Date()) {
    console.log(`[${timestamp.toISOString()}] ${message}`);
}

可选参数 vs 默认参数

特性可选参数默认参数
语法参数名后加 ?参数后接 = defaultValue
未传递时的值undefined指定的默认值
类型安全性需手动检查 undefined始终有值，无需额外检查
典型使用场景参数可能完全不需要参数需要兜底值

联合使用案例

function fetchData(
    url: string,
    method: "GET" | "POST" = "GET",
    cache?: boolean
) {
    console.log(`Fetching ${url} via ${method}`, cache ? "(cached)" : "");
}

// 合法调用：
fetchData("/api/users"); // 使用默认 method="GET", cache=undefined
fetchData("/api/posts", "POST"); // cache=undefined
fetchData("/api/comments", "GET", true);

注意事项

  1. 类型收缩：对可选参数操作前需进行存在性检查：

    function unsafeLength(text?: string) {
    return text.length; // 错误：可能为 undefined
}

function safeLength(text?: string) {
    return text?.length ?? 0; // 正确：使用可选链
}

  2. 默认参数触发时机：每次函数调用都会重新计算默认值表达式。

  3. 与函数重载的配合：当使用重载时，可选/默认参数需要在所有重载签名中保持一致。

Last Updated::