在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);
});
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐