美文网首页
TS 对象动态key 类型报错问题

TS 对象动态key 类型报错问题

作者: 五彩的石头 | 来源:发表于2022-05-10 22:36 被阅读0次
    有的时候需要用动态key 给对象里的属性赋值或者取值
    例子

    1.先声明一个接口

    interface ICityData {
    
      provinceCode: string
    
    .......省略
    
    }
    

    2.创建了一个对象(vue3环境演示)

    const changeRes: ICityData = reactive({
    
      provinceCode: '1001010',
    
    .......省略
    
    })
    

    3.比如提交完表单,用动态key把值都赋值为空字符串(此时报错出现了)

    for (const key in changeRes) {
    
    changeRes[key] = ''  // 报错: 元素隐式具有 "any" 类型,因为类型为 "string" 的表达式不能用于索引类型
    
    }
    

    4.至于在TS中如何解决这个报错,

    changeRes[key as keyof ICityData] = ''    这样写就可以解决了
    

    5.上面演示的情况是 ICityData 里面属性的值的类型都是 string类型,这样写就ok了,但是还有的情况是他里面还有比如 count: number ,isSelected: boolean 这样的类型,或者是一个对象遍历出来值动态循环给另一个对象赋值,总之就是值得类型不再是唯一一种了,此时再按上面写 他会报错,他左侧等着被赋值的类型变成了never

    不能将类型“string | number | boolean ”分配给类型“never”。

    // 比如多了一个别的类型
    interface ICityData {
    
      provinceCode: string
    
      count: number
    
    }
    
     for (const key in changeRes) {
          const tkey = key as keyof ICityData 
          if (tkey === 'count') {
            changeRes[tkey] = 0
          } else {
            changeRes[tkey] = ''
          }
        }
    

    相关文章

      网友评论

          本文标题:TS 对象动态key 类型报错问题

          本文链接:https://www.haomeiwen.com/subject/oqprurtx.html