V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
17681880207
V2EX  ›  问与答

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

  •  1
     
  •   17681880207 · 289 天前 · 951 次点击
    这是一个创建于 289 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如有个表单有一个 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
    })
    
    6 条回复    2024-01-31 01:17:53 +08:00
    lupkcd
        1
    lupkcd  
       289 天前
    undefined
    Vegetable
        2
    Vegetable  
       289 天前
    我怎么没看懂,const form = ref<{selectedValue:number|undefined}>({}) 这样不行吗
    Vegetable
        3
    Vegetable  
       289 天前
    17681880207
        4
    17681880207  
    OP
       289 天前
    @lupkcd
    感谢。因为我看到 arco design 和 element-plus 的处理方式是不同的。arco design 会变为 undefined 而 element-plus 会变为 ''(空字符串)。👻
    hanai
        5
    hanai  
       289 天前 via iPhone
    在 form 中,值就是字符串,默认为空字符串,提交时 parseInt
    bojackhorseman
        6
    bojackhorseman  
       289 天前 via iPhone
    使用 // @ts-expect-error 🤓
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5469 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 08:33 · PVG 16:33 · LAX 00:33 · JFK 03:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.