TypeScript无法识别外部函数的类型检查？求优雅解决方案

问题出在你的isNotEmptyArr函数只是普通的布尔返回函数，TypeScript无法自动将其识别为类型守卫，所以即使函数返回true，也不会缩小data的类型范围（依然认为它可能是undefined）。

解决方案：将函数改为类型谓词函数 #

通过在返回值位置添加类型谓词（arr is ...），明确告诉TypeScript：当函数返回true时，参数arr符合指定的类型。

修改后的函数：

// 基础版本：确认arr是非undefined的数组且长度>0
export const isNotEmptyArr = (arr?: unknown[]): arr is unknown[] => {
  return Array.isArray(arr) && arr.length > 0;
}

// 更严格的泛型版本：同时确认是至少包含一个元素的非空数组
export const isNotEmptyArr = <T>(arr?: T[]): arr is [T, ...T[]] => {
  return Array.isArray(arr) && arr.length > 0;
}

使用示例 #

当你用这个函数判断useSWR返回的data时，TypeScript会正确完成类型窄化：

const { data } = useSWR('/api/items', fetcher); // data类型假设为Item[] | undefined

if (isNotEmptyArr(data)) {
  // 此处TypeScript确定data是 non-empty array，不再提示"Object is possibly 'undefined'"
  console.log(data[0].name);
}

为什么原来的写法不生效？ #

普通函数的布尔返回值和参数类型之间没有关联，TypeScript无法推断出"返回true意味着arr一定不是undefined且非空"。类型谓词相当于给TypeScript一个明确的规则，让它能基于函数的返回值来缩小参数的类型范围。

这种方案比可选链更优雅的地方在于：当你需要多次访问数组元素时，不需要重复写?.，代码更简洁，类型也更明确。

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