一、在使用定义默认值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)
}
Logo

前往低代码交流专区

更多推荐