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/*"] }
},