TypeScript类型错误：YAxis[]无title属性，如何修复？

你碰到的这个报错很典型——因为yaxis是YAxis | YAxis[]的联合类型，TypeScript没办法确定你当前操作的是单个轴对象还是轴数组，而数组本身确实没有title属性，所以编译器会报错。完全不用 resort to any，咱们用类型守卫就能完美解决类型安全的问题。

直接在代码中做类型判断 #

最直接的方式就是用Array.isArray()做类型守卫，让TypeScript自动推断分支里的具体类型，然后分别处理单轴和多轴场景：

setConfig({
  ...config,
  yaxis: Array.isArray(config.yaxis) 
    // 多轴场景：遍历数组，按需修改每个轴的title（这里示例是修改所有轴）
    ? config.yaxis.map(axis => ({
        ...axis,
        title: {
          ...axis.title, // 保留原title的其他配置（比如style）
          text: value,
        },
      }))
    // 单轴场景：保持你原来的展开逻辑即可
    : {
        ...config.yaxis,
        title: {
          ...config.yaxis.title,
          text: value,
        },
      },
})

如果你的业务里只需要修改多轴中的某一个（比如第一个轴），可以把map逻辑改成：

config.yaxis.map((axis, idx) => 
  idx === 0 
    ? { ...axis, title: { ...axis.title, text: value } }
    : axis
)

抽离可复用的类型守卫函数 #

如果需要多次区分YAxis和YAxis[]，可以抽一个专门的类型守卫函数，让代码更清晰：

// 定义类型守卫，帮助TypeScript识别数组类型
function isYAxisArray(yaxis: YAxis | YAxis[]): yaxis is YAxis[] {
  return Array.isArray(yaxis);
}

// 使用时
setConfig({
  ...config,
  yaxis: isYAxisArray(config.yaxis)
    ? config.yaxis.map(axis => ({
        ...axis,
        title: { ...axis.title, text: value }
      }))
    : { ...config.yaxis, title: { ...config.yaxis.title, text: value } }
})

这样全程都能保持TypeScript的强类型检查，完全不需要用any破坏类型安全。

内容的提问来源于stack exchange，提问作者TheLazyChap