Typescript 可选链接与三元运算符解析错误相结合

Question

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

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

没有可选链：

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

打字稿编译器似乎认为第二个示例中的问号["key2"]正在开始三元运算。

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

Answer 1

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

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