As you can see in the code snippet below, a certain React element should be shown according to a variable of value type boolean. However, even when checking if the selectedRepository is truthy and coercing it to a Boolean, the TS compiler gives the error Object is possibly 'null'
{...}
const shouldShowRepositoryDetails = !isLoading && Boolean(selectedRepository);
return (
<Layout header={<RepositoryDetailsHeader />}>
{shouldShowRepositoryDetails && (
<RepositoryDetailsContainer>
<header>
<img
src={selectedRepository.owner?.avatar_url}
alt={selectedRepository.owner?.login}
aria-label={selectedRepository.owner?.login}
title={selectedRepository.owner?.login}
/>
<div>
<strong>{selectedRepository.full_name}</strong>
<p>{selectedRepository.description}</p>
</div>
</header>
</RepositoryDetailsContainer>
)}
</Layout>
);
I would like to understand if this is a TS issue or if someone already experienced this.

nullorfalsewould be coerced to 0 when printed into the HTML? May you send me a resource or an example of this issue? Also, I've tried with ternary operators and the issue persists.selectedRepository, using the following type guardselectedRepository is Repository, and now it works 🎉