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

Posted 2023-03-13

【中文标题】如何修复“找不到名称\'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 来规避它

【参考方案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 => 
// ...
);