vuejs
FunctionalComponent - conflict when defining the props with a default value
Vue version
3.4.15
Link to minimal reproduction
https://play.vuejs.org/#eNqdVE1v2zAM/SucL2mB2Ebb7ZKmXbehA7bDVqwFdvFFtelEnUxpkpy0yPLfR8nOR5OsKAYUaEw+ke89SlwkH4zJZi0mo2TsSiuNB4e+NaAETS6KxLsiuSxINkZbD/7JICzgc0ull5qE+qQ5QUgellBb3cCAaw0KKqjU5DwYq42DC1gUBODx0Y+6n/zBpUZw662kybALVViLVjFkcMIlAJYFLc9DrTyHnwhTMcNADvwUV1iYCdUi1NrGaOgQe6L1T0OIJ+9bD5KcrDjNkHLNWPKfAzETUol7hSAcuEgH/kBL3EASVisha6Eno0Pyx4vQ+v2or7C8ZM1HUfwxXFx2mi37aqmzJAvwc2B6h1qy8II2HbOVi/H/IUfE6/wQVO2pjrVYulgxOeTVMLpIeg7zKRK0LgCfuxnrzBHmUimYRE53POL+TqG1TEnWAVFprhSv2U4J4ZkBN+pJHVXojOSvgKpFGeCCUWWpbRUJ6P4qODmhYa8slCYs0Tlhn4CJln057uwMlrKWWB24QrqOwZVZx3uDP31h8P89991Zn+7Nepx3FvIj5A+PjVHCI38BjDdXBPKdyClHYPwmTeGmVwSD0HsQPGqkixOU1L3owWI5iBO2+LuVlv3ZZPpX29E9BwamKfca51tUkiHvCbarlpPswWniZRKVF0kYrlRov5vgG++S9fsvEqGUnn+NMW9b7JcAn5li+etA/ME9hliR3Fh0aGdYJOucF5bvXJe+vv3GlLeSja5axegXkj/QadUGjh3sI79Gpr2Fi2y/xDXIRty560eP/FJ6UYFoXFkRXyS8BcMo/iV9Q/csO1utOnaxW7NpI8yOj13ieRHu0ZGdem/cKM/LivhYhUrObEboczJNfsWw3LbkZYNppZurs+xtdvIur6Tz2/EMXZPeWz1na7nKlvJQIPptU4u8pGzw5XV9d449672T2+u/tmX5F1IFTh4=
Steps to reproduce
Case 1: We have set the default value for the text property, but inside the component it is available as string | undefined
Case 2: We have set a default value for the text property, and it is available as a string inside the component, but now when using the component we will get a Typescript error if we do not set the component attribute (despite the fact that according to the design, it is not necessary since we specified the default value of the property)
What is expected?
It is expected that the type of a property with a default value cannot be undefined, since vue stores the default value there if the corresponding attribute of the component has not been defined
What is actually happening?
Default value may be undefined
System Info
No response
Any additional comments?
No response
@PurpleTape do you mind explaining this better, the code you provided, the issue only happens in typescript and the behaviour is what I would expect, do you mind providing more info, bear in mind on the template the type errors and runtime errors are two different things, if you declare the properties to be required in typescript it will be required regardless of default value or runtime value.
You seem to be confusing TypeScript's compile time with JavaScript's runtime.
Component2.props = props; does not resolve the type error because TypeScript's type checking occurs at compile time and does not consider runtime assignments like this. The TypeScript compiler requires that all required props are provided at the time of rendering the component.
