Vue3配Ts错误不完全记录

Vue3用起来感觉很好，但是Ts太痛苦了，稍不留神就爆红。虽然不理它也没大碍，但是碍眼呀。爆红的解决也不是一帆风顺的，记录在此，看看自己走过的那些弯路

使用对象的动态key报错

const bgcolors = {
  orange: 'bg-orange-400',
  blue: 'bg-blue-400',
  pink: 'bg-pink-400',
  purple: 'bg-purple-400',
  indigo: 'bg-indigo-400'
}

// ❌ 直接使用报错
bgcolors[color]

// 👍 不报错
bgcolors[color as keyof typeof bgcolors]

元素隐式具有 "any" 类型，因为类型为 "string" 的表达式不能用于索引类型 "{ orange: string; blue: string; pink: string; purple: string; indigo: string; }"。
在类型 "{ orange: string; blue: string; pink: string; purple: string; indigo: string; }" 上找不到具有类型为 "string" 的参数的索引签名。

自定义的接口类型用在props

// 报错内容
“SearchFormItem”仅表示类型，但在此处却作为值使用。ts(2693)

export interface SearchFormItem {
  columnName: string
  columnKey: string
  type: string
  condition: string
}

const props = defineProps({      
  item: { 
    // type: SearchFormItem  //报错
    type: Object as PropType<SearchFormItem>,
    default: 'input'
  }
})

“props.xxx”可能为“未定义”。

formData.code = props？.columns[props.index]?.code || ''

下面不报错

formData.code = props.columns ? props.columns[props.index].code : ''

找不到模块“~/store/sidebar”或其相应的类型声明。ts(2307)

需要在tsconfig.json 中增加配置

{
  "compilerOptions": {
    ...
    "paths": { "~/*": ["src/*"] }
  },