我在TypeScript上传递React.js应用程序。只有当错误状态包含“title”和“message”属性时，我的ErrorModal组件才会显示。默认状态为false。就像这样，如果有这些属性，就会显示错误模态。
interface Error {
title: string;
message:string;
}
const [error, setError] = useState<boolean | Error>(false);问题是typescript告诉我错误。标题定义错误。我创建了带有标题和消息的接口Error，但是TS在它们下面加了下划线。
我不知道如何解决这个问题
{error && (
<ErrorModal
title={error.title}
message={error.message}
onConfirm={() => setError(false)}
/>
)}屏幕截图
1条答案
按热度按时间wqsoz72f1#
TS不知道它是什么类型。所以你必须显式地检查它的类型，然后它才能知道它是什么类型。这个概念被称为缩小（阅读更多typescriptlang.org/docs/handbook/2/narrowing.html）。
解决方案可以是：
我认为它应该工作，但我认为一个更简单的解决方案是不使用联合类型，而只是使用
Error作为类型。当没有错误时，它可以是null。