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

Question

我正在使用带有 react native 的 TypeScript，当我编写代码时出现错误，即 类型 '{ id: string; 上不存在属性 'selected'值：字符串；标签：字符串；颜色：字符串； }'.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;
}

或者，如果您无法为您的数据定义模型，您可以使用类型 any 来表示 state：

 state : any = {...}

注意：

any 类型允许您将字面意义上的“any”特定值分配给该变量