React组件中Typescript可选链与三元运算符结合使用的解析错误问题

未使用可选链时的类型错误 #

该报错是符合TS类型检查规则的预期行为：test["key1"]["key2"]的类型为{ key3: string } | null，未做空值判断就直接访问其key3属性时，TS会检测到null值的访问风险，抛出类型错误。

加入可选链后报"期望冒号"解析错误的原因 #

两个核心诱因触发该解析错误：

• JSX注释写法错误：JSX中嵌入块注释的正确格式为{/* 注释内容 */}，你写的注释将开头的/*写反为*/，本身存在语法问题，会干扰解析流程。
• 更关键的是：如果使用的TypeScript版本低于3.7，不支持可选链语法，编译器会把?.中的?误判为三元运算符的起始标记，后续解析时找不到三元运算符要求的冒号，就会抛出"期望冒号"的错误。

正确实现方式 #

1. 确保TypeScript版本≥3.7（该版本在2019年10月正式支持可选链语法，包括方括号形式的可选访问?.[key]）。
2. 修正JSX注释的写法，移除语法错误的注释块。
3. 可选链与三元运算符本身无语法冲突，正常可运行的代码如下：

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"}
    </div>
  )
}

低版本TS的兼容写法 #

如果项目受限于环境无法升级到支持可选链的TS版本，可以手动逐层做存在性判断替代可选链逻辑：

{
  (test["key1"] && test["key1"]["key2"] && test["key1"]["key2"]["key3"])
    ? "Key3 Exists"
    : "Key3 Doesn't Exist"
}

内容的提问来源于stack exchange，提问作者Jordan