JavaScript 可选链动态属性

Question

我正在尝试使用TS中提供的可选链式操作符来安全地访问动态属性。然而似乎这不是有效的。

我正在尝试使用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]？

- Jamie Hutber

---

你是怎么得到那个错误的？我无法重现它。 - ASDFGerte

你需要一个支持可选链的环境。然后只需使用 theme?.headers?.['h1']?.color ?? '#000' - Jamie Hutber

Answer 1

你可以创建一个接口，将你的主题对象映射并传递给编译器进行类型检查。

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

- hawks

---

有趣的想法，为其定义类型。 - Jamie Hutber