TypeScript: Missing `Navigator.clipboard` (clipboard asynchronous API)

Hey, isn’t it a good moment to go back to this issue and reopen it? I would really love to have it to avoid any workarounds. Chrome supports it from v66 now I have v71. Should be pretty stable.

How is “widely adopted” defined? It seems to me that according to http://gs.statcounter.com/ over half of all desktop browser users globally were on a Chrome version that supported this API already for months when the comment “We don’t add non-standard DOM APIs until they’re at least widely adopted.” was made.

Perhaps not a great solution but if anyone else needs a hacky workaround, this worked for me.

type new var with any

let anyNavigator: any

assign new var to window.navigator

anyNavigator = window.navigator

use new var in place of navigator

anyNavigator.clipboard.writeText(event.target.defaultValue)

seems to work ok with "typescript": "^3.2.4"

We don’t add non-standard DOM APIs until they’re at least widely adopted.

It is an experimental API. By the way, readText and writeText are also supported in Firefox 63+.

As a workaround:

// navigator.clipboard.d.ts

// Type declarations for Clipboard API
// https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
interface Clipboard {
  writeText(newClipText: string): Promise<void>;
  // Add any other methods you need here.
}

interface NavigatorClipboard {
  // Only available in a secure context.
  readonly clipboard?: Clipboard;
}

interface Navigator extends NavigatorClipboard {}

Where should I place this file?

It is an experimental API. By the way, readText and writeText are also supported in Firefox 63+.

As a workaround:

// navigator.clipboard.d.ts

// Type declarations for Clipboard API
// https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
interface Clipboard {
  writeText(newClipText: string): Promise<void>;
  // Add any other methods you need here.
}

interface NavigatorClipboard {
  // Only available in a secure context.
  readonly clipboard?: Clipboard;
}

interface Navigator extends NavigatorClipboard {}

@1valdis it’s very reasonable that Typescript would not include these tools by default. Typescript is targeted to a very wide ranging audience. Giving bleeding-edge tools without warning and by default to developers who are unaware they might be bleeding edge easily leads to unknown bugs. TS is designed to prevent exactly these kinds of issues.

If you’re keen to use experimental tools, then you should also be aware of how to extend your definition files to allow them, and how to support users who do not have the latest browsers.

Can anyone please share how to do this?

Both Chrome and Firefox support the clipboard read and write methods now . Those should be added to the type definitions (which currently only contain readText and writeText).

@1valdis it’s very reasonable that Typescript would not include these tools by default. Typescript is targeted to a very wide ranging audience. Giving bleeding-edge tools without warning and by default to developers who are unaware they might be bleeding edge easily leads to unknown bugs. TS is designed to prevent exactly these kinds of issues.

If you’re keen to use experimental tools, then you should also be aware of how to extend your definition files to allow them, and how to support users who do not have the latest browsers.

https://github.com/Microsoft/TypeScript/blob/2f9218f/src/lib/dom.generated.d.ts#L10489