【问题标题】：Typescript NetworkInformation type does not contain all propertiesTypescript NetworkInformation 类型不包含所有属性
【发布时间】：2021-12-08 22:03:22
【问题描述】：

我想访问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) 上不存在属性“下行链路”

【问题讨论】：

标签： typescript navigator

【解决方案1】：

问题

NetworkInformation 的类型存在于 lib.dom.d.ts 中，并且在撰写本文时如下所示：

interface NetworkInformation extends EventTarget {
    readonly type: ConnectionType;
}

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

很遗憾，downlink 和 effectiveType（以及更多）尚不存在。

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

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

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

——reference

类型缺失时

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

——reference

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

	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
`NetworkInformation` (Experimental ?)	61 ✅	79 ✅	No ❌	No ❌	48 ✅	No ❌
`downlink` (Experimental ?)	61 ✅	79 ✅	No ❌	No ❌	48 ✅	No ❌
`downlinkMax` (Experimental ?)	61 ✅	No ❌	No ❌	No ❌	No ❌	No ❌
`effectiveType` (Experimental ?)	61 ✅	79 ✅	No ❌	No ❌	48 ✅	No ❌
`onchange` (Experimental ?)	61 ✅	79 ✅	No ❌	No ❌	48 ✅	No ❌
`ontypechange` (Experimental ?) (Deprecated ??) (Non-standard ⚠️)	No ❌	No ❌	No ❌	No ❌	Unknown ❓	No ❌
`rtt` (Experimental ?)	61 ✅	79 ✅	No ❌	No ❌	48 ✅	No ❌
`saveData` (Experimental ?)	65 ✅	79 ✅	No ❌	No ❌	Yes	No ❌
`type` (Experimental ?)	61 ✅	No ❌	No ❌	No ❌	No ❌	No ❌
Available in workers (Experimental ?)	61 ✅	79 ✅	No ❌	No ❌	48 ✅	No ❌

——reference

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

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

解决方案

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

【讨论】：