オプショナルチェーンとブラケット記法の組み合わせ #JavaScript

オプショナルチェーンとブラケット記法の組み合わせでちょっと詰まったので備忘
(めちゃくちゃ基礎的な内容です)

const val = hogeObject.nullableParam?.["KEY"]

あるオブジェクトがあり、そのうちの1つのプロパティは定義されていない可能性がある。

const hogeObject = {
  nullableParam?: Record<string, string>,
  param: string,
  ...
}

このとき、以下のように書くとts(4111)エラーが出る。

const val = hogeObject.nullableParam?.KEY
// プロパティ 'KEY' はインデックス シグネチャに基づいているため、['KEY'] を使用してアクセスする必要があります。 ts(4111)

なのでブラケット記法に変えると、次はts(1005)エラーが出る。

const val = hogeObject.nullableParam?["KEY"]
// ':' が必要です。 ts(1005)

「:なんていらないだろ...？」と思っていましたが、どうやら三項演算子の記法と勘違いされているらしい
試しに以下で書き換えてみるとエラーは無くなった

const val = hogeObject.nullableParam ? hogeObject.nullableParam["KEY"] : ""

ただ、同じ文字を2回も書いて冗長だし、何かいい感じに書ける方法ないかな...
と探していたところ、以下でいけることを知りました。

const val = hogeObject.nullableParam?.["KEY"]

オプショナルチェーンとブラケット記法を組み合わせるときは間に.が要るんですね...
知らなかった orz

逆に、なんで今まで.つけてなかったんだろう？と思いましたが、
多分最初に習得した言語がPythonだったのでその影響はありそうな気がします。
(ブラケット記法の前に.をつけるという発想がなかった)