TypeScript 不理解从变量检查时定义的对象答案

【问题标题】：TypeScript doesn't understand that object is defined when checking from variableTypeScript 不理解从变量检查时定义的对象
【发布时间】：2020-06-24 04:14:24
【问题描述】：

当我检查对象是否被直接声明时，它显然工作得很好，但我想知道是否可以将此检查提取到变量中并使 TypeScript 仍然可以理解它。

import React from "react";

interface Props {
  obj?: {
    val: string;
  }
}

function A({ obj }: Props) {
  const hasObj = !!obj;

  return (
    <>
      <p>This works fine:</p>
      <div>{!!obj && obj.val}</div>

      <p>This throws an error (Object is possibly 'undefined'):
      <div>{hasObj && obj.val}</div>
    </>
  )
}

有可能让它这样工作吗？

【问题讨论】：

为什么不直接使用<div>{obj?.val}</div>？
这只是一个简单的例子，我需要它来进行更复杂的检查
考虑尝试类型谓词。它们仅适用于函数，但它们可能会对您有所帮助。 typescriptlang.org/docs/handbook/…

标签： reactjs typescript

【解决方案1】：

据我了解，TypeScript 不够聪明，无法“跟随”这样的变量，即 hasObj 总是意味着 !!obj 除非同时发生突变或重新分配 obj。

如果它适合你的程序，你可以做一个像这样的守卫

function A({ obj }: Props) {
  if (obj === undefined) {
    return;
  }

  return (
    <>
      <p>This works fine:</p>
      <div>{obj.val}</div>

      <p>This throws an error (Object is possibly 'undefined'):
      <div>{obj.val}</div>
    </>
  )
}

这确实有效，并且 TypeScript 正确推断 obj 在早期返回之后不可能为空。

【讨论】：