It is true that TypeScript types are checked only during the build-time, while validator()s serve as runtime guards.
The relationship between Vue and TypeScript can be described as complex. Those who have experience with React may recall how a TypeScript error would be thrown for
<Link target="some_invalid_value"/>
without additional configuration. In Vue, encountering such an error (such as obtaining TS prop validation in the template) could be considered somewhat "new."
Using TypeScript can offer a more user-friendly developer experience if you manage to set up enhancing extensions successfully. However, it's important to remember:
- TypeScript prop validation remains relatively experimental and unstable
- These extensions will only function within VSCode. Running
npm run build might not display errors unless a tool like https://github.com/vuejs/vetur/tree/master/vti is utilized - this Vetur addon reports the same errors visible in VSCode but does so in the terminal during CI, potentially halting a build upon detecting errors.
If you anticipate that others will use your Link component across various projects - especially in scenarios lacking TypeScript or employing Vue directly in .html files sans webpack - consider that they won't benefit from your TypeScript types but could still make use of validator().
Could you test incorporating your Link component into another component, then passing
<Link target="some_invalid_value"/>
to see if TypeScript errors occur? If not, additional configuration with these extensions (VSCode specific) may be necessary:
Here are some extra suggestions:
I've observed that the type assertion (as) you're using is non-standard. The Vue documentation suggests utilizing as PropType, as outlined in https://v3.vuejs.org/guide/typescript-support.html#annotating-props
Avoid using single-word component names. This guideline holds great importance as it ranks as "Essential" in the styleguide:
https://v3.vuejs.org/style-guide/#multi-word-component-names-essential