typescript - Chrome 开发工具，异常行为，将变量显示为未定义，但仍然可以访问成员

Question

我可能需要一些帮助来更好地解释和定义这个问题，因为我只知道这种情况发生在 chrome devtools 中，我正在查看的代码是用 Parcel 编译的，并且我正在使用某些版本4.4 之后的 typescript。

我在此处的 500 后面走了几行，当我悬停在范围窗口中时，const parsed 显示为未定义。如果确实未定义，则 parsed.type 应该抛出，以及我所在的行 - 506，它访问 .value

然而，经过几步之后，我到达了 507(!)，现在我可以看到 parsed 中确实有一些东西，并且在单步执行之前一定有一些东西(范围窗口显示解析为 {type: 'ok', value: 'custom-plot'}。

我对 Parcel 的经验非常有限，但我确信在为 Webpack 进行正确的设置时，我能够获得更好的调试 typescript 的经验。我在哪里以及如何开始调试这个？

至少，我想告诉调试器移动到 500 以上，并在赋值后真正看到该变量中的内容。

编辑

我已经升级了parcel，并使其开箱即用时表现更好，我仍然很好奇工具链的哪一部分导致了这种情况。

Answer 1

它可能是parcel，或者parcel内部使用的工具(swc/babel/tsc，取决于您的设置)。 (尽管这是一个猜测 - 如果没有我可以调试的完整重现，很难确定)。 Parcel 负责生成源映射，源映射中的错误很容易导致您所看到的各种问题 - 调试器表示其停止的 .ts 代码行之间存在不匹配，以及变量、控制流等方面实际发生的情况。

升级包裹导致问题消失的事实支持了这一理论。您还可以在 parcel changelog 中看到修复了许多与源映射相关的错误。 。如果您将来继续遇到此类问题，我建议您尝试创建简化的复制品并使用 Parcel 提交错误。