javascript - typescript 中可能具有未定义值的逻辑运算符

Question

我收到错误，但我不完全明白原因。我知道它可能是未定义的，因此我需要检查它是否存在，但如果我按如下方式设置代码，则会收到错误。但是，如果我将 {showDescription && 替换为 {isFeatureBlock && description && 内联，它就可以完美工作。如果我将它分配给 const 为什么它不起作用？ 注意:我已简化以关注主要问题。

代码

isFeatureBlock 是一个 bool 值，description 是可选字符串

const showDescription = isFeatureBlock && description

{showDescription && (
   <BlockDescription>
     {description}
   </BlockDescription>
 )}

错误

1. '字符串类型的参数 | undefined' 不可分配给'string' 类型的参数。类型“undefined”不可分配给类型“string”

Answer 1

这段代码没有问题，但我假设在您的实际代码中，您在需要正确字符串的某个地方使用了description，这就是发出错误信号的地方。添加 description && 时它起作用的原因是，在这种情况下，它的类型会在 && 的右侧缩小。

对于 description && SOME_EXP，TypeScript 将 description 的类型从 string | 缩小到 description 的类型。 undefined 到 SOME_EXP 内的 string，因为它可以静态地确定 description 不会在那里未定义。不过，只有当您直接在 && 表达式的左侧使用变量时，这才有效，因此将其分配给常量并使用该常量将不起作用。