提取类型守卫逻辑为函数后TypeScript类型守卫失效问题

这确实是TypeScript开发里常见的小困扰——当我们把原生的类型检查逻辑抽成自定义函数后，TypeScript没法自动识别它的类型守卫能力。不过别担心，只需要给你的自定义函数加上**类型谓词（Type Predicate）**就能解决这个问题。

问题根源 #

原生的Array.isArray()是TypeScript内置的类型守卫函数，它的类型定义已经包含了类型谓词，所以TS能准确判断：当这个函数返回true时，参数一定是数组类型。但我们自己写的isArray函数默认只返回boolean，TS没办法把返回值和参数的具体类型关联起来。

解决方法：添加类型谓词 #

修改你的自定义类型检查函数，在返回值位置声明类型谓词，明确告诉TS函数返回true时参数的类型：

// 给isArray函数添加类型谓词
function isArray(value: unknown): value is string[] {
  return Array.isArray(value);
}

function test(value: string | string[]) {
  if (isArray(value)) {
    // 现在TS能正确识别value是string[]类型了！
    return value;
  }
  return value;
}

这里的value is string[]就是类型谓词，它相当于给TypeScript一个“承诺”：当这个函数返回true时，传入的value一定是string[]类型。

更通用的版本 #

如果你的函数需要检查任意类型的数组，可以把它改成泛型函数，让TypeScript自动推断类型：

function isArray<T>(value: unknown): value is T[] {
  return Array.isArray(value);
}

function test(value: string | number[] | boolean) {
  if (isArray<string>(value)) {
    // TS知道value是string[]
    return value.join(',');
  } else if (isArray<number>(value)) {
    // TS知道value是number[]
    return value.reduce((a,b) => a+b);
  }
  // 这里value是boolean
  return !value;
}

这样你的类型守卫函数就可以复用在多种场景下啦。

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