Missing `Navigator.clipboard` (clipboard asynchronous API)

[modrzew]

TypeScript Version: 3.0.0-dev.20180711

Search Terms: navigator, clipboard

Code

console.log(window.navigator.clipboard)

Expected behavior: No error.

Actual behavior:

error TS2339: Property 'clipboard' does not exist on type 'Navigator'

Playground Link: http://www.typescriptlang.org/play/#src=window.navigator.clipboard%3B

Related Issues: none found

W3C: https://www.w3.org/TR/clipboard-apis/#async-clipboard-api
MDN: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard

[MartinJohns]

Probably missing because it's still a working draft and no browser supports it yet: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#Browser_compatibility

Why add something to the standard library that is not supported?

[modrzew]

no browser supports it yet

It's available in Chrome since 62 (behind a flag) and enabled by default since 66: https://www.chromestatus.com/feature/5861289330999296

[MartinJohns]

Okay, so a single browser supports it already. But it's still an early draft.

[RyanCavanaugh]

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

[glebm]

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 {}

[lucifer1004]

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?

[maciaszczykm]

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.

[blixt]

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.

[maciaszczykm]

@RyanCavanaugh Can you give us any answer?

[cpplearner]

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

[gbertoncelli]

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?

I've done that inline like this:

// !! in any place or file !!
// 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 extends Navigator {
  // Only available in a secure context.
  readonly clipboard?: Clipboard;
}
interface NavigatorExtended extends NavigatorClipboard {}

And where you need to use the clipboard you can cast the navigator to the created interface:

    (navigator as NavigatorExtended).clipboard
      .writeText(event.target.innerText)
      .then(() => {
        alert("Copied!");
      }); 

(if the extended interface is in an external file you need to import it first!)