使用 ts 表单 number 类型的初始值如何给比较优雅?

102 天前
 17681880207

比如有个表单有一个 select 的 value 为 number 类型。 但是一般定义的时候都是:

// 这里 selectedValue 会被自动推导为 string 类型
const formModel = ref({
  // ...
  selectedValue: ''
})

虽然 select 选择值之后,打印 formModel.value.selectedValue 的值确实为 number ,但是会导致使用的时候类型推断错误,例如在接口中:

// api.ts
interface IRequest {
  // ...
  selectedValue: number
}

getList(params: IRequest):Promise<XXX> {
  return axios.get('xxx', {params})
}

// page.vue
const getList = async() => {
  const result = await api.getList({
    // ...
    // 这里会报错 selectedValue 是 string 类型而接口要求的是 number 类型
    selectedValue: formModel.value.selectedValue
  })
}

但是如果在 formModel 中将 selectedValue 定义为 number | string 类型,那就得把 IRequest 的也修改了,这感觉有点莫名其妙。因为后台确确实实要求的就仅仅是 number 而已。
请问给位大佬如何优雅的处理这个问题? 或者是将 selectedValue 设置为 undefined ?

const formModel = ref({
  // ...
  selectedValue: undefined
})
737 次点击
所在节点    问与答
6 条回复
lupkcd
102 天前
undefined
Vegetable
102 天前
我怎么没看懂,const form = ref<{selectedValue:number|undefined}>({}) 这样不行吗
Vegetable
102 天前
17681880207
102 天前
@lupkcd
感谢。因为我看到 arco design 和 element-plus 的处理方式是不同的。arco design 会变为 undefined 而 element-plus 会变为 ''(空字符串)。👻
hanai
102 天前
在 form 中,值就是字符串,默认为空字符串,提交时 parseInt
bojackhorseman
101 天前
使用 // @ts-expect-error 🤓

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1012826

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX