前端 - TypeScript if/else 语句中类型收窄问题?

Question

为什么if片段内的isCache类型被收窄为true，而else片段内的isCache类型推导是boolean。我预期的是else片段内的isCache类型应该推导为false，求解答。

尝试了一下应该不是编辑器的问题。

Answer 1

你可能需要提供更多的信息来确定原因。
比如创建一个空白的TS文件来写类似的代码，看能不能正确收窄。
我这里创建一个类似的结构，else里正常收窄为false。

Answer 2

在 TypeScript 中，当你使用类型守卫（比如 if (someValue instanceof SomeType)）或者通过检查字面量来缩小变量的类型时，TypeScript 编译器会根据条件语句的结果来推断变量的可能类型。然而，if 和 else 分支中变量的类型收窄并不是完全对称的。

在你的例子中，isCache 很可能是一个联合类型，比如 boolean | undefined 或者 boolean | null。当你在 if 语句中检查 isCache 是否为 true 时，TypeScript 能够确定在 if 分支中 isCache 的类型为 true，因为已经通过条件检查排除了 isCache 为 false 或其他值的可能性。

然而，在 else 分支中，TypeScript 仍然将 isCache 的类型推导为原始联合类型中除了 true 之外的所有可能类型。这是因为 else 分支涵盖了 isCache 为 false 或原始联合类型中除了 true 之外的其他任何值的所有情况。编译器不会进一步将其收窄为 false，因为它不能确定 isCache 是否可能为 undefined 或 null（如果这些是原始联合类型的成员的话）。

举个例子，如果 isCache 的类型是 boolean | undefined，那么 else 分支中的 isCache 可能是 false 或 undefined。编译器不会假设 isCache 在 else 分支中一定是 false，因为这样会忽略 undefined 的可能性。

要解决这个问题，你可以显式地检查 isCache 是否为 false 或者使用类型断言（尽管类型断言应该谨慎使用，因为它会绕过 TypeScript 的类型检查）。但通常更好的做法是确保你的变量在使用前已经被正确初始化或赋值，这样你就不需要处理 undefined 或 null 的情况了。

总结一下，else 分支中的 isCache 类型没有被推导为 false 是因为 TypeScript 编译器需要考虑到 isCache 可能是联合类型中的其他值，而不仅仅是 false。