TypeScript: Type PermissionName for Permission API doesn't contain correct types

TypeScript Version: 3.6.3

Search Terms: permission, permissionname, API, navigator, clipboard-write, clipboard-read, clipboard

Code

  const checkForPermission = (type: PermissionName) => {
    navigator.permissions
      .query({
        name: type,
      })
      .then(permissionStatus => {
        // Will be 'granted', 'denied' or 'prompt':
        console.log(permissionStatus);
        // permissionStatus.state = 'granted'
        // Listen for changes to the permission state
        permissionStatus.onchange = () => {
          console.log(permissionStatus.state);
        };
      });
  };

  checkForPermission('clipboard-read');
  checkForPermission('clipboard-write');

Expected behavior: ‘clipboard-read’ and ‘clipboard-write’ should be valid types for PermissionName type.

Actual behavior: ‘clipboard-read’ and ‘clipboard-write’ are not valid types for PermissionName type. Typescript is showing error: Argument of type '"clipboard-read"' is not assignable to parameter of type 'PermissionName'.

Playground Link: TS Playground link

Related Issues:

Other comments: According to MDN PermissionName should have these types: ‘accelerometer’, ‘accessibility-events’, ‘ambient-light-sensor’, ‘background-sync’, 'camera’, ‘clipboard-read’, ‘clipboard-write’, ‘geolocation’, ‘gyroscope’, ‘magnetometer’, ‘microphone’, ‘midi’, ‘notifications’, ‘payment-handler’, ‘persistent-storage’, and ‘push’ Source

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 24
Comments: 28 (3 by maintainers)

Commits related to this issue

removed clipboard permission checks that failed to build Seems like an old ongoing issue with TypeScript: https://github.com/microsoft/TypeScript/issues/33923 — committed to elsa-workflows/elsa-core by constantine-v 3 years ago
Fixes #1651 (#1663) * ignoring start button click in Test mode * #1651: added word-break to endpoint URL * #1651: refresh test panel on workflow execute, if activity is already selected * re... — committed to elsa-workflows/elsa-core by constantine-v 3 years ago

Most upvoted comments

As a workaround to avoid the error, you could do this:

const permissionName = "clipboard-write" as PermissionName;
navigator.permissions.query({ name: permissionName }).then(result => {});

+40

NCC1701M on Dec 11, 2020

Yes, I agree with @valerii15298 , this issue occurred again. ‘microphone’ is no longer part of the name types. These are the current types in Typescript 4.1.5:

"gamepad" | "geolocation" | "notifications" | "persistent-storage" | "push" | "screen-wake-lock"

However, luckily this workaround still works:

const permissionName = "microphone" as PermissionName;
navigator.permissions.query({ name: permissionName }).then(result => {});

This should be fixed.

+12

sbjovanovski on Sep 2, 2021

We require implementation in two engines for something to be added to lib.dom.d.ts.

Chromium browsers support a lot more permissions, but neither Firefox nor Safari do. The table https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API#permissions_interface shows that the current union in lib.dom.d.ts is correct (actually, it has two extra entries that don’t show up in MDN’s list.)

sandersn on Apr 28, 2022

+1’ing, also missing camera from PermissionName

jagregory on Nov 21, 2021

const permissionName = "clipboard-write" as PermissionName;
navigator.permissions.query({ name: permissionName }).then(result => {});

This is working in typescript 4.0.5. Note: Safari doesn’t support permissions API. You’ll need to add check before using it in Safari case. https://caniuse.com/?search=permission

haVincy on Feb 23, 2021

We require implementation in two engines for something to be added to lib.dom.d.ts.

According to this rule, looking at the MDN page, it seems like the type should be:

type PermissionName = "camera" | "geolocation" | "microphone" | "notifications" | "persistent-storage" | "push";

GeoMarkou on Dec 22, 2022

this list needs to be updated, Mozilla list is small but chrome is longer

https://searchfox.org/mozilla-central/source/dom/webidl/Permissions.webidl#10 https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/modules/permissions/permission_descriptor.idl https://github.com/WebKit/WebKit/blob/main/Source/WebCore/Modules/permissions/PermissionName.idl

src: https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query

nathanredblur on Sep 29, 2022

This is such an old issue and no idea why it’s still not addressed!

batbrain9392 on Jan 29, 2022

The W3C standard defines:

dictionary PermissionDescriptor {
  required DOMString name;
};

Which means any value should be permissible. Perhaps it’s best to define:

type WellKnownPermissionName = "geolocation" | "notifications" | "persistent-storage" | "push" | "screen-wake-lock" | "xr-spatial-tracking"
type PermissionName = WellKnownPermissionName | string;

kwikwag on Nov 29, 2023

Ok, there is old PR to this #34562, which was closed because of necessity to make this changes in https://github.com/Microsoft/TSJS-lib-generator. I’ve done some search in there and found this: https://github.com/microsoft/TypeScript-DOM-lib-generator/blob/main/inputfiles/removedTypes.jsonc So looks like all the missing properties are not just missing - they are removed for some reason. Any ideas why? Or am I understand it wrong?

Kreozot on Sep 22, 2021

What was the end result of this case?

We require implementation in two engines for something to be added to lib.dom.d.ts.

Following the above rules, I think some types should be added.

NiiyaDaiki on Sep 14, 2023

+1 same error with microphone

baaraak on Apr 17, 2022