TypeScript数组类型收窄失效问题及解决方法

TypeScript 无法自动将数组every方法的校验结果与数组本身的类型收窄关联起来。

单个字符串校验时，条件判断直接作用于变量，TS 能明确识别出符合条件后变量的类型是"A"|"B"；但数组的every仅返回布尔值，TS 不会深入解析every的回调逻辑，也无法通过这个布尔值反向推断出整个数组的元素类型已经符合"A"|"B"的约束——它不会把回调的校验结果和原数组的类型绑定。

方法1：类型断言 #

既然已经通过every完成了运行时校验，直接用类型断言告诉 TS 当前数组符合目标类型即可，这是最直接的方式：

function testFunction(strList: string[]): ("A" | "B")[] | undefined {
    if (strList.every((x) => x === "A" || x === "B")) {
        return strList as ("A" | "B")[];
    }
    return;
}

方法2：自定义类型守卫函数 #

如果需要多次复用这类校验逻辑，写一个类型守卫函数更优雅，TS 能自动识别校验后的数组类型：

// 自定义类型守卫，返回值标注为类型谓词
function isABArray(strList: string[]): strList is ("A" | "B")[] {
    return strList.every(x => x === "A" || x === "B");
}

function testFunction(strList: string[]): ("A" | "B")[] | undefined {
    if (isABArray(strList)) {
        // 这里TS会自动把strList的类型收窄为("A"|"B")[]
        return strList;
    }
    return;
}

方法3：手动遍历收窄（不推荐） #

逐个遍历数组元素并做类型收窄，这种方式 TS 能识别，但性能不如every，仅适合极小数组的场景：

function testFunction(strList: string[]): ("A" | "B")[] | undefined {
    const result: ("A" | "B")[] = [];
    for (const x of strList) {
        if (x !== "A" && x !== "B") {
            return;
        }
        result.push(x);
    }
    return result;
}

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