typescript - Typescript NetworkInformation 类型不包含所有属性

Question

我想访问NetworkInformation对象effectiveType的downlink属性。

我知道这些属性可能不存在，具体取决于浏览器，我正在检查如下：

const info: string[] = ['Downloading...'];
if ('connection' in window.navigator) {
  info.push(`Connection Type: ${navigator.connection.effectiveType}`);
  if ('downlink' in window.navigator.connection) {
    info.push(`Speed: ${navigator.connection.downlink} MB/s`);
  }
}

但是类型只包含type属性。虽然当我在控制台中打印该对象时，它具有我期望的所有属性：

我应该怎么做才能克服打字稿错误？

类型“NetworkInformation”.ts(2339) 上不存在属性“下行链路”

标签： typescriptnavigator

Answer 1

问题

for 的类型NetworkInformation存在于lib.dom.d.ts并且在撰写本文时看起来像这样：

interface NetworkInformation extends EventTarget {
    readonly type: ConnectionType;
}

– lib.dom.d.ts L10430-L10432 @ 65ae16c

不幸的是downlink，effectiveType那里还没有（以及更多）。

DOM lib 实际上是由一个工具生成的：TypeScript-DOM-lib-generator。在自述文件中，它具有以下内容：

为什么我喜欢的 API 在这里仍然不可用？

一个功能需要得到两个或多个主要浏览器引擎的支持，以确保供应商之间达成良好共识：Gecko (Firefox)、Blink (Chrome/Edge) 和WebKit (Safari)。

–参考

当类型丢失时

自动算法可能决定浏览器不能很好地支持它，因此将其删除。假设我们要添加一个名为Foo. 检查MDN中是否有关于该接口的文档。如果有，请查看浏览器兼容性部分并检查它是否被两个或多个浏览器引擎支持。（请注意，基于 Chromium 的浏览器使用相同的浏览器引擎，因此它们的支持算作单一支持。）

–参考

检查浏览器兼容性表NetworkInformation，在撰写本文时它看起来像这样：

	铬合金	边缘	火狐	IE浏览器	歌剧	苹果浏览器
NetworkInformation（实验性）	61 ✅</td>	79 ✅</td>	没有❌</td>	没有❌</td>	48 ✅</td>	没有❌</td>
downlink（实验性）	61 ✅</td>	79 ✅</td>	没有❌</td>	没有❌</td>	48 ✅</td>	没有❌</td>
downlinkMax（实验性）	61 ✅</td>	没有❌</td>	没有❌</td>	没有❌</td>	没有❌</td>	没有❌</td>
effectiveType（实验性）	61 ✅</td>	79 ✅</td>	没有❌</td>	没有❌</td>	48 ✅</td>	没有❌</td>
onchange（实验性）	61 ✅</td>	79 ✅</td>	没有❌</td>	没有❌</td>	48 ✅</td>	没有❌</td>
ontypechange（实验性）（弃用）（非标准⚠️）	没有❌</td>	没有❌</td>	没有❌</td>	没有❌</td>	未知❓</td>	没有❌</td>
rtt（实验性）	61 ✅</td>	79 ✅</td>	没有❌</td>	没有❌</td>	48 ✅</td>	没有❌</td>
saveData（实验性）	65 ✅</td>	79 ✅</td>	没有❌</td>	没有❌</td>	是的	没有❌</td>
type（实验性）	61 ✅</td>	没有❌</td>	没有❌</td>	没有❌</td>	没有❌</td>	没有❌</td>
在工人中可用（实验性）	61 ✅</td>	79 ✅</td>	没有❌</td>	没有❌</td>	48 ✅</td>	没有❌</td>

–参考

查看上表，似乎只有基于 Blink/Chromium 的浏览器（Chrome、Edge 和 Opera）支持NetworkInformation界面的各个部分。Gecko 和 WebKit 没有。因此，它不符合需要支持两个或更多主要浏览器引擎才能将 API 添加到类型的测试。

至于为什么NetworkInformation甚至首先存在于类型中，我不知道。但是你可以看到它是如何通过GitHub 中lib.dom.d.ts的责备进入的。

解决方案

您可以创作自己的类型或使用其他人在此处创作的类型。