I'm working with React and Typescript. I'm getting the following error in my terminal and it's not clear what I'm doing wrong.

    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; }'.

Below is the relevant code. Notice I got this error before I used an interface as well as after creating one. The error is happening with my Dropdown component inside of the formGroup component below. What am I doing wrong?

// formGroup Component

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;

// dropdown component

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;

// data object

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',
          },
          
        ],
      },
    ],
  },
};

CodePudding user response：

Your Dropdown component expects options as one of its props. You can either add a default value to make it optional, or fully type the props of the component, marking options as optional.

Approach #1 - default value:

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

Approach #2 - typed props:

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. I noticed you already have a type FormConfiguration (albeit options is using any which should be avoided). You can use that for the component by replacing : Props with : FormConfiguration in the example #2 above.

CodePudding user response：

I managed to reproduce your problem in a much shorter example

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

so the solution for you is to define the type of Dropdown function arguments. DropDown = ({...}: FormConfiguration)