TypeScript 属性 'selected' 不存在于类型 '{ id: string;值：字符串；标签：字符串；颜色：字符串； }'.ts(2339)

Question

我将 TypeScript 与 React Native 结合使用，当我编写代码时出现错误，即属性 'selected' 不存在于类型 '{ id: string;值：字符串；标签：字符串；颜色：字符串； }'.ts(2339) 和类型 'string' 不可分配给类型 '{ id: string;值：字符串；标签：字符串；颜色：字符串； } |未定义'.ts(2322)

我的代码是：

export default class Instant extends Component {

  state = {
    one: [

      {
        id: "a0",
        value: "a0",
        label: 'A0',
        color: 'grey',
        checked: false,
      },
      {
        id: "a1",
        value: "a1",
        label: 'A1',
        color: 'grey',
        checked: false,
      },
      {
        id: "a2",
        value: "a2",
        label: 'A2',
        color: 'grey',
        checked: false,
      },
      {
        id: "a3",
        value: "a3",
        label: 'A3',
        color: 'grey',
        checked: false,
      },
      {
        id: "a4",
        value: "a4",
        label: 'A4',
        color: 'grey',
        checked: false,
      },
      {
        id: "a5",
        value: "a5",
        label: 'A5',
        color: 'grey',
        checked: false,
      },
    ],
    data: [
      {
        id: "Normal",
        value: "normal",
        label: 'normal',
        color: 'grey',
      },
      {
        id: "Gloss",
        value: "gloss",
        label: 'gloss',
        color: 'grey',
      },
      {
        id: "Strong",
        value: "strong",
        label: 'strong',
        color: 'grey',
      },
      {
        id: "Re-used",
        value: "reused",
        label: 're-used',
        color: 'grey',
      },
    ],
    two: [
      {
        id: "Color",
        value: "color",
        label: 'color',
        color: 'grey',
      },
      {
        id: "Black&White",
        value: "black&white",
        label: 'black and white',
        color: 'grey',
      },
    ],
    three: [
      {
        id: "Two-side",
        value: "twoside",
        label: 'two side',
        color: 'grey',
      },
      {
        id: "One-side",
        value: "oneside",
        label: 'one side',
        color: 'grey',
      },
    ],
  };

  onPress = (data: any) => this.setState({ data });
  render() {
    let selectedButton = this.state.data.find(s => s.selected == true);
    selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;

最后的结果肯定是这样的，运行正常，但是在VSCode上还是报错了。 enter image description here

Answer 1

您没有为您的对象定义 selected 属性。在您的对象模型中定义一个 optional 属性。例如：

export interface stateModel {
  id: string;
  value: string;
  label: string;
  color: string;
  checked: boolean;
  selected?: boolean;
}

或者，如果您无法为数据定义模型，则可以为 state 使用类型 any:

 state : any = {...}

注意：

The any type allows you to assign literally “any” particular value to that variable

TypeScript 属性 'selected' 不存在于类型 '{ id: string;值：字符串；标签：字符串；颜色：字符串； }'.ts(2339)

TypeScript Property 'selected' does not exist on type '{ id: string; value: string; label: string; color: string; }'.ts(2339)

reactjs

typescript

native