TS 踩坑之路（四）之 Vue3

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