JavaScript необязательное свойство динамической цепочки c - PullRequest
Новая
       15

JavaScript необязательное свойство динамической цепочки c

5 голосов
/ 10 января 2020

Я пытаюсь получить доступ к динамическому свойству c с безопасностью, предоставляемой Option Changing , доступной в 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]?

1 Ответ

2 голосов
/ 10 января 2020

Вы можете создать интерфейс, который отображает ваш объект темы и проходит проверку типа компилятора. 

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')
...