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属性。虽然当我在控制台中打印该对象时，它具有我期望的所有属性：

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

Property 'downlink' does not exist on type 'NetworkInformation'.ts(2339)

Answer 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。在自述文件中，它具有以下内容：

Why is my fancy API still not available here?

A feature needs to be supported by two or more major browser engines to be included here, to make sure there is a good consensus among vendors: Gecko (Firefox), Blink (Chrome/Edge), and WebKit (Safari).

– reference

When the type is missing

It's possible that the automated algorithm decided that it's not well supported by browsers and thus removed it. Say we want to add a new interface named Foo. Check if there is a document about that interface in MDN. If there is, see the browser compatibility section and check whether it's supported by two or more browser engines. (Note that Chromium-based browsers use the same browser engine and thus support from them counts as a single support.)

– reference

正在检查 table 与 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

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

至于为什么 NetworkInformation 甚至首先存在于类型中，我不知道。但是你可以看到它是如何通过 GitHub.

中的 lib.dom.d.ts's blame 进入的

解决方案

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