typescript - getElementById の型チェックは、型チェックではなく、オプションの連鎖でのみ機能します

Question

折れ線グラフにグラデーションを追加しようとすると、キャンバスを取得する必要がありました。キャンバスに進む前にタイプチェックを追加しましたが、Vetur は「オブジェクトはおそらく 'null'.Vetur(2531)」であると述べました。

  mounted() {
    const canv = document.getElementById("line-chart") as HTMLCanvasElement;
    if (canv !== null && canv !== undefined) {
      const gradient = canv
        .getContext("2d")
        .createLinearGradient(0, 0, 0, canv.height);

調査した後、オプションの連鎖演算子を使用して型チェックを試みました。エラーが報告されないため、このアプローチは機能します。

  mounted() {
    const canv = document.getElementById("line-chart") as HTMLCanvasElement;
    const gradient = canv
      ?.getContext("2d")
      ?.createLinearGradient(0, 0, 0, canv.height);

canv は const であるため、変更できないため、最初のアプローチが機能しない理由について混乱しています。タイプチェックで十分です。

この場合、オプションのチェーンのみが機能するのはなぜですか?