Typescript optional chaining combined with ternary operator parsing error

Question

I'm having trouble using Typescript optional chaining in conjunction with the ternary operator inside of a React component. I'm not sure if it can't be done, my syntax is off, or it is a Typescript bug.

Note that in my particular case I need to use bracket notation to access an object's key, while in the examples I give you technically don't.

Without optional chaining:

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

With optional chaining

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

The typescript compiler appears to think that the question mark after ["key2"] in the second example is starting a ternary operation.

Anyone know how to use them both together?

The documentation clearly describes how to use optional chaining with bracket notation. This has nothing to do with the conditional operator. — Sebastian Simon
– Sebastian Simon, Commented Feb 9, 2021 at 8:22

Erik · Accepted Answer · 2021-02-09 00:26:11Z

6

The syntax for optional chaining does not only consist of the question mark, but actually also the adjacent dot. Your code should work better like this:

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

edited Feb 9, 2021 at 0:26

answered Feb 9, 2021 at 0:21

Erik

8576 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript optional chaining combined with ternary operator parsing error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related