属性 'options' 在类型中是可选的 '{ question: number , label: string; ...等}'但在类型'{问题：任何;标签：字符串等}

Question

我正在使用 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',
          },
          
        ],
      },
    ],
  },
};

Answer 1

您的 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 正在使用 any 应该避免）。您可以通过在上面的示例 #2 中将 : Props 替换为 : FormConfiguration 来将其用于组件。

Answer 2

我设法在更短的示例中重现了您的问题


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

full code Playground Link

所以您的解决方案是定义 Dropdown 函数参数的类型。 DropDown = ({...}: FormConfiguration)

属性 'options' 在类型中是可选的 '{ question: number , label: string; ...等}'但在类型'{问题：任何;标签：字符串等}

Property 'options' is optional in type '{ question: number , label: string; ...etc}' but required in type '{ question: any; label: string, etc.}

typescript

reactjs

react-hook-form