javascript - typescript 可选链接结合三元运算符解析错误

Question

我在将 Typescript 可选链接与 React 组件内的三元运算符结合使用时遇到问题。我不确定它是否无法完成，我的语法已关闭，或者它是一个 Typescript 错误。

请注意，在我的特定情况下，我需要使用括号表示法来访问对象的键，而在我给你的示例中，技术上不需要。

没有可选链:

import * as React from "react"

const Component: React.FC<{}> = () => {
  const test = {
    key1: {
      key2: Math.random() === 0 ? null : {
        key3: "3"
      }
    }
  }

  return(
    <div>
      {test["key1"]["key2"]["key3"] ? "Key3 Exists" : "Key3 Doesn't Exist" } {*/ Error: Object test["key1"]["key2"] is possibly null. */}
    </div>
  )
}

带有可选链

import * as React from "react"

const Component: React.FC<{}> = () => {
  const test = {
    key1: {
      key2: Math.random() === 0 ? null : {
        key3: "3"
      }
    }
  }

  return(
    <div>
      {test["key1"]["key2"]?["key3"] ? "Key3 Exists" : "Key3 Doesn't Exist" } {*/ Error: ":" expected. */}
    </div>
  )
}

typescript 编译器似乎认为第二个示例中 ["key2"] 之后的问号开始了三元运算。

有人知道如何一起使用它们吗？

Answer 1

可选链接的语法不仅包括问号，实际上还包括相邻的点。您的代码应该像这样工作得更好:

<div>
      { test?.["key1"]?.["key2"]?.["key3"] ? "Key3 Exists" : "Key3 Doesn't Exist" }
    </div>