javascript - Eroare de analiză la combinarea lanțului opțional din Typescript cu operatorul ternar

Am probleme în utilizarea lanțului opțional (optional chaining) din Typescript împreună cu operatorul ternar într-un component React. Nu sunt sigur dacă acest lucru nu se poate face, dacă sintaxa mea este greșită sau dacă este un bug al Typescript.

Rețineți că, în cazul meu particular, trebuie să folosesc notația cu paranteze pentru a accesa cheia unui obiect, în timp ce în exemplele pe care vi le dau, tehnic nu este necesar.

Fără lanțare opțională:

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

Cu concatenare opțională

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

Se pare că compilatorul TypeScript crede că semnul întrebării după ["key2"] în al doilea exemplu începe o operațiune ternară.

Cine știe cum să le folosească pe amândouă împreună?

Răspuns #1

Sintaxa pentru chaining opțional nu constă doar din semnul întrebării, ci de fapt și din punctul adiacent. Codul tău ar trebui să funcționeze mai bine astfel:

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