属性"X"在类型"数字"上不存在 - React TypeScript

Question

我正在对品牌进行映射，在不加载时，我显示每个品牌属性，在加载时，映射编号/索引数组，以及显示骨架。

在JavaScript中，它工作得很好，但TypeScript认为它会映射到编号数组上并显示品牌属性，从而显示错误：类型'number'上不存在属性'X'，当它试图访问brand.icon、brand.name和brand？时？。网站。

{(loading ? Array.from(Array(6).keys()) : brands).map((brand, i, arr) => (
<Fragment key={i}>
<Accordion
TransitionProps={{
mountOnEnter: true,
unmountOnExit: true,
}}
className={classes.expPanel}
expanded={expanded === `panel${i + 1}`}
onChange={handleChange(`panel${i + 1}`)}
>
<AccordionSummary
className={classes.expPanelSummary}
expandIcon={<ExpandMore />}
aria-controls="panel1d-content"
id="panel1d-header"
>
<ListItemIcon className={classes.brandIcon}>
{loading ? renderSkeleton(28, 28, 'circle') : <Icon>{brand.icon}</Icon>}
</ListItemIcon>
{loading ? renderSkeleton() : <Typography>{brand.name}</Typography>}
</AccordionSummary>
<AccordionDetails className={classes.expPanelDetails}>
<Sites sites={brand?.sites} readOnly={readOnly} />
</AccordionDetails>
</Accordion>
{i < arr.length - 1 && <Divider />}
</Fragment>
))}

Answer 1

如果检查brand是否为数字，它将缩小其类型：

{typeof brand === "number" ? renderSkeleton(28, 28, 'circle') : <Icon>{brand.icon}</Icon>}
//                                                                     ^ now it's not a number