Typescript NetworkInformation type does not contain all properties

Question

I want to access effectiveType and downlink properties of the NetworkInformation object.

I know that these properties may not exist depending on the browser, I'm checking that as follows:

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`);
  }
}

But the type contains only the type property. Though when I'm printing that object in the console it has all the properties I'm expecting:

What should I do to get past the typescript errors?

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

Answer 1

Problem

The type for NetworkInformation exists in lib.dom.d.ts and, at the time of writing, looks like this:

interface NetworkInformation extends EventTarget {
    readonly type: ConnectionType;
}

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

Unfortunately downlink and effectiveType (and more) do not exist on there yet.

The DOM lib is actually generated by a tool: TypeScript-DOM-lib-generator. In the readme, it has the following:

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

Checking the browser compatibility table for NetworkInformation, it looks like this at the time of writing:

	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

Looking at the above table it looks like only Blink/Chromium based browsers (Chrome, Edge and Opera) support various parts of the NetworkInformation interface. Gecko and WebKit do not. As a result it doesn't meet the test that two or more major browser engines need to be supported for an API to be added to the types.

As for why NetworkInformation even exists in the types in the first place, I don't know. But you can see how it got in via lib.dom.d.ts's blame in GitHub.

Solution

You can author your own types or use the types that someone else has authored here.