Supporting optional boolean properties in TypeScript

[matthew-dean]

Clear and concise description of the problem

I've documented the full issue here. Essentially, TypeScript is not mapped consistently in the case of optional booleans because of legacy Vue behavior. A type of:

interface Props {
  foo?: boolean
}

... which in TypeScript means the type of foo is boolean | undefined (with a default value of undefined) is defined as boolean (with a default value of false) when mapped to the Vue JS API, which is contrary to TypeScript's behavior.

Suggested solution

As suggested in the above, if Vue doesn't accept this feature request (or doesn't address it for some time), to do the following:

1. If a TypeScript type is passed into withDefaults(defaultProps, {}), any boolean type should be required in the withDefaults object, so that the developer can make it clear if they are intending the default Vue behavior, or the default TypeScript behavior.
2. Ideally, a withDefaults macro would be required with a defaultProps macro if, again, there are boolean types in the interface, but that could be considered too high of a burden for developers.

Alternative

The alternative is I guess to educate all developers that booleans behave weird in Vue and differently than other types? And then to use a withDefaults macro to always set the default value of each boolean as undefined.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.