reactjs - 扩展另一个接口(interface)的通用接口(interface)

Question

我的组件界面

interface InputProps {
  value?:string,
  onChange?: (event: React.SyntheticEvent<HTMLInputElement>, data: string) => void;
}

我想编写包含 P 和 WrappedFieldProps 中所有属性的泛型类型

interface FormComponent<P> extends WrappedFieldProps  {
// props from P
// props from WrappedFieldProps
}

/*
// import { WrappedFieldProps } from 'redux-form'
interface WrappedFieldProps {
    input: WrappedFieldInputProps;
    meta: WrappedFieldMetaProps;
}
*/

并在通用函数 shouldComponentUpdate 中使用它

export function shouldFormFieldUpdate<P>(props: FormComponentProps<P>, nextProps: FormComponentProps<P>): boolean {
    const { input: { value }, meta: { valid, touched, error }, ...rest } = props;
    let result;
    // compare logic
    return result;
}

但我在 rest 变量上遇到 ts 错误:rest types may only be created from object types

Answer 1

你可以为此定义一个交集类型

type  FormComponent<P> = P & WrappedFieldProps ;
export function shouldFormFieldUpdate<P>(props: FormComponent<P>, nextProps: FormComponent<P>): boolean {
    const { input: { value }, meta: { valid, touched, error } } = props;
    let result;
    // compare logic
    return result;
}

上面代码的限制是你不能使用...rest。这是电流 limitation