Currently, I am utilizing Vue3 along with the options API. Within my setup, there are various Vue components that rely on a shared prop defined as:
exercise: {
type: Object as PropType<Exercise>,
required: true,
},
To streamline this process and avoid redundant declarations of the same prop in multiple components, I decided to consolidate these shared props into an object named sharedProps, which can then be imported across components:
export const sharedProps = {
exercise: {
type: Object as PropType<Exercise>,
required: true,
},
However, upon importing and using sharedProps within a component like so:
props: {
// component-specific props ...
...sharedProps
}
I encountered an issue where accessing this.exercise in my component code resulted in its type being inferred as Exercise|undefined, despite having required: true set for the corresponding prop.
https://i.sstatic.net/ASjgK.png
This error was not only flagged by my IDE but also caused build process failures.
Interestingly, when I directly add the prop to the component without importing it, its type is correctly recognized as Exercise.
Furthermore, I observed that providing a default value to the prop resolved the issue. However, based on my understanding, setting required: true should suffice in indicating it as a non-optional property.
Why does this behavior occur specifically when importing props from an external file?