如何在 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 = {

  userName: string;

  email: string;

};

const [user, setUser] = React.useState<User | null>(null);