我正在使用Vue 3和TypeScript和JSX（而不是Vue <template> s）。当我像这样使用<input type="range">来编辑模型时：

export default defineComponent({

  setup(props, { emit }) {
    const state = ref(123)

    return () => {
      <input type="range" v-model="state">
    }
  });
}

字符串
我在编译时没有得到类型错误。当我运行代码时，编辑范围输入会将state从存储number更改为存储string值，违反了我打算从TypeScript获得的安全检查，并在其他地方引起bug。
1.如何在编译时使这个show成为类型错误？
1.如何解决这个问题，以便只将数字写入state？
我尝试使用v-model.number，但这似乎在JSX中不可用？
我目前的解决办法是添加

onInput={() => { state = parseFloat(String(state)); }

型
这是很容易出错的，而且我不确定在我将模型转换为number之前，观察者或其他人是否会看到模型的string版本。
编辑：如果有区别的话，我使用默认的Vite设置来构建这个。