如何实现仅传入类型变量时扩展Option的TypeScript组件泛型定义？

架构老林

2026-7-5

解决方法

你可以通过泛型默认值+条件类型或者函数重载来实现需求，既保留默认的Option | string | null类型，又限制显式传入的类型必须是Option的子类型。

写法一：泛型条件类型方案

// 定义默认类型，方便复用
type DefaultAutoCompleteType = Option | string | null;

export const AutoComplete = <T extends Option = never>({
  options,
  label,
  onChange,
}: AutoCompleteProps<T extends never ? DefaultAutoCompleteType : T>) => {
  // 你的组件逻辑
};

不显式传入类型参数时，T会使用默认值never，条件类型会自动返回DefaultAutoCompleteType（即Option | string | null）
显式传入类型参数时，T必须满足extends Option的约束，否则TypeScript会直接报错

写法二：函数重载方案（更直观）

如果觉得泛型条件类型有点绕，也可以用函数重载实现：

// 重载1：不指定类型参数时，使用默认类型
export function AutoComplete(props: AutoCompleteProps<Option | string | null>): JSX.Element;
// 重载2：指定类型参数时，必须是Option的子类型
export function AutoComplete<T extends Option>(props: AutoCompleteProps<T>): JSX.Element;

// 组件实现
export function AutoComplete<T>(props: AutoCompleteProps<T>) {
  // 你的组件逻辑
}