TypeScript：对象可能为“空”。窗口.打开

Question

如何在 Typescript 中完成这项工作？

window.open(externalUrl, '_blank').focus();

这会引发以下打字稿错误：

Object is possibly 'null'.ts(2531)

我试过这个，但它不起作用：

if (typeof window != 'undefined' && window && externalUrl !== '' && window.open(externalUrl, '_blank') ) {
      window.open(externalUrl, '_blank').focus();
    }

Answer 1

假设您使用的是 IDE，可能会有一条红色波浪线显示表达式的哪一部分有问题：

  window.open(externalUrl, '_blank').focus(); // error
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Object is possibly 'null'

在这里，它是说window.open(externalUrl, '_blank')可能是null，而不是它window本身可能是。所以你不必检查window来解决这个特定的错误（尽管取决于你使用的运行时 JS 环境，那里可能有也可能没有window。我假设有一个）。

无论如何，您看到的错误与 的MDN 文档Window.open()相符，它表示如果无法打开窗口，则返回值将为null. 为了解决这个问题，您需要查看返回值，并且只有focus()在它不为空时才调用它。请注意，您不能这样做：

if (window.open(externalUrl, '_blank')) {
    window.open(externalUrl, '_blank').focus(); // still error
}

那是因为编译器不相信一次成功调用就window.open()意味着第二次调用也会成功。据编译器所知，有可能第一个调用返回 a Window，第二个调用返回null。如果您使用相同的参数调用它，这对我来说似乎不太可能，但我不能肯定地说它会起作用。此外，你不会真的想打开两个窗口，是吗？

那么，我们应该怎么做呢？适用于大多数 TypeScript 版本的方法是将结果保存在变量中并进行测试：

const w = window.open(externalUrl, '_blank');
if (w) {
    w.focus(); // okay now
}

在 TypeScript 3.7 及更高版本中，支持可选链运算符?.. 这使您可以更简洁地将上述内容写为：

window.open(externalUrl, '_blank')?.focus(); // okay also

最终，您可以期望可选链运算符成为 JavaScript 本身的一部分；在那之前，上面的代码会像下面这样发送给 JavaScript：

// JavaScript emitted 
(_a = window.open(externalUrl, '_blank')) === null || _a === void 0 ? void 0 : _a.focus();

它将 的结果保存window.open()到一个变量中（就像我们在w上面所做的那样），然后仅focus()在它不是null或时才调用它undefined。无论如何，无论哪种方式都适合您。

好的，希望有帮助；祝你好运！

Playground 链接到代码