如何处理查询中字符串类型的 typescript 错误

Question

我有一个这样的查询：

document.querySelectorAll("h2, h3").forEach(header => {
    tmpNav.push({name: header.textContent || header.innerHTML, id: header.id, type: header.nodeName});
})

通过这个接口输入的内容：

interface IContent {
    name: string,
    id: string,
    type: "H3" | "H2"
}

我有一个遍历tmpNav数组并显示数据的循环，其中有时我使用tmpNav中的类型插入基于它的 class（jss）：

className={classes[type]}

我面临的问题是当我创建这个数组时， type: header.nodeName会引发类型错误，因为它返回一个与类型type: "H3" | "H2" type: "H3" | "H2"

用string添加它会导致我的classes[type]抛出错误，因为它无法匹配该类型。

我不确定如何 go 关于这个。 我一直都知道该数组将使用header.nodeName提供一种类型，因为它只是"h2, h3"的querySelector 。

Answer 1

更合适的解决方案是使用条件值检查来缩小header.nodeName的类型

if (header.nodeName === 'H3' || header.nodeName === 'H2') {
  tmpNav.push(...);
}