访问顶部“对象可能为‘空’”的属性时出现新错误。升级到 TS 4.4.3 后

Question

我最近将我的项目从 3.9.9 升级到 TypeScript 4.4.3。

"strictNullChecks": true,我的项目在其 中使用tsconfig.json，并在浏览器中运行，而不是在 Node.js 上的服务器端运行。

在 TypeScript 4.4.3 中，似乎类型声明top已更改为WindowProxy | null( node_modules/typescript/lib/lib.dom.d.ts)

这意味着无论我尝试访问²的属性，我都会收到以下错误¹ ​​：TS Playgroundtop

const topUrl = top.window.location.href; // => Object is possibly 'null'.

如何仅在可能为空时忽略此类错误top？³

---

¹据我所知，此错误警告我注意我的网站在 iframe 中加载的情况，因此top由于 XSS 而无法访问。这不是问题，因为我的'X-Frame-Options'设置为'sameorigin'，因此将拒绝在跨源 iframe 中加载我的网站。

²我访问 的属性，top因为我在项目中经常使用 iframe，它会加载同一域上的子页面。

³我可以使用以下修复来解决这个问题Object is possibly 'null'.，但我不想这样做，因为我的项目相当大，而且这个修复将很乏味，而且改进很少。

let topUrl = top?.window.location.href || '';

let topUrl = '';
if (top) {
    topUrl = top.window.location.href;
}

我也可以忽略每一行上的这些错误// @ts-ignore，但有很多引用top，我不想让项目变得混乱（此外，同一行上的其他 TypeScript 错误将被忽略）。

// @ts-ignore
const topUrl = top.window.location.href;

Answer 1

我找到了一个可能适合您需求的解决方案。您可以考虑该解决方案的两个版本。

这两个版本都通过使用同样由 Microsoft 提供的lib-domnpm 包覆盖内置版本来工作。@types/web

测试版但系统性的 -使用最新的官方“lib override”typescript@4.5.0-beta

按照以下步骤操作，一切都会按您的预期工作，无需任何其他代码修改：

1. 升级到TypeScript4.5.0：

   npm i -D typescript@4.5.0-beta
   

   或全局安装

   npm i -g typescript@4.5.0-beta
   

2. 安装@types/web@0.0.1有top: Windowtype 的 type 包

   npm i -D @typescript/lib-dom@npm:@types/web@0.0.1
   

我对此解决方案进行了一些简单的测试，并设法获得了您想要的行为。

该解决方案的唯一缺点是 typescript@4.5 目前仍处于测试阶段。但它值得您考虑，因为它的最终版本将于下个月发布。

TypeScript 4.5 迭代计划

稳定版 - typescript4.4.3 并切换内置 dom lib。

1. 安装@types/web

   npm i -D @types/web@0.0.1
   

   请注意，安装命令与上面的命令不同。

2. 更新您的tsconfig.json. 有两种情况需要考虑，具体取决于您是否已lib定义。tsconfig.json

   1. 没有“lib” - 您将需要添加“lib”：[]。您想要在库中添加的值应该与您的“目标”相关。例如，如果您有“target”：“es2017”，那么您将添加“lib”：[“es2017”]
   2. 对于“lib” - 您应该删除“dom”。

第二个版本的解决方案的缺点是，它无法阻止您的依赖项node_modules拉入 TypeScript DOM 库。

请记住，尽管@types/web版本已达到 0.0.40，但仅输入了 0.0.1 版本，@types/web而top不是top: Window您top: WindowProxy | null需要的版本。