如何處理查詢中字符串類型的 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(...);
}