联合函数的 TypeScript 通用包装器

问题描述 投票:0回答:0

我不知道如何输入包装函数。我正在创建一个实用程序,它将

console.log
添加到表单控件的
onChange
回调中。我在这里错过了什么?

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);
        // Error: A spread argument must either have a tuple type or be passed to a rest parameter.(2556)
        return formControl.onChange(...args);
    },
});

我尝试了多种输入 onChange 包装器参数的方法,包括:

onChange: (value: any) => formControl.onChange(value)
onChange: <TValue>(value: TValue) => formControl.onChange(value)
onChange: (value: number | string) => formControl.onChange(value)

这些会失败

Argument of type 'string | number' is not assignable to parameter of type 'never'. Type 'string' is not assignable to type 'never'.(2345)

编辑:TypeScript 操场链接

typescript generics union
© www.soinside.com 2019 - 2024. All rights reserved.