TS 踩坑之路(四)之 Vue3
不能将类型“{ isBackBtn: false;}”分配给类型“(props: PropsType) => RouteMsgType”。对象字面量只能指定已知属性,并且“isBackBtn”不在类型“(props: PropsType) => RouteMsgType”中。ts(2322)headerTopPart.ts(14, 3): 所需类型来自属性 “routeMsg”,在此处的 “Inf
一、在使用定义默认值withDefaults和defineProps 组合时,默认值设置报错
代码案例
报错信息
不能将类型“{ isBackBtn: false; }”分配给类型“(props: PropsType) => RouteMsgType”。
对象字面量只能指定已知属性,并且“isBackBtn”不在类型“(props: PropsType) => RouteMsgType”中。ts(2322)
headerTopPart.ts(14, 3): 所需类型来自属性 “routeMsg”,在此处的 “InferDefaults” 类型上声明该属性
解决办法
复杂数据类型,需要通过一个箭头函数return出来
ps: 由于title必传,所以需要加上title默认值
知识补充链接: TS定义组件Props的default和required
二、 ts中的interface或者type,索引key不能为boolean
代码案例
报错信息
索引签名参数类型必须是 “string”、“number”、“symbol”或模板文本类型
解决方案
三、 定义 对象形式的 类型 ,例如 { 草稿: { UNUSED: ’ 未使用’ }, 就绪 : { REFERENCED: ‘已生效’ } }
代码案例
type StatusMapType = {
[status: string]: {
[upstreamDependencyRelation: string]: string
}
}
const statusMap: StatusMapType = {
DRAFT_STATUS: {
UNUSED: '草稿', //(草稿,未使用)
},
READY_STATUS: {
UNUSED: '已就绪未使用', //(就绪,未使用)
USED: '已使用未生效', //(就绪,被使用)
REFERENCED: '已生效', //(就绪,被外部引用)
},
}
return statusMap[status]?.[upstreamDependencyRelation] || '-'
四、字符串数组转换为Number类型数组
如果 formAttribute.value?.riskDomainId 是一个包含数字的字符串,例如 “1,2,3”,那么 split(‘,’) 会返回一个字符串数组,例如 [“1”, “2”, “3”]。如果你想要得到一个数字数组,需要使用 map 函数将字符串数组转换为数字数组
const riskDomainIdData = formAttribute.value?.riskDomainId?.split(',').map(Number) || []
这里的 Number 是一个函数,它会尝试将传入的值转换为数字。map(Number) 就是将数组中的每个元素都传入 Number 函数,得到一个新的数字数组。
五、数组中某个对象的属性直接转换为key: value的形式
例如: 将 [{name: ‘zhangsan’, age: ‘22’, type: ‘2’}] 换成 {zhangsan:‘22’ }
报错信息
元素隐式具有 “any” 类型,因为类型为 “string” 的表达式不能用于索引类型 “{}”。
在类型 “{}” 上找不到具有类型为 “string” 的参数的索引签名。
方案
这个错误是因为TypeScript在严格模式下,不允许使用字符串索引访问对象的属性,除非这个对象明确定义了字符串索引签名。在你的代码中,空对象 {} 没有定义字符串索引签名,所以出现了这个错误。
你可以通过在定义对象时明确其类型来解决这个问题,如下所示:
let obj: { [key: string]: any } = {};
这样定义后,obj 对象就可以使用字符串作为键来访问和设置其属性了。
案例代码
type KeysType = { [key: string]: string }
export const formatInputData = (tableData: GetTestParamsType[]) => {
let result: KeysType = {} as KeysType
tableData.forEach((item: GetTestParamsType) => {
result[item.name] = item.input
})
return JSON.stringify(result)
}
更多推荐
所有评论(0)