如何在 Typescript 中处理等待获取的对象

Question

我正在从 javascript 转向 typescript，这是我多次遇到的错误：

在一个组件中，我正在等待获取以返回一个对象，直到那个时候，该组件才返回 null。如果对象在那里，我将渲染对象的一些属性：

const Component = () => {

  const [user, setUser] = useState(null)

  useEffect(() => {

    getUser().then(setUser)

  }, [getUser])

  if (!user) return null

  return (

    <ul>

      <li>{`Username: ${user.userName}`}</li>

      <li>{`Email: ${user.email}`}</li>

    </ul>

  )

}

打字稿然后抛出一个错误Object is possibly 'null'.  TS2531

对于更一般的情况，这个问题在这里已经有了答案： How to suppress "error TS2533: Object is possibly 'null' or 'undefined'"?

但是，确保对象永远不会为 null 感觉不对。我的意思是，我可以初始化对象；

const [user, setUser] = useState({ userName: 'UNKNOWN', email: 'UNKNOWN' })

但这显然也不是我的最佳解决方案。

我很失望打字稿无法识别用户在到达 JSX 时永远不能为 null。但这可能是因为我正在考虑天真的方式。

仍然是问题 -我如何处理打字稿组件中的这种典型情况？

Answer 1

这里的问题是你没有告诉 TypeScript，什么类型可以有状态user。要修复它，只需定义一个类型User并在中指定useState：type User = {&nbsp; userName: string;&nbsp; email: string;};const [user, setUser] = React.useState<User | null>(null);