TypeScript泛型默认值与类型推断的优先级规则

TypeScript的泛型提供了强大的类型灵活性。当你在使用泛型时，可能会遇到两种指定类型的方式：通过类型推断和通过泛型默认值。当这两种方式同时出现时，TypeScript遵循特定的优先级规则来决定最终类型。本文将手把手教你理解这些规则，避免常见的类型错误。

理解泛型默认值

泛型默认值允许你在定义泛型时，为类型参数指定一个默认类型。如果调用方没有提供类型参数，TypeScript将使用这个默认类型。

// 定义一个泛型函数，默认类型为 string
function getDefaultValue<T = string>(): T {
  return "default value" as T;
}

// 调用时未指定类型，使用默认值 string
const defaultValue = getDefaultValue(); // T 被推断为 string

在这个例子中，即使我们没有在调用 getDefaultValue 时指定 <T>，TypeScript也知道 T 应该是 string，因为我们为它设置了一个默认值。

理解类型推断

类型推断是TypeScript的智能之处。当你调用一个泛型函数并传入一个具体的值时，TypeScript会根据这个值的类型自动推断出泛型参数的类型。

function identity<T>(arg: T): T {
  return arg;
}

// 调用时传入 123，TypeScript 推断 T 为 number
const num = identity(123); // num 的类型是 number

// 调用时传入 "hello"，TypeScript 推断 T 为 string
const str = identity("hello"); // str 的类型是 string

这里，我们没有告诉TypeScript T 是什么，但通过传入的参数 123 或 "hello"，它自己“猜”出了正确的类型。

核心优先级规则

当泛型默认值和类型推断同时存在时，TypeScript遵循一个清晰的优先级顺序：显式类型参数 > 类型推断 > 泛型默认值。

场景1：显式类型参数 vs. 类型推断

当你显式指定了类型参数时，它将覆盖任何推断。

function process<T>(input: T): T {
  return input;
}

// 显式指定 T 为 string，即使传入的是 number
const result = process<string>(123); // 错误！类型 '123' 不能赋给类型 'string'

在这个例子中，我们强制 T 为 string，但传入的参数是 number，因此TypeScript报错，因为它无法将 number 赋值给 string。

场景2：类型推断 vs. 泛型默认值

这是最常见的冲突场景。如果调用时提供了参数，类型推断的优先级高于泛型默认值。

function create<T = string>(item: T): T {
  return item;
}

// 传入参数 123，TypeScript 推断 T 为 number，覆盖了默认值 string
const numItem = create(123); // T 是 number

// 传入参数 "abc"，TypeScript 推断 T 为 string，与默认值一致
const strItem = create("abc"); // T 是 string

尽管 create 函数为 T 设置了默认值 string，但当我们传入 123 时，TypeScript通过参数推断出 T 应该是 number，并以此为准。只有当我们传入的参数类型与默认值一致，或者没有参数（需要调整函数签名）时，默认值才会生效。

场景3：显式类型参数 vs. 泛型默认值

当你显式指定类型参数时，它将覆盖泛型默认值。

function fetch<T = any>(url: string): Promise<T> {
  return fetch(url).then(res => res.json());
}

// 显式指定 T 为 User，覆盖默认值 any
interface User { id: number; name: string; }
const userPromise = fetch<User>('/api/user'); // T 是 User

这里，fetch 函数的默认类型是 any，但我们通过 <User> 显式地告诉TypeScript我们期望返回一个 User 对象，这覆盖了默认的 any 类型。

实际应用与最佳实践

理解这些规则后，你可以在实际项目中做出更好的设计决策。

何时使用泛型默认值？

1. 提供便利性：当你希望一个泛型在大多数情况下使用一个常见类型，但仍然允许灵活性时。
2. 向后兼容：在库或组件中，为新的泛型参数提供默认值，以保持旧代码的兼容性。
3. React组件Props：为组件的props定义一个默认类型，使组件更易于使用。

import React from 'react';

interface ButtonProps<T = string> {
  label: T;
  onClick: () => void;
}

function Button<T = string>({ label, onClick }: ButtonProps<T>) {
  return <button onClick={onClick}>{label}</button>;
}

// 使用默认值 string，代码更简洁
const StringButton = <Button label="Click Me" onClick={() => {}} />;

// 显式指定类型为 number
const NumberButton = <Button<number> label={123} onClick={() => {}} />;

何时依赖类型推断？

1. 代码简洁性：当你希望代码更简洁，让TypeScript自动处理类型时。
2. 最大灵活性：当你不确定调用者会传入什么类型，或者希望保持最大灵活性时。

// 推荐：让TypeScript推断
const data = fetchData('/api/posts');

// 不推荐（除非必要）：显式指定类型
const data: Post[] = fetchData<Post[]>('/api/posts');

关键要点

• 优先使用类型推断，因为它使代码更简洁、更易读。
• 仅在必要时使用泛型默认值，例如为了向后兼容或提供便利。
• 显式类型参数应谨慎使用，通常用于满足特定类型约束或提高代码可读性，避免滥用。