元素隐式具有 “any“ 类型，因为类型为 “any“ 的表达式不能用于索引类型 “{ xxx: xxx； }“。ts(7053)

在React-Typescript中遇到的问题，网上大部分都是修改配置什么的，我这里是加了个判断。

复制插件

下面的TypeScript函数用于判断key是否存在对象类型中

export function isValidKey(key: string | number | symbol , object: object): key is keyof typeof object {
  return key in object;
}

插件引用

a) 普通案例,当键值类型为string时

import { isValidKey } from '../../utils/common' // 引入插件
const imageList = {
  'hi': hi, 'codepower': codepower, 'experience': experience, 'designpower': designpower
}
const key = 'hi' // 本来是props传变量值，这里便于学习，我采用常数值了
const nativeImage = useMemo(() => { // useMemo做计算变量，如果是vue，可以理解为computed
  if (!isValidKey(key, imageList)) { // 先进行判断，之后就不会报错了
    throw Error('invalid sequence');
  }
  return imageList[key]
},[key])

b) 复杂案例，当键值类型为any时

下列代码时axios的拦截监听函数，我想做的是将message组件函数直接封装到这里，就不要我们多次引入和添加了。但是在错误的时候出现了 ts(7053) 问题，修改如下

const httpStatus = { // http code 对应 msg 
  500: '尚未连接到后端'
}
instance.interceptors.response.use((response: AxiosResponse) => {
  switch (response.status) {
    case 201:
      message.success({
        content: response.data.msg
      })
  }
  return response;
}, (error: AxiosError) => {
  if (error.response !== undefined) { // 首先判断不为undefined类型
    if (isValidKey(error.response.status, httpStatus)) {
      message.error({
        content: httpStatus[error.response.status]
      })
    } else {
      message.error({
        content: error.response.data.msg
      })
    }
  return Promise.reject(error);
});