TypeScript React中如何可靠判断condition类value是否为数组并遍历

要可靠判断condition类的value字段是否为any[]类型并执行遍历，你可以用以下两种方式：

1. 直接使用Array.isArray()做类型缩小 #

这是最简洁可靠的方式，TypeScript会自动根据Array.isArray()的结果缩小变量类型：

const cond: condition = // 你的condition实例

if (Array.isArray(cond.value)) {
  // 此处TypeScript会自动推断cond.value为any[]类型
  cond.value.forEach(item => {
    // 编写你的遍历处理逻辑
    console.log(item);
  });
}

2. 自定义类型守卫函数（可选，适用于复杂场景） #

如果需要在多个地方复用类型判断逻辑，可以写一个自定义类型守卫函数：

function isAnyArray(value: string | any[]): value is any[] {
  return Array.isArray(value);
}

// 使用示例
const cond: condition = // 你的condition实例

if (isAnyArray(cond.value)) {
  cond.value.forEach(item => {
    // 处理逻辑
  });
}

为什么你之前的方法不可靠？ #

• 类型断言(obj.value as any[]) != undefined只是强制告诉TypeScript你认定它是数组，但没有在运行时做实际类型检查，如果实际值是字符串，依然会报错。
• 判断length>0的逻辑有两个问题：一是空数组的length为0，会被错误排除；二是字符串也有length属性，会把字符串误判为数组。

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