屬性'options'在'{question:number,label:string;型別中是可選的...etc}'但在型別'{question:an

我正在使用 React 和 Typescript。我的終端出現以下錯誤，目前尚不清楚我做錯了什么。

    TS2322: Type '{ question: number; label: string; prop: string; type: string; style: string; placeholder?: string; options?: any; }' is not assignable to type '{ question: any; label: any; prop: any; style: any; type: any; options: any; }'.
  Property 'options' is optional in type '{ question: number; label: string; prop: string; type: string; style: string; placeholder?: string; options?: any; }' but required in type '{ question: any; label: any; prop: any; style: any; type: any; options: any; }'.

下面是相關代碼。請注意，在我使用介面之前以及創建介面之后，我都遇到了這個錯誤。該錯誤發生在我的 Dropdown 組件在下面的 formGroup 組件中。我究竟做錯了什么？

// 表單組組件

const myForm: Form = FORM.step_1;

const FormGroup = props => {
  const test = '';
  return (
    <div>
      {myForm.controls.map(form => {
        if (form.type === 'text') {
          return (
            <TextInput
              {...form}
            />
          );
        }
        if (form.type === 'dropdown') {
          return (
            <Dropdown
              {...form}
            />
          );
        }
      })}
    </div>
  );
};

export default FormGroup;

//下拉組件

interface IFormInput {
  gender: GenderEnum;
}

enum GenderEnum {
  female = "female",
  male = "male",
  other = "other",
}

const Dropdown = ({
  question,
  label,
  prop,
  style,
  type,
  options,
}) => {
  const { register, handleSubmit } = useForm<IFormInput>();
  const onSubmit: SubmitHandler<IFormInput> = data => console.log(data);


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>{question && `${question}.`} {label}</label>
      <select {...register("gender")}>

        <option value="female">female</option>
        <option value="male">male</option>
        <option value="other">other</option>
      </select>
      <input type="submit" />
    </form>
  );
};

export default Dropdown;

// 資料物件

export interface Form {
  step_1: Controls
}
export interface Controls {
  controls: Array<FormConfiguration>
}

export interface FormConfiguration {
  question: number;
  label: string;
  prop: string;
  type: string;
  style: string;
  placeholder?: string;
  options?: any;
}

export const FORM: Form = {
  step_1: {
    controls: [
      {
        question: 75, // should this be a key or id?
        label: 'Primary federal regulator',
        prop: '',
        style: '',
        type: 'dropdown',
        placeholder: 'Select a category',
        options: [
          {
            label: 'FCC',
            value: 'FCC',
          },
          {
            label: 'FDA',
            value: 'FDA',
          },
        ],
      },
      {
        question: 76,
        label: 'Filer name (Holding compnay, lead financial institution, or agency, if applicable)',
        prop: '',
        style: '100%',
        type: 'text',
      },
      {
        question: 77,
        label: 'TIN',
        prop: '',
        style: '50%',
        type: 'text',
      },
      {
        question: 78,
        label: 'TIN type',
        prop: '',
        style: '50%',
        type: 'text',
      },
      {
        question: 80,
        label: 'Type of Securities and Futures institution of individual filing this report - check box(es) for functions that apply to this report',
        prop: '',
        style: '',
        type: 'checkbox',
        options: [
          {
            label: 'Clearing broker-securities',
            value: 'clearing broker-securities',
          },
          {
            label: 'CPO/CTA',
            value: 'CPO/CTA',
          },
          
        ],
      },
    ],
  },
};

uj5u.com熱心網友回復：

您的 Dropdown 組件期望options作為其道具之一。您可以添加默認值以使其成為可選，或者完全鍵入組件的道具，將其標記options為可選。

方法 #1 - 默認值：

const Dropdown = ({
  question,
  label,
  prop,
  style,
  type,
  options = [],
})

方法 #2 - 型別化的道具：

type Option = {
  label: string;
  value: string;
};

type Props = {
  question: number;
  label: string;
  prop: string;
  style: string;
  type: string;
  options?: Option[]; // note the question mark, which marks the prop as optional
  ...
};

const Dropdown = ({
  question,
  label,
  prop,
  style,
  type,
  options,
}: Props)

PS。我注意到你已經有了一個型別FormConfiguration（盡管應該避免options使用它）。您可以通過在上面的示例 #2 中any替換為組件來使用它。: Props: FormConfiguration

uj5u.com熱心網友回復：

我設法在一個更短的示例中重現了您的問題

interface FormConfiguration {
  question: string
  options?: any;
}

const simpleForm:FormConfiguration = {
    question: "why options is required?"
}

function print({question, options}){
    console.log(question, options);
}
function print_working({question, options}:FormConfiguration){
    console.log(question, options);
}

print(simpleForm); // has you problem
print_working(simpleForm); //problem resolved

完整代碼游樂場鏈接

所以你的解決方案是定義下拉函式引數的型別。 DropDown = ({...}: FormConfiguration)

標籤：

上一篇：ReactRouter：如果不存在查詢引數，則有條件重定向

下一篇：在這種情況下使用的正確型別是什么？