TypeScript联合类型函数泛型包装器类型定义问题

问题背景 #

要给表单控件的onChange回调添加日志功能，但在定义包装函数类型时遇到两个核心错误：

• 展开参数时报错：A spread argument must either have a tuple type or be passed to a rest parameter.(2556)
• 尝试用any、泛型TValue或string | number定义参数时，报错：Argument of type 'string | number' is not assignable to parameter of type 'never'.(2345)

原代码如下：

interface TextInput {
    type: 'TextInput';
    onChange: (value: string) => void;
}

interface NumberInput {
    type: 'NumberInput';
    onChange: (value: number) => void;
}

type FormControl = TextInput | NumberInput;

export const withLogger = <TFormControl extends FormControl>(formControl: TFormControl): TFormControl => ({
    ...formControl,
    onChange: (...args: Parameters<TFormControl['onChange']>) => {
        console.log(formControl.type, 'onChange', args);
        // 错误：A spread argument must either have a tuple type or be passed to a rest parameter.(2556)
        return formControl.onChange(...args);
    },
});

问题原因 #

• TypeScript对泛型约束下的联合类型参数推导存在限制：当TFormControl是FormControl（联合类型）的子类型时，Parameters<TFormControl['onChange']>会被视为联合元组，直接展开传递给原onChange时，TypeScript无法确认参数类型完全匹配。
• 当尝试用string | number作为参数类型时，联合类型的onChange参数会被TypeScript推导为never（因为string和number的交集为空），导致类型不兼容。

解决方案 #

通过类型断言明确原onChange的参数类型，或者利用条件类型精确推导，这里给出两种可行写法：

写法1：类型断言消除参数匹配歧义 #

export const withLogger = <TFormControl extends FormControl>(formControl: TFormControl): TFormControl => ({
    ...formControl,
    onChange: (...args: Parameters<TFormControl['onChange']>) => {
        console.log(formControl.type, 'onChange', args);
        // 用类型断言告诉TS，原onChange可以接收当前args类型
        return (formControl.onChange as (...args: Parameters<TFormControl['onChange']>) => void)(...args);
    },
});

写法2：利用条件类型精确约束泛型 #

通过让泛型直接绑定到具体的控件类型标识，让TypeScript自动分发类型推导：

export const withLogger = <T extends FormControl['type']>(
    formControl: Extract<FormControl, { type: T }>
): Extract<FormControl, { type: T }> => ({
    ...formControl,
    onChange: (...args: Parameters<Extract<FormControl, { type: T }>['onChange']>) => {
        console.log(formControl.type, 'onChange', args);
        return formControl.onChange(...args);
    },
});

验证效果 #

两种写法都能正确保留原控件的类型约束：

• 传入TextInput时，onChange只能接收string类型参数
• 传入NumberInput时，onChange只能接收number类型参数
• 日志能正确打印控件类型和触发的参数

内容的提问来源于stack exchange，提问作者no drama llama