如何让TypeScript编译器通过自定义函数判定数组非空？

问题场景 #

现有一个可能为null或undefined的数组，直接传递给组件会触发TypeScript报错；直接用if (someArray)判断能通过校验，但使用自定义的any()函数校验后，TypeScript无法识别数组已非空：

const someArray: foo[] | null | undefined = [...]

// TS报错：someArray可能为undefined
<MyComponent data={someArray} />

// TS校验通过，直接判断数组存在
if (someArray) return <MyComponent data={someArray} />

// TS报错：无法识别any()函数的校验结果
if (any(someArray)) return <MyComponent data={someArray} />

当前any()函数的实现：

export function any(arr: any[] | null | undefined): boolean {
  if (arr && arr.length > 0) {
    return true
  }
  return false
}

需要改造any()函数，让TypeScript编译器知晓经过该函数校验后，数组不为null或undefined。

解决方案 #

使用**类型谓词（Type Predicate）**结合泛型，就能让TypeScript识别函数的校验逻辑，从而缩小变量的类型范围。

改造后的any()函数：

export function any<T>(arr: T[] | null | undefined): arr is T[] {
  return !!arr && arr.length > 0
}

关键说明 #

• 泛型T用于保留数组元素的原始类型，避免丢失类型信息
• arr is T[]是类型谓词，明确告知TypeScript：当函数返回true时，参数arr的类型为T[]（即非null、非undefined且是有效数组）
• 简化判断逻辑：!!arr快速排除null/undefined，再通过arr.length > 0确认数组包含元素

改造后使用示例：

const someArray: foo[] | null | undefined = [...]

// TS校验通过，此时someArray被自动推断为foo[]类型
if (any(someArray)) return <MyComponent data={someArray} />

这样TypeScript就能正确识别经过any()校验后的数组状态，不再抛出类型错误。

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