Type PermissionName for Permission API doesn't contain correct types

[maciekgrzybek]

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

[maciekgrzybek]

I've already made changes in my local fork, but not sure what's the exact workflow here? Should I create a PR or does it need to be confirmed first?

[RyanCavanaugh]

@maciekgrzybek thanks for asking! A PR would be great

[maciekgrzybek]

@RyanCavanaugh just pushed it here :) #34562

[maciekgrzybek]

PR added here - https://github.com/microsoft/TSJS-lib-generator/pull/792

[iKethavel]

Looks like API for Clipboard was changed since previous PR. Now we have this - https://developers.google.com/web/updates/2018/03/clipboardapi

[jaredhan418]

pls fix this bug!

[Leedehai]

Ping for this bug :) VSCode 1.48

[NCC1701M]

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

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

[haVincy]

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

[valerii15298]

This bug again occurs. Updated to typescript 4.4.2 and i see such error:

But microphone must be allowed type!

[sbjovanovski]

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.

[echocrow]

+1, seeing the same issue with { name: 'gyroscope' }. Using type assertion via as PermissionName circumvents this for now.

The W3C Working Draft on the Permissions API lists a couple more PermissionName enums:

• https://www.w3.org/TR/permissions/#dom-permissionname

Note that this is not a complete list however: e.g. gamepad is not listed here. Instead, the draft does state:

The APIs and features in scope for the Permissions Policy specification go beyond those identified in this specification's PermissionName enum (e.g., "sync-xhr" and "gamepad").

Merging the W3C PermissionName with the MDN list linked by the OP and the list TypeScript currently implements, we could expand to the following type:

type PermissionName = "accelerometer" | "accessibility-events" | "ambient-light-sensor" | "background-fetch" | "background-sync" | "bluetooth" | "camera" | "camera'" | "clipboard-read" | "clipboard-write" | "display-capture" | "gamepad" | "geolocation" | "gyroscope" | "magnetometer" | "microphone" | "midi" | "nfc" | "notifications" | "payment-handler" | "persistent-storage" | "push" | "screen-wake-lock" | "speaker-selection" | "sync-xhr" | "xr-spatial-tracking";

Unless we also allow any other string, this list will need to be continuously maintained as new Permissions get developed.

[Kreozot]

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?

[juliabmenezes]

Any updates please?

[jagregory]

+1'ing, also missing camera from PermissionName

[Mange]

Seems like they were removed in #1034. No idea why…

[batbrain9392]

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

[AHMetaCubes]

^^^ status? same err ...

[DiracSpace]

Same error here, I've used the workaround but would like a persistent solution.

[baaraak]

+1 same error with microphone

[RyanCavanaugh]

@sandersn looks like no one has been able to send a PR for this - please see what we need to do

[sandersn]

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.)

[v1shaL-b]

Same error here. I've used the workaround, but it doesn't actually let me record anything when actually getting the permission. Maybe the workaround doesn't work anymore.

[nathanredblur]

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

[GeoMarkou]

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";

[NiiyaDaiki]

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.

[kwikwag]

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;

[pepegmz]

in my case, I had a project where I imported several plugins directly that used a different version of typescript, so when I used vscode auto-import I imported the classes directly from the src folder instead of the package name

doing a build to the plugins and then proceeding to install them and making sure they were imported from their package name solved my problem.