Not possible to set optional props to undefined when `exactOptionalPropertyTypes: true` in tsconfig

[Eldemarkki]

If I have exactOptionalPropertyTypes: true (docs) set in tsconfig, it treats id?: string and id?: string | undefined differently. This causes a problem that I am unable to set many props to undefined (e.g. id={undefined}) in the <Select> component.

Here is a reproduction of the problem: https://stackblitz.com/edit/vitejs-vite-yn3jwc?file=src%2FApp.tsx. After the app has loaded, you can see that there is the following TypeScript error:

Type '{ id: undefined; value: { value: string; label: string; } | null | undefined; options: { value: string; label: string; }[]; onChange: Dispatch<SetStateAction<{ value: string; label: string; } | null | undefined>>; }' is not assignable to type 'Omit<PublicBaseSelectProps<{ value: string; label: string; } | undefined, false, GroupBase<{ value: string; label: string; } | undefined>>, StateManagedPropKeys>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
  Types of property 'id' are incompatible.
    Type 'undefined' is not assignable to type 'string'.

I suggest that we change all optional props to also accept an explicit undefined. So in practice, change occurrences of key?: MyType to key?: MyType | undefined. I can try making a pull request, if some maintainer confirms that this should be fixed :+1:

This is purely a TypeScript type issue, it doesn't affect the runtime at all.