TypeScript Error with Mapped Types and Conditional Types in a React Component
I tried several approaches but none seem to work. I'm attempting to set up I'm sure I'm missing something obvious here, but I tried several approaches but none seem to work... I'm working on a React application using TypeScript and I'm running into an issue with mapped types and conditional types. I have a form component that accepts various field types, and I want to create a type that can transform the input props based on a specific condition. Here's a simplified version of what I'm trying to achieve: ```typescript interface BaseField { name: string; label: string; } interface TextField extends BaseField { type: 'text'; placeholder?: string; } interface NumberField extends BaseField { type: 'number'; min?: number; } type Field = TextField | NumberField; type FieldProps<T extends Field> = T extends TextField ? { value: string; onChange: (value: string) => void; } : T extends NumberField ? { value: number; onChange: (value: number) => void; } : never; const FormField = <T extends Field>({ field, value, onChange }: { field: T } & FieldProps<T>) => { return ( <div> <label>{field.label}</label> {field.type === 'text' && <input type="text" value={value as string} onChange={e => onChange(e.target.value)} placeholder={field.placeholder} />} {field.type === 'number' && <input type="number" value={value as number} onChange={e => onChange(Number(e.target.value))} min={field.min} />} </div> ); }; ``` When I try to use the `FormField` component and pass the props for a `TextField`, I'm getting a type error: ``` Argument of type '{ field: TextField; value: string; onChange: (value: string) => void; }' is not assignable to parameter of type 'IntrinsicAttributes & { field: ...; } & FieldProps<...>'. ``` I have tried tweaking the conditional types and the way I am passing the props, but I keep getting similar errors. I also checked the TypeScript version I'm using, which is `4.5.2`, and I made sure that my `tsconfig.json` has the `strict` option enabled. What am I missing here? How can I correctly infer the types and eliminate this error? Any guidance on how to properly set this up would be greatly appreciated. Am I missing something obvious? This issue appeared after updating to Typescript LTS. The stack includes Typescript and several other technologies. Cheers for any assistance!