Question

我最近正在尝试将React应用从JS转换为TS。为此，我想到了这个问题。关于如何解决这个问题的想法。我转换为ts方法是否错误？

我在JS代码中添加了接口，希望是这样，但我无法克服这个问题

export default React.memo<CheckBoxProps>(
  ({
**line23->**  data: { value, editable = true, error, label, required = false, name },
    focused,
    userColor,
    listeners
  }) => {
    const hasError = !!error;
    return (
      <CheckboxWrapper focused={focused} userColor={userColor}>
        <Checkbox
          name={name}
          isChecked={value}
          isInvalid={hasError}
          // isDisabled={!editable}
          isRequired={required}
          label={label}
          {...listeners}
        />
        {error && <Error>{error}</Error>}
      </CheckboxWrapper>
    );
  }
);

interface CheckBoxProps {
  data: CheckBoxData[];
  focused: boolean;
  userColor;
  listeners;
}

export interface CheckBoxData {
  value: number;
  editable: boolean;
  error: string;
  label: string;
  required: boolean;
  name: string;
}

错误提示：TS2339：类型'CheckBoxData []'不存在属性'value'。

Answer 1

我最好的猜测是您需要data: CheckBoxData而不是data: CheckBoxData[]。

interface CheckBoxProps {
  data: CheckBoxData;
  focused: boolean;
  // type missing in following properties, temporarily fixed with any
  userColor: any;
  listeners: any;
}

我认为错误消息很能说明问题，data的类型为CheckBoxData[]，使data成为数组。因此该行的销毁就像写data.value一样，数组没有value属性，因此会出错。

如何解决“类型CheckBoxData []中不存在属性'值'”的问题？

1 个答案: