TypeScriptでNavitagorクラスのclipboardがエラーになる。。(回避方法)

Navigaterのclipboardでクリップボードコピーしたかったけど、
TypeScriptでエラーになったときに調べた備忘録。ただし、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 {}

以上!!

参考にしたサイト様

• Missing Navigator.clipboard (clipboard asynchronous API) · Issue #26728 · Microsoft/TypeScript · GitHub