TypeScript 泛型默认值与约束的优先级

TypeScript 中的泛型是构建可复用组件的核心工具，但在实际开发中，很多开发者对“默认值”与“约束”同时存在时的执行顺序存在误解。理解这两者的优先级，能帮助你编写更灵活且类型安全的代码。

步骤 1：掌握声明语法

理解 extends 约束和 = 默认值之间的交互从正确的语法开始。正确的顺序永远是先写约束，紧接着是默认值。

在编辑器中 输入 以下代码结构：

interface Lengthwise {
  length: number;
}

// 语法： <T extends Constraint = Default>
function createLogger<T extends Lengthwise = string>(arg: T): T {
  console.log(arg.length);
  return arg;
}

分析 代码：

1. extends Lengthwise 定义了 T 必须拥有 length 属性。
2. = string 设定了默认类型为 string。因为字符串拥有 .length，所以 string 成功满足了 Lengthwise 约束。

步骤 2：验证默认值必须满足约束

TypeScript 会严格检查默认值是否符合约束条件。如果默认值违反了约束，代码将在编译阶段直接报错。

编写 一个故意出错的代码片段来观察这一行为：

// 错误示例：默认值 'number' 不满足约束 'Lengthwise'
function brokenLogger<T extends Lengthwise = number>(arg: T): T {
  return arg;
}

观察 编辑器提示的错误信息：
Type 'number' does not satisfy the constraint 'Lengthwise'.

结论：默认值的类型安全性由约束决定。你不能指定一个不满足 extends 要求的默认值。

步骤 3：测试显式传入类型

当你在调用函数时显式指定了类型参数，默认值会被完全忽略，此时优先级最高。约束依然会对传入的类型进行检查。

运行 以下代码：

// 显式传入 'Array' 类型
const result1 = createLogger<Array<number>>([1, 2, 3]);

// 显式传入符合约束的普通对象
const result2 = createLogger<{ length: number; value: string }>({
  length: 10,
  value: "test"
});

观察 结果：

1. Array 拥有 length 属性，符合约束。
2. 虽然默认值是 string，但因为我们显式传入了 Array，T 变成了 Array<number>。

如果尝试传入一个不满足约束的类型：

// 错误：number 类型没有 length 属性
const errorResult = createLogger<number>(100);

步骤 4：测试隐式类型推断与默认值应用

当调用时不传入泛型参数，TypeScript 会尝试根据参数进行类型推断。如果无法推断（或参数类型即为 undefined），默认值就会生效。

执行 以下调用：

// 场景 A：传入字符串，TypeScript 推断 T 为 string
const inferred1 = createLogger("Hello World"); 
// 此时 T 是 "Hello World" (string 的字面量子类型)，不是默认值 string

// 场景 B：利用默认值 (通过断言或特定构造)
// 注意：通常默认值主要在配置对象或可选泛型中体现

为了更直观地看到默认值生效，定义一个带有配置对象的函数：

interface Options {
  verbose: boolean;
}

// 默认配置类型为 Options，且约束必须有 verbose 属性
function initConfig<T extends Options = Options>(config?: T): T {
  return config || { verbose: false } as T;
}

// 1. 不传参数，T 使用默认值 Options
const defaultConfig = initConfig(); 
// 类型推断为：Options

// 2. 传入部分符合约束的对象，T 推断为该对象类型
const customConfig = initConfig({ verbose: true, debug: true });
// 类型推断为：{ verbose: boolean; debug: boolean }

步骤 5：查阅优先级规则速查表

通过实际测试，我们可以总结出泛型系统的判定优先级。

步骤 6：处理复杂的默认值依赖

在某些高级场景下，默认值可能依赖于另一个泛型参数。

输入 以下代码，观察多泛型间的约束与默认值关系：

// O 默认为空对象，但约束必须包含 K 类型的属性
function pick<T, K extends keyof T = keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: "Alice", age: 25 };

// K 默认推断为 "name" | "age"
// 如果不传第二个参数，或者不指定泛型，需要处理默认值逻辑
// 注意：在这个具体的 pick 函数中，K 是从第二个参数推断的，默认值通常用于第二个参数可选的情况

修改为更清晰的默认值生效案例：

// O 的默认值是 { name: string }
// K 的默认值是 'name'，且约束必须是 O 的键
function getName<O extends { name: string } = { name: string }, K extends keyof O = 'name'>(obj: O, key?: K): O[K] {
  return obj[key || 'name' as any];
}

// 使用默认值 O 和 K
const name = getName({ name: "Default" }); 

重点：K 的默认值 'name' 必须存在于 O 的默认值 { name: string } 的键中。如果 O 的默认值改变导致没有 name 键，代码将报错。

步骤 7：实战应用

创建一个通用的 API 响应处理类，利用默认值简化常用调用。

// 约束：必须包含 code 和 message
// 默认值：标准的成功响应结构
class ApiResponse<T extends { code: number; message: string } = { code: 200; message: "OK" }> {
  constructor(public data: T) {}
}

// 用法 1：使用默认结构
const okResponse = new ApiResponse({ code: 200, message: "Success" });

// 用法 2：扩展结构
interface ErrorData {
  code: number;
  message: string;
  errorDetails: string;
}
const errorResponse = new ApiResponse<ErrorData>({
  code: 500,
  message: "Server Error",
  errorDetails: "Database connection failed"
});

通过这种方式，既保证了类型约束的严格性，又为标准场景提供了零配置的便利性。