TypeScript：關於可選鏈的困惑

Question

我有這個代碼片段。

interface OBJ {
  a: {
    b?: {
      c?: number;
    };
  };
}

const obj: OBJ = {
  a: {
    b: {
      c: 1
    }
  }
};

if (obj.a.b.c === 1) {
  console.log("here");
}

首先，TS 編譯器抱怨Object is possibly 'undefined'.ts(2532) at obj 。 我不明白，因為在我看來對象確實已定義，只是根據接口b和c屬性可以未定義。

然后我想我可以在它上面使用可選鏈接

if (obj.a.b?.c === 1) {
  console.log("here");
}

但是這次編譯器說有語法錯誤

/src/index.ts: Unexpected token (9:14)

   7 |     }   
   8 | };
>  9 | if (obj.a.b ? .c === 1 : ) {
     |              ^   
  10 |     console.log("here");
  11 | }
  12 | //#

我在這里缺少什么？ 有人可以向我解釋這兩個問題嗎？

現場演示： https : //codesandbox.io/s/wizardly-booth-idpy5?file=/ src/ index.ts

Answer 1

首先，TS 編譯器抱怨 Object 可能是 'undefined'.ts(2532) at obj。 我不明白，因為在我看來對象確實已定義，只是根據接口 b 和 c 屬性可以未定義。

是的，編譯器顯示b可以是未定義的。 此消息與a無關。 您可以通過更改if (obj.a === 1) - 現在沒有錯誤來輕松檢查這一點。

構造if (obj.ab?.c === 1)將被轉換為if (((_a = obj.ab) === null || _a === void 0 ? void 0 : _a.c) === 1)編譯后。 我更喜歡使用舊的好守衛：

if (obj.a.b && obj.a.b.c === 1) {
  console.log("here");
}

但是這次編譯器說有語法錯誤

這很奇怪。 從 TS 3.7 開始，這應該不是錯誤。 查看另一個在線沙箱： 單擊。 你會看到這里沒有錯誤。

Answer 2

擴展@Anton的答案

您在示例中使用了包裹打包器。 您需要告訴parcel 使用哪個版本的打字稿（支持可選鏈運算符的版本），錯誤就會消失。

包.json：

"devDependencies": {
    "parcel-bundler": "^1.6.1",
    "typescript": "^4.0.2"
},