[英]JavaScript optional chaining dynamic property
我正在嘗試通過 TS 中可用的可選鏈接提供的安全性訪問動態屬性。 然而,這似乎是無效的。
export const theme = {
headers: {
h1: {
},
h6: {
color: '#828286'
},
},
}
console.info(theme?.headers?.['h6']?.color ?? '#000') //will pass
console.info(theme?.headers?.['h1']?.color ?? '#000') //will fail
Identifier expected. TS1003
10 | const StyledTypography = styled.div`
11 | margin: 0;
> 12 | color: #000; ${({theme}) => theme?.headers?.[variant]?.color ?? '#000'}
| ^
13 | `
14 | return (
15 | <StyledTypography as={variant}>
似乎可選更改將應用於可選[]
作為類型,但不適用於其中的值。
如何在不必做[undefined || someDefaultValue]
[undefined || someDefaultValue]
?
您可以創建一個接口來映射您的主題對象並通過編譯器類型檢查。
interface Headers {
[key: string]: {
[key: string]: string
}
}
interface Theme {
headers: Headers
}
const theme: Theme = {
headers: {
h1: {
},
h6: {
color: '#828286'
},
},
}
console.info(theme?.headers?.['h6']?.color ?? '#000') //will pass
console.info(theme?.headers?.['h1']?.color ?? '#000')
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.