如何修复“CheckBox Data[] 类型上不存在属性‘值’”？答案

【问题标题】：How to fix "Property 'value' doesnt exist on type CheckBoxData[ ]"?如何修复“CheckBox Data[] 类型上不存在属性‘值’”？
【发布时间】：2019-05-10 09:07:55
【问题描述】：

我最近尝试将 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[]”类型上不存在属性“值”。

【问题讨论】：

您在哪里向CheckBoxData[] 添加数据？它似乎是空的。

标签： javascript reactjs typescript

【解决方案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属性因此错误。

【讨论】：