I am currently utilizing Vue 3 alongside TypeScript and JSX, not using Vue <template>s. When I incorporate an
<input type="range">export default defineComponent({
setup(props, { emit }) {
const state = ref(123)
return () => {
<input type="range" v-model="state">
}
});
}
There is no type error shown during compilation. However, when the code is executed, changing the range input results in the transformation of state from holding a number to storing a string value. This violates the safety checks enforced by TypeScript and leads to bugs in other parts of the codebase.
How can I prompt a type error at compile-time for this issue?
What steps should I take to ensure only numbers are assigned to
state?
I attempted using v-model.number, but it seems unavailable in JSX. Any suggestions?
My current workaround involves adding
onInput={() => { state = parseFloat(String(state)); }
for the conversion process. However, this method is prone to errors, and there may be concerns about watchers encountering the string version of the model before its conversion to a number.
Edit: Just to note, I'm utilizing the default Vite settings for this project's build configuration.