如何修复“找不到名称'ClipboardItem'”错误？答案

【问题标题】：How to fix the "Cannot find name 'ClipboardItem'" error?如何修复“找不到名称'ClipboardItem'”错误？
【发布时间】：2020-07-25 23:33:35
【问题描述】：

得到错误

错误 TS2304：找不到名称“ClipboardItem”

尝试为navigator.clipboard.write() 创建ClipboardItem 时。

const clipboardItemInput = new ClipboardItem({'image/png' : blobInput});
 await navigator.clipboard.write([clipboardItemInput]);

我正在使用 Angular 6。我需要添加任何依赖项，还是有任何其他方法？

【问题讨论】：

我也收到错误“剪贴板”类型上不存在属性“写入”。
您可以通过将 navigator.clipBoard 转换为 any => (navigator.clipboard as any).write 来规避它

标签： typescript blob navigator html5-clipboard-api typescript-lib-dom

【解决方案1】：

Typescript 版本可能未包含所有功能。这是我们需要通过创建类型或扩展现有类型来扩展它的地方。要解决此问题，请尝试创建一个 types.d.ts 文件 (reference1) 并将以下内容放入其中：

declare class ClipboardItem {
  constructor(data: { [mimeType: string]: Blob });
}

然后在您的组件代码中引用该文件：

/// <reference path="types.d.ts" />

然后随意使用该类。

const item = new ClipboardItem({ "image/png": blob });
window.navigator['clipboard'].write([item]);

灵感：reference2

【讨论】：

【解决方案2】：

适用于 TypeScript 4.4 及更高版本

TypeScript 4.4 更新了缺少接口和方法的标准定义库 (full list of changes)，因此一切都应该开箱即用。以下示例代码现在无需额外的接口/声明合并即可编译：

declare const image: ClipboardItemData;
(async () => {
  const item = new ClipboardItem({ "image/png": image });

  const files = await navigator.clipboard.read();
  if( files.length ) return;

  await navigator.clipboard.write([item]);
})();

Playground

适用于 TypeScript 4.3 及更低版本

截至 2021 年，TypeScript 标准库仍然缺少剪贴板 API 的定义（这就是“找不到名称 'ClipboardItem'”错误的原因）。源存储库上有一个open issue，DOM 库生成器存储库上有一个pull request（因为标准库是自动生成的），应该可以解决这个问题。

同时，您可以添加以下与标准库定义其他全局接口的方式相匹配的定义（不要忘记在导入文件的顶部添加三斜杠指令/// <reference types="../../index" />）：

interface ClipboardItem {
  readonly types: string[];
  readonly presentationStyle: "unspecified" | "inline" | "attachment";
  getType(): Promise<Blob>;
}

interface ClipboardItemData {
  [mimeType: string]: Blob | string | Promise<Blob | string>;
}

declare var ClipboardItem: {
  prototype: ClipboardItem;
  new (itemData: ClipboardItemData): ClipboardItem;
};

请注意，ClipboardItemData 被定义为采用 Blob、string 或返回前者之一的承诺，而不仅仅是 Blob（参见 MDN reference，例如）。使用缺少的 read 和 write 方法来扩充 Clipboard 接口也没有什么坏处：

interface Clipboard {
  read(): Promise<DataTransfer>;
  write(data: ClipboardItem[]): Promise<void>;
}

最后，让我们测试一下定义是否按预期工作：

declare const image: Blob;
(async () => {
  const item = new ClipboardItem({ ["image/png"]: image });

  const { files } = await navigator.clipboard.read();
  if( files.length ) return;

  await navigator.clipboard.write([item]);
})();

Playground

【讨论】：

【解决方案3】：

简单但不是很好

let anyNavigator: any;
anyNavigator = window.navigator;
const clipboardItemInput = new ClipboardItem({'image/png' : blobInput});
await anyNavigator.clipboard.write([clipboardItemInput]);

如果你想read clipboard或者调用任何有返回值的函数：

let anyNavigator: any;
anyNavigator = window.navigator;
(anyNavigator.clipboard.readText() as Promise<string>).then(data => {
// ...
});

【讨论】：